Core Web Vitals have become increasingly important in recent years as they play a significant role in determining a website’s search engine ranking. Core Web Vitals measure the user experience by looking at how quickly a page loads, how quickly it becomes interactive, and how visually stable it is while loading. By optimising Core Web Vitals, businesses can improve user experience, reduce bounce rates, and ultimately drive a higher rate of conversion.

At Photobox, we realised we were trailing behind competitors in this area and that by improving our performance scores we were likely to see improvements in key metrics such as conversion, engagement and retention, e.g:

My team run the ‘Shop’ portion of the Photobox website, which is a React based application serving the product selection part of the experience for customers.

We knew that to move our scores meaningfully upwards would require significant investment and so set about demonstrating to the business the importance of scoring well in this area and the likely returns we could expect from our efforts. After a successful internal campaign, we were given the go-ahead to invest 25% of our time into this work over the course of one financial year and given a target to improve of 20% in order to meet competitor benchmarks.

We then developed a long list of potentially impactful improvements and used the RICE formula to prioritise these, slotting them into the roadmap in a way that would ensure we delivered high value improvements early to reassure stakeholders of the difference we would make to our scores by the end of the year.

Our 17 most impactful improvements

  1. Upgrading Node: We upgraded to the latest version of Node, which allowed us to take advantage of the latest performance improvements and bug fixes.
  2. Removing Ramda: Ramda is a functional programming library that we were previously using, but we found that it was slowing down our site. By removing it, we were able to improve performance.
  3. Refactoring Extended Fetch: We refactored our extended Fetch API to improve performance and reduce bundle size.
  4. Refactoring KOA: We also refactored our KOA middleware to improve performance and reduce bundle size.
  5. Reducing bundle sizes: We used tools like Webpack Bundle Analyzer and Code Splitting to reduce bundle sizes, which in turn helped to improve page load times.
  6. Removing props: We removed unnecessary props from our components to reduce the amount of data that needed to be transferred between the server and client.
  7. Deprecating unused code: We went through our codebase and removed any unused code, which helped to improve performance and reduce bundle size.
  8. Delaying experiment code: We delayed rendering of custom experiment code to improve initial load time and First Contentful Paint.
  9. Resolving garbage collection errors: We resolved any large garbage collection errors that were causing our site to slow down significantly or in some cases timeout altogether.
  10. Refactoring Apollo Client: We refactored our Apollo client to improve performance and reduce bundle size.
  11. Implementing high fetch priority: We implemented high fetch priority for essential resources, which is recommended by Google and helped to improve page load times.
  12. Cleaning up Redux payload: We cleaned up our Redux payload to reduce the amount of data that needed to be transferred between the server and client.
  13. Optimising images: We optimised our images to reduce their file size, which helped to improve page load times without compromising the importance of images in showcasing our product catalogue.
  14. Extending caching: We extended our caching to reduce the number of requests made to the server, which helped to improve page load times.
  15. Removing unused JavaScript: We removed any unused JavaScript to reduce the amount of data that needed to be transferred between the server and client.
  16. Increasing lazy-loading: We increased lazy-loading where possible in order to reduce the amount of data that needed to be transferred between the server and client.
  17. Optimised ESLint: We optimised our ESLint configuration to improve performance and reduce bundle size.

As you can see, bundle sizes were the biggest contributing factor to our lower Core Web Vital scores and a significant proportion of the work we undertook was to reduce these across our stack.

Each quarter I reported on our progress towards the 20% target and was excited to see we were achieving beyond this every time thanks to the hard work of the team.

At the end of the financial year we had managed to achieve a huge 43% improvement in our Core Web Vital scores and we were now in the top performing quadrant against our benchmarked competitors.

Work is now underway from our SEO and Analytics teams to evaluate the commercial impact of our work this year. I’m looking forward to sharing the results!