Blazing-fast, SEO-rich Website using Latest Web Technologies

The Company

Bonsaiilabs, Canada

The Project

bonsaiilabs.com is our company website which provides information on what company does. This is hand crafted by us to provide the best user experience to our visitors.

Tech Stack
  • GatsbyJS

  • GraphQL

  • Material-UI

  • Google Cloud Platform

  • Sketch App

  • Google Analytics

  • Search Engine Optimization (SEO)

  • Lighthouse

  • Chrome Dev Tools

The Goals
  • Website visitors should be able learn about the company, view our present and past work, learn about the team, programming courses we offer and a way to communicate with us.

  • There should be a way to measure site performance and run audits to verify the quality of web pages.

  • Website should be secured with HTTPS support.

  • It should use appropriate aspect ratios of images and be able to handle issues related to accessibility.

  • Site should be discoverable and follow the paradigms of Search Engine Optimization (SEO).

  • The audience should be able to load bonsaiilabs website even on a poor connection.

  • It should be responsive across all screen sizes and could be opened from any device.

  • Learners should be able to get all the details of the online courses including FREE videos, syllabus, reviews, frequently asked questions and a way to purchase the course.

  • Users should be able to view, read and watch the videos from the latest blog post.

  • Website visitors interested in FREE E-Books or technology zines should should be able to download them.

The Approach
  • Created wireframes for every screen and laid down the structure of the pages.

  • Created responsive UI prototypes for each URL on the website. This theme was created with Sketch App using Google Material Design principles. The website can opened on all devices including phone, tablets, laptops and large screens.

  • Used Gatsby framework based on React for developing website.

  • Developed automated build scripts to deploy and host the build in pre-production environment for testing. Our production build is hosted on Google Cloud Servers which automatically provisions SSL certificate so the content is always delivered securely over HTTPS.

  • GraphQL is used to pull the markdown data directly into pages and automatically created slugs for all web pages in the blog. This way releasing new blog is just a matter of minutes.

  • Optimized image rendering through the use of gatsby-sharp-plugin. It reduces the build time for large number of PNGs files used in the codebase.

  • Material-UI framework is used for developing UI components.

  • Hooked up Google Analytics to capture user behavior, actions and events.

  • Used Lighthouse open source automated tool to check performance, accessibility, security and SEO aspects of the website.

The Results
  • The website is blazing fast due to the fact that GatsbyJS pre-build pages and deliver them instantly instead of waiting to generate the web pages.

  • Using Lighthouse tool and its scoring system has shorten the time and effort of bug fixes related to performance, accessibility, security and SEO for the website.

  • So far in last 7 months, we could do 19 releases and every release takes less than 10 minutes.

  • We improved our SEO score to above 95 with the helps of audits and Search Console.

  • After migration to GatsbyJS, we increased active monthly users from 800 to 5k and almost 6.5k pageviews.

  • The use of Google Cloud for hosting helped us deliver the content faster since it caches the static content on CDN edges around the world.

Team Structure

2 engineers who conceptualized, designed, pair-programmed, and deployed the website