When it comes to page load speed, every second counts. In fact, Google research shows that when loading times increase from one to three seconds, the probability of a bounce (the visitor leaving right away) increases by 32 percent. Hence, it is important to optimize your site speed in order to enhance customer experience and lower your bounce rates. A faster page speed would also impact your search engine rankings. 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’s website consisted of around 150k products and over 300k pages. Both teams worked meticulously to figure out the target areas, key requirements, and created a step-by-step roadmap to work efficiently. Our experts implemented each step with precision to take the page speed score of the website to 100.

In this article, we will be discussing some key steps that the Growisto 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 or more pages, then full-page caching 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.
   .

3. 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. Having a CDN with a good network in the region where your customers are, is always better. Also, CDN should help with image handling, as mentioned in the points below, which is also very helpful. Moreover, you can also implement full-page caching in the CDN itself, so your page becomes faster.
   .
4. 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. This will help drastically reduce CLS.
   .

5. Implement on-the-fly resizing and optimal format of the images: Another important aspect to keep in mind is the 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.

   Along with resizing, the images should be delivered in the optimal format, such as WebP or other latest formats based on browser support.

   Both of these can be done easily through CDN, so if your CDN supports them, we should configure them in CDN only.
   .

6. 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.
   .
7. 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.

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 in the page speed bar and hit analyze. Once you do that, you will see several recommendations such as, Defer offscreen images, remove unused CSS, etc, pop up. You can also follow these steps to achieve a higher page speed.

Moreover, 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 (as shown in the picture below). Once all your metrics are green, you have achieved a good page speed for your website.

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.

…

About the author: Growisto is a Digital Growth company that specializes in technology and marketing services. Based out of US, and India they have worked with over 300+ brands across a gamut of sectors, including Puma, Tata Cliq, and Victorinox. Their experienced team of 125+ members and technology-first approach has helped them provide high-impact solutions to their clients. They have expertise in custom product development, website development, and digital marketing.