7 steps we took to achieve 100 Google page speed scores for a client

From time to time we have guest posts on the blog. Today’s post is from Growisto.com

When it comes to page load speed, every second counts. In fact, Google research shows that when the load time increases from one to three seconds, the likelihood of a bounce (the visitor immediately leaves) increases by 32 percent. Therefore, it is important to optimize your site speed to improve customer experience and reduce your bounce rates. A faster page speed will also affect your search engine ranking. One of the most recommended ways to test and optimize your page speed is to Google Page Speed ​​Insights.

For one of our clients, a leading manufacturer of security signs and labels in the US, we achieved a perfect score of 100 on Google Page Speed ​​Insights. The client’s website consisted of about 150 thousand products and more than 300 thousand pages. Both teams worked meticulously to identify target areas, key requirements, and created a step-by-step roadmap to work effectively. Our experts have precisely implemented each step to achieve a website page speed score of 100.

In this article, we’ll discuss some of the key steps that the Growisto team took to achieve a perfect score of 100:

1. Migration to headless trade. We moved the traditional monolithic website architecture to a headless solution using Magento backend and ReactJS frontend. Adopting a headless approach gave us great flexibility to improve customer experience, improve page speed score parameters, and increase personalization. The migration to a headless system itself helped us to increase our page speed score above 85.
   .
2. Implement full page cachingFull page caching improves response time and reduces server load. Without caching, each page may require executing blocks of code and retrieving information from the database. However, if full page caching is enabled, the entire generated page can be read directly from the cache. For most sites, it would be a significant performance boost to enable full-page caching.

   However, if your site has ten thousand or more pages, caching the entire page becomes very difficult and generally impossible. In those cases, you should have a fallback caching mechanism where you just cache the data. In such cases, less visited pages will not have full page caching, but their data will be saved.

   Now that you’re done caching, there may be some changes you want to make to the data. To make this process simpler, you should automate your caching mechanism. Especially 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. Create a content delivery network (CDN). A CDN simply collects all your website data like images, CSS, JS and stores it on their servers spread all over the world. So when a user makes a request, it can deliver it from the closest server to the user. Having a CDN with a good network in the region where your customers are located is always better. Also, a CDN should help with image processing as mentioned in the points below, which is also very useful. Moreover, you can also implement full page caching on the CDN itself, so your page becomes faster.
   .
4. Add placeholders and set exact dimensions for all images. Images make up the majority of page elements, so using heavy images increases page weight and results in slow loading speeds. To optimize your images, you need to make sure they are sized correctly for your page and coded efficiently.

   Additionally, you should set clear dimensions for all your images. If you set these dimensions in advance, the other content on your page will not be affected, and the image will have enough space to load while the user reads the rest of the data. This will help reduce the CLS dramatically.
   .

5. Perform image resizing and optimal formatting. Another important thing to keep in mind is the automatic resizing and compression of images. When an image is larger than the standard aspect ratio, it must be able to resize itself and fit in the space provided. For example, if the aspect ratio is set to 400*300, and the original image has a size of 400*400. It should then be able to automatically resize and render a 300*300 frontend to maintain the actual aspect ratio of the image. This way the structure of the entire page will remain unchanged.

   Along with resizing, images should be rendered in an optimal format, such as WebP or other recent formats based on browser support.

   Both of these can be easily done with a CDN, so if your CDN supports them, we only need to configure them on the CDN.
   .

6. Add lazy loading for below content. This means that instead of forcing the browser to load all the content on the page before displaying the top content, it will only load what is immediately visible. Less loading before the page becomes visible means better performance, which is why Google recommends this method.
   .
7. Optimize SVG icons used in headers. Merge smaller icons to create a larger file to get a decent size. It allows you to create a whole file for icons instead of saving and loading them individually. This will reduce multiple network calls and thus save page load time.

Other suggestions from GoogleIn addition to the ways listed above, Google Page Speed ​​Insights also recommends several ways to optimize your site speed. You just need to put your page/website link in the page speed bar and click analyze. After doing this, you will see several suggestions such as Defer off-screen images, remove unused CSS, etc. will appear. You can also follow these steps to achieve higher page speed.

Furthermore, Google Page Speed ​​Insights takes into account several metrics to analyze a website’s page speed. To achieve optimal page speed, you need to move all your metrics from the red to the green area (as shown in the image below). When all your metrics are green, you’ve achieved good page speed for your site.

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

…

About the writer. Grovisto is a digital growth company specializing in technology and marketing services. Based out of the US and India, they have worked with over 300+ brands across a range of industries including Puma, Tata Cliq and Victorinox. Their experienced team of 125+ members and technology-first approach has helped them deliver high-impact solutions to their clients. They have experience in custom product development, website and digital marketing.