👕 Mainline Menswear

A screenshot of the Mainline Menswear Website on mobileA screenshot of the Mainline Menswear Website on tabletA screenshot of the Mainline Menswear Website on desktop

Working to improve Core Web Vitals and performance across an ecommerce store.

Technologies used:

  • Vue.js
  • Nuxt.js

Context

Whilst working with Mainline Menswear I worked on a few key projects:

  • Improving Core Web Vitals and general site performance
  • Implementing a blog
  • Helped expand into international markets

Solution

As the website had gone through a recent rebuild it was already built using modern technology which made it a dream to work with. Working to identify performance bottlenecks included having regular calls with their Google Account Manager. Armed with this information I was able to make performance improvements to core parts of the website to improve the Core Web Vitals.

Mainline required a blog adding to their site which was powered by a headless instance of WordPress. As the content was coming from the CMS and content editors could potentially upload very large images, it was important to make sure these images were optimised when it came to displaying them to the end-user. Using a combination of Jetpack and lazy loading images on the front-end we were able to achive a good balance between content editors not having to worry too much about the images they upload, and not trying to push megabytes of image to the user.

Another challenge we faced was making sure the website was ready to be launched into different countries. To do this we added a country picker, added alternative hreflang tags for each version of the site so Google didn't flag any pages for duplicate content, display localised currencies, amongst other things.