featured_image

20 ways to optimize the results in Google PageSpeed Insights

author_image

By Michał Gwóźdz

9 min read

Improve your site speed with these few tips. Get a top-notch user experience and win the competition in search engines.

What is page speed and why is it worth mentioning?

To put it simply, page speed is a tool that measures the time it takes a website to load completely. Wondering why would that be so important? There are at least two major reasons that need to be mentioned here. Firstly - user experience. The shorter the amount of time the website needs to load, the better the first time user’s impression - and the lesser the chance of abandonment. A study conducted in 2017 by Google and SOASTA Research shows that the bounce rate can increase by as much as 32% if the website takes 3 seconds to load instead of 1.

Furthermore, if the bounce rate is too high, Google might deem your website unfriendly to the user and prevent it from coming up in the search results. This brings us to the second reason why page speed is so important - search engines. The faster your website loads, the higher Google is going to place it in the organic search results - so page speed has a true impact on its positioning.

 

What tools work best for improving one’s web performance?

There are many different tools for page speed analysis available on the market. One of the most popular is probably Google’s PageSpeed Insight. It’s a free tool that analyzes the loading speed of any website based on its URL address. What’s more, the results are provided both for the mobile and desktop versions of the site, with regard in their different requirements.

12651954-E200-4903-9CFC-7B28E9E02C39_4_5005_c

Google provides results on a scale of 1-100 that represent your website’s performance:

  • 0-49 pts - bad (result comes up red)
  • 50-89 pts - mediocre (result comes up orange)
  • 90-100 pts - good (result comes up green)

However, it’s not just the result that’s most important here. You need to also pay attention to the recommendations that the tool provides.

 

How to improve your results in Google PageSpeed Insights?

The website loading speed is affected by many factors. Below you will find a list of the most important ones as well as a few tips on how to quickly optimize the results.

 

1. Eliminate render-blocking resources

In order for the browser to render the website, it’s necessary to create a DOM tree as a part of HTML parsing. Because of it, whenever the browser detects a script, it has to stop and complete that process before continuing. In case of an external script, the browser must also stop to download it. The issue here is making sure that the HTML code loads firstand just then - JavaScript.

The easiest solution to avoid this problem is (in case of a small script) to inject the inline script or to use of the async and defer tags. Remember to place the script before closing the body tag.

 

2. Avoid chaining critical requests

This point refers to how the script is prioritized. Critical request chains are a collection of dependent network requests crucial to the page loading process. In general, the longer the chain length and the larger the sizes of downloaded files, the lower the site's performance will be. To reduce the negative impact of this factor on the page’s performance, minimize the number of critical resources by suspending their downloads or tagging them as asynchronous. Critical resources should be moved higher in the structure.

 

3. Keep request counts low and transfer sizes small

Another recommendation that Google PageSpeed Insights can offer is to keep the number of queries and file sizes as small as possible - this means reducing their number and size to a necessary minimum for the site to function properly. In order to meet these requirements, you must first limit the number of web fonts, reduce the number of scripts downloaded from external sources and apply a so-called code bundling. In addition, you should make sure your file compression and optimization are done correctly - I will expand on this idea in the following sections in regard to the specific file types.

 

4. Minify CSS/JavaScript

The essence of this process is to either compress the source code by removing unnecessary characters or to replace long variable names with equivalents (i.e. x, y, z). This change does not affect the functionality of the page itself, but only reduces the weight and size of the code. To minify the source code, use packaging programs such as WebPack, ParcelJS, or try online compressors and WordPress plugins, e.g. Autooptimize.

 

5. Remove unused CSS

The implementation of this idea is based on two instances: the removal of unnecessary classes if they’re not being used in the given tab or the removal of the HTML code that’s not being actively used anymore so that it doesn’t load unnecessary files. In this case, it may be helpful to use ChromeDev Tools, which may indicate the amount of unused data (coverage) in the sources tab.

 

6. Minimize the main thread work

The main thread is what remolds the code into a website and takes care of all of the user interactions. The ways of fixing web performance described in this section are directly related to the aforementioned minification and removal of unused code. Furthermore, it is advised to utilize the memory cache during the implementation of this idea.

 

7. Reduce the JavaScript execution time

In order to minimize the loading time of the JavaScript, it’s necessary to reduce its size and make sure it’s not being executed as a part of the main thread.

 

8. Reduce the server response times (TTFB)

A high-quality server is crucial for maintaining a good loading speed for your website. In order to keep that speed as high as possible, it’s good to make sure the server is in close proximity to the user. If that’s not an option, CDN (Content Delivery Network) must be implemented. Another important thing to remember is the load - the server cannot become overloaded with the number of websites running on it. Choosing the best hosting provider is also a thing one needs to take into consideration.

 

9. Keeping the proper size of images

Graphic files are crucial to the loading page time. They need to be adjusted to an appropriate size and resolution before being uploaded to the website or the srcset attribute needs to be utilized if it’s impossible to load the correct image size.

 

10. Defer offscreen images

To optimize the page loading process, you should also make sure that it loads only those images that are currently in the user’s viewport. For this purpose we use the native attribute loading=”lazy" (only for Chrome). You can also use ready-made JavaScript libraries that will load the image when it is detected in the user’s viewport.

 

11. Efficient images encoding

To achieve a high test result, Page Speed ​​requires effective image coding. It can be obtained by compressing images, maintaining the correct sizes mentioned before and by using new image formats, e.g. webp.

 

12. Using the next-gen image formats

Google encourages us to move away from inefficient image formats such as *jpg or *png and replace them with modern formats, i.e. *jpg2000 or *webp. It will positively affect the test result.

 

13. Use video formats for animated content

Similarly to the aforementioned, Google encourages the use of modern video formats. *Webm and *mp4 are considered as the most effective. Of course you should also take care of their proper compression.

 

14. Make sure the text remains visible during Webfont load

During the page loading process, text that has been styled with specific fonts will not be displayed until it is fully loaded.To reduce the waiting time and to enable an immediate text display (until the desired font files are loaded), use the font-display swap attribute.

 

15. Enable text compression

To reduce the weight of files that make up a website, use a so-called GZIP compression. It allows you to scale the load down before sending it to the user. It also has a direct effect on increasing page speed. The most effective method is to add a rule in the .htaccess file or to use WordPress plugins like w3 total cache.

 

16. Avoid multiple page redirects

Each subsequent redirection slows down the page loading speed. To prevent this, you should precisely indicate links to the selected files’ current locations. It is particularly important to avoid redirects in resources required for your Critical Rendering Path (CRP).

 

17. Serve static assets with an Efficient Cache Policy

Another way to increase page speed is to serve static files with an effective cache policy. The use of browser cache files will enable faster page loading on subsequent visits, as the user will not have to constantly download files that are already in the browser cache. The most effective method is to add rules (cache-control and expires) in the .htaccess file.

 

18. Reduce the impact of third-party code

Having too many scripts from external sites can slow down the page loading speed. To prevent this, you should limit the download (i.e. including share buttons, embedy videos, iframes). If they are already used on the site and you can’t limit their quantity, it is recommended to improve their loading process by using the async/defer and preconnect attributes or to host them on your server.

 

19. Avoid enormous network payloads

As Google recommends, the total file sizes should not exceed 1600 kB. What should you do to achieve this state of affairs?

  • apply graphic image compression
  • apply JavaScript and CSS code compression
  • use next-generation formats
  • have a valid cache policy

20. Avoid an excessive document object model (DOM) size

To avoid the above, limit the nesting of HTML tags. There should not be 1,500 nodes on one page at a time, one element should not have more than 60 nodes and the depth should not exceed 32 nests.

 

Google PageSpeed Insights - fasten your website

Google PageSpeed ​​Insights is undoubtedly a useful tool both for programmers and website owners. It enables controlover an important measure of web performance, which is the page loading speed. Most importantly, it offers recommendations dedicated to our website, that can significantly translate into a faster website. The consequence will be a reduction in bounce rate and measurable economic growth.

Next article

Taking care of Wordpress security in a few steps

By Bartosz Nowak

9 min read