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.
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
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.
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.
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
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
- 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 control over 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.