weBoost

weboost.com

Fixing Technical Debt & Looking Towards the Future

Working on weBoost was both daunting and exciting. There were many areas needing improvement, but the work involved moving over the site and its integrations would require a new vision from the company. The below points were addressed with our rebuild:

• Move codebase over to Git / Version Control
• Create a better workflow for development that would improve efficiency, accuracy, testing, and deployment
• Improve page loads and minify page weight
• Maintain and improve on-site SEO
• Add new features & update the site design from their designer's mock-ups

Improving Development & Efficiency

The original site had no version control, staging environment, and used an outdated Shopify theme. This left the site with many bugs and old, unused code. The rebuild would move the site outside of Shopify's templating engine, allowing for more modern practices. The new process would look like this:

• Work locally and make changes on the staging branch of the codebase
• Commit the changes and check staging.weboost.com
• If everything looks kosher then merge the staging branch into master
• Using Heroku, any changes commited would be pushed live automatically to either master or staging

Using this new workflow, weBoost would have a history of changes made to the site, be able to rollback any changes with mistakes, have different members check the site on staging before anything gets pushed live.

Improving Performance & SEO

The old site was extremely slow, averaged over 3 seconds to load pages, failed many performance tests, and had badly structured URL schemas. Another huge problem was the site was actually split between two subdomains; weBoost.com which used WordPress for the blog and information and store.weBoost.com which used Shopify for the e-commerce and products. This alone had a huge negative effect on the site's SEO. Below is Google's own PageSpeed test of the old site.

To fix this we made the following changes:

• Moved the DNS to CloudFlare and removed store.weBoost.com
• Used the WordPress as a headless service to feed blog posts and other data to the rebuilt site
• Mapped out and created redirects so that the site move wouldn't break any user experience or SEO
• Moved off of Shopify's templating engine and switched to a custom built React / Node server
• Used Next.js to server side render our React, minified all images, loaded only critical CSS for each page and component, moved tracking tags to Google Tag Manager

The rebuilt site launched with minimal issues and both plans for performance and SEO were a success. The rebuild had more than halved the page load and weight, increased the user experience with design updates, and made page transitions super fast with client-side routing.

SEO gained huge traction with simplifying the multiple domains into one. Before the update the blog gave minimal boost for SEO while the store and product pages held the majority of page rank. After the switch, the blog and product pages worked together and helped rank for more keywords than before.

Overall a Successful Update

The rebuild made working within the new system much faster and made adding new features a breeze. By only using Shopify as an API for cart and checkout management, the team was able to continue using current integrations / systems they were invested in. The new workflow made for better communication and prevented the site from having any downtime.