8 Steps We Implemented to Reach Google Page Speed Score of 100 for a Client

One of the most recommended ways to check and optimize your page speed is through Google Page Speed Insights. 

For one of our clients, who is a leading manufacturer of safety signs and labels in the US, we achieved a perfect score of 100 on Google Page Speed Insights. The client website consisted of around 150k products and over 300k pages. Our team worked meticulously to figure out the target areas and created a step-by-step roadmap to improve them. Our experts implemented each step with precision to take the page speed score of the website to 100.

Google Page Speed Insights takes into consideration a few metrics to analyze the page speed of a website. To reach an optimal page speed, you need to move all your metrics towards the green region from the red one. Once all your metrics are green, you have achieved a good page speed for your website.

The metrics are explained in detail below:

1. First Contentful Paint (FCP): It measures the time taken by your website to load the first piece of text or picture after the user navigates to your page. The ideal FCP time for the green zone is 0-1.8 seconds.
2. Time to Interactive (TTI): It is the amount of time taken by a page to load until the moment a user can interact with it. The ideal TTI time is 0 – 3.8 seconds.
3. Speed Index (SI): Speed Index measures how quickly content is visually displayed during page load. To attain the green color, your SI needs to be between 0-3.4 seconds.
4. Total Blocking Time (TBT): TBT measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks or screen taps. The ideal time for entering the green zone is 0-200 milliseconds.
5. Largest Contentful Paint (LCP): The time for displaying the most massive site element on the visible part of the screen. An ideal LCP time is 0 – 2.5 seconds for the green region.
6. Cumulative Layout Shift (CLS): Cumulative Layout Shift measures the movement of visible elements within the viewport. To provide a good user experience, sites should strive to have a CLS score of 0.1 or less.

Apart from this, there is also another aspect that matters – TTFB (Time to First Byte). It measures the time between the browser requesting a page and when it receives the first byte of information from the server. It is recommended to have a TTFB of 0.8 seconds or less.

Now that we have discussed the key metrics that are vital to improve your page speed, we will be discussing some key steps our team implemented to achieve a perfect score of 100.

1. Migration to Headless Commerce: We migrated the traditional monolithic architecture of the website to headless solutions using Magento backend & ReactJS frontend. Adopting a headless approach gave us a lot of flexibility to enhance customer experience, improve parameters of the page speed score insights, and to increase personalization. The migration to the headless system itself helped us push the page speed score above 85.
2. Implement full-page caching: Full-page caching improves response time and reduces the load on the server. Without caching, each page might need to run blocks of code and retrieve information from the database. However, with full-page caching enabled, a fully-generated page can be read directly from the cache. For most websites, it will be a significant performance boost to enable the full page cache. 

However, if your website has ten thousand plus pages, then full page caching of all the pages becomes very complex and generally not possible. In those cases, you should have a fallback caching mechanism where you just cache the data. In such cases, less frequently visited pages will not have full page caching, but the data for those will be cached.

Now that you are done with caching, there might be some changes you want to make to the data. To make this process simpler, you should automate your caching mechanism. Specifically, if you have a large number of products and categories. Otherwise, updating the data would be a very difficult task for the product team.

1. Set Up Content Delivery Network (CDN): A CDN simply collects all your site data like images CSS JS and saves it on their servers spread across the world. So when a user makes a request, it can deliver it from the nearest server with respect to the user. Even milliseconds count when you are on the borderline, so if your CDN is faster, it would get content in milliseconds. Moreover, you should also implement the full page caching in the CDN itself, so your page becomes faster.
2. Add placeholders and set up explicit dimensions for all images: Images make up a large portion of the page elements, so using heavy images increases the page weight and results in slow loading speed. In order to optimize your images, you need to ensure that they are properly sized for your page and efficiently coded. 

Apart from this, you need to set explicit dimensions for all your images. If you set these dimensions beforehand, the other content on your page won’t be affected, and the image will have sufficient space to load while the user reads the rest of the data. 

1. Implement on the fly resizing and compression of the images: Another important aspect to keep in mind is automatic resizing and compression of the images. In case an image is larger than the standard aspect ratio, it should be able to resize itself and fit in the area provided. For example, if the aspect ratio set is 400*300 and the original image has size of 400*400. Then it should be able to automatically resize and deliver to the frontend with the size of 300*300 in order to maintain the actual image ratio. This way the structure of the entire page would remain intact. 
2. Add lazy loading for below-the-fold content: This means that instead of making the browser load every content on a page before displaying the above-the-fold content, it will only load the ones that are immediately visible. Less loading before the page becomes visible means better performance, which is why Google recommends this method.
3. Optimize the SVG icons used on the headers: Merge the smaller icons to create a bigger file in order to get a decent size. It enables you to create an entire file for the icons and not individually save and load them separately. This will reduce multiple network calls and thus save time loading the page.
4. Other Google Suggestions: Apart from the ways listed above, Google Page Speed Insights also recommends several ways to optimize your site speed. All you have to do is, put your page/site link to the Page Speed bar and hit analyze. Once you do that, you will see that several recommendations such as, Defer offscreen images, remove unused CSS, etc, pops up. You can also follow these to achieve a higher page speed.

All in all, mentioned above are some of the most important points that we kept in mind in order to optimize the page speed for our client and achieve a score of perfect 100 on Google Page Speed Insights. Some of these might seem difficult to implement, but, with the right technology partner, you can surely increase your website speed and improve your user experience.