Top 7 Speed Report Issues Resolved | 2020 Tips for a Faster Website
No matter which is your preferred page speed testing tool - GTMetrix, PageSpeed Insights, Pingdom or Yslow, we can all agree that testing your website speed is the easy part. The much more difficult task is to understand and be able to act upon the presented issues and improvement recommendations. If you are not the technical type then like most marketers, publishers and e-commerce owners, the speed issues outlined in the final report sound super intricate (almost like witchcraft) and often seem too intimidating to even attempt to resolve yourself.
This article is aimed to help you understand what some of the most common page speed issues actually mean and outline ways to courageously face and resolve them.
Here they come:
- Eliminate render-blocking resources
- Unoptimized Images
- Use a Content Delivery Network (CDN)
- Make fewer HTTP requests
- Enable Compression
- Leverage Browser Caching
- Specify a Cache Validator
Eliminate render-blocking resources
Eliminate render-blocking CSS files
Render-blocking CSS refers to any external CSS that is needed to render the above-the-fold content. It is called render-blocking because, as we discussed already, it deters the browser from rendering the page until it is fully loaded. In order to avoid your visitors waiting impatiently for your page to appear on their screen, you should start with parsing the above-the-fold CSS first and asynchronously load the rest. The minimum CSS needed for the top of the webpage to load and render is called critical CSS.
This speed problem has a relatively easy solution you could read details about in our article on Critical CSS. It is easy because everything needed to do in order to solve it is to create two different sets of CSS files. The first file will be your Critical CSS that has to be delivered inline with the HTML. The second file with the non-critical CSS should be loaded asynchronously. Yet, if you want to do it manually, you are faced with a time-consuming process, and of course you actually have to understand CSS to get it right.
Visual source here.
So what happens if you are time-strained or you are not familiar with coding? You still needn’t worry about Render-blocking CSS. There are tools to help you filter out your Critical CSS. For instance, NitroPack has a functionality which extracts the base CSS needed to load the above-the-fold content of the webpage. And ‘Voila!’, the webpage no longer loads slowly, and the CSS files are not render-blocking anymore.
Striking visuals are an absolute must to keep visitors engaged on your website, yet they are running in ever bigger resolutions that require significant bandwidth to fully load. There are different aspects of optimizing website images, but the most critical one is size.
High resolution images are large and also increase the size of your webpage, thus significantly slowing down your website. Hence, you need to reduce the size of the visuals to ensure they load on time. Yet, it is critically important to keep them in high quality in order to make the website look appealing to the user. That’s exactly why you need the so-called lossless compression – an approach to image optimisation that strips unnecessary data without any visible change in image quality.
Further, like any other resources that are not needed to load the above-the-fold content, it is worthwhile to defer the loading of off-screen images. This technique is called Lazy Load and is crucially important in image optimisation.
Luckily, you do not need to take care of image compression and asynchronous load manually or look for yet another solution to this speed issue. NitroPack comes with powerful image optimisation suite to cover all your image optimisation needs that features not only image compression and advanced Lazy Load that detects background images defined in the CSS, but also adaptive image sizing and next generation image format conversion.
The fact that your users are geographically far away from the main server can make your website load slower for them. Therefore, it is a good idea to use a Content Delivery Network (CDN) to deploy your content across multiple servers across the globe, which will make your website load faster. In this way, you will give (almost) equally fast loading time to your users around the world.
If you want to learn more about the issue of latency and how impactful it is, you could have a look at our article on CDN importance.
You might wonder Do I honestly have to look for yet another solution to this speed issue? If so, some good new are coming your way - NitroPack has a pre-configured CDN, which will save you time, because you don’t have to find, configure and integrate any new technology manually. We use Amazon’s CloudFront CDN which serves resources from 216 global edge locations, making sure that your content reaches users throughout the world lightning fast.
One of the solutions to this issue is minifying and combining static resource files. However, to be truly effective in decreasing the number of HTTP requests, you would definitely need to improve on all issues mentioned in this article.
To minify files is to optimise (reduce) their size. With minification the size of the files is reduced by removing all unnecessary characters, spaces, comments and line breaks. This may seem messy to any people reading the code, but it actually helps browsers read and serve these files faster.
This technique is much less impactful on overall page speed if HTTP/2 is used, since it allows for multiple requests to take place at the same time.
To leverage the ability of modern browsers to read compressed static resources and significantly speed up your website you could contact your hosting provider to enable G-zip compression. Of course, you could always rely on NitroPack to enable this compression automatically for you without any further hassle.
Leverage Browser caching
The Leverage Browser caching speed issue actually closely relates to minimising HTTP requests diagnostic. As we already established, every time a visitor lands on your page, their browser downloads all static resources needed to display this page properly. This process slows down your website significantly since there are many requests going back and forth your server and the visitor’s browser. Yet another way to speed up the loading time of the page is to implement browser caching. This means that frequently accessed but rarely altered resources will be stored on the visitor’s device. For example, the logo of the website could be cached, because it is unlikely to change very often.
Browser caching is enabled from the server side and in case you see a red flag on this metric in a speed test report, you will need to take care of it. You will firstly need to make sure the files listed in the report are actually hosted on your domain. If so, you will actually be able to get this fixed yourself. And in case you do not want to go through the lengthy processes of enabling browser caching NitroPack is here to help. What is more, NitroPack offers caching per device, i.e. it creates cached versions for desktop, mobile and tablet devices.
Another common recommendation on page speed reports is to specify a cache validator. If you see this warning, you are missing HTTP caching headers that need to be included on every origin server response to validate and set the length of the cache. Naturally, if these headers are missing, a new request for the resources will have to be made every time which as we already discussed will slow down your website.
To get rid of this issue and speed up your website, you could utilize either of the 4 four main types caching headers in a way that makes the most sense for your website. If you decide to use Validation headers, all static resources should have either a Last-Modified header (determines, if a resource received or stored is the same) or ETag (ensuring that the data stored in a web cache is up-to-date) header. Alternatively, you could also apply headers that Determine Cache Length, by utilising either Cache-Control (the most common directives used are max-age, public or private cache response) or Expires header (uses an actual date of expiry – unlike Cache-Control that sets a time span till expiration).
Setting those headers on the server side would allow the browser to take advantage of all the benefits of caching. If you are not keen on doing these yourself, you needn’t worry. NitroPack solves this issue flawlessly by using cache invalidation. This feature would mark the cached content as invalid and would start to update the new cache files in the background as soon as you publish an update on your page. This results in all users being served optimised resources all the time. If you want to learn more on the wonders of cache invalidation, you can check out our detailed article on Cache Invalidation.
Let’s Wrap It Up
As we have seen above Speed Optimisation is often no walk in the park – it is very technical, has about a hundred terms to remember and might feel like a full-time job if you want to do it manually. Luckily, there now tools available to help you deal with speed test issues. Yet, if you are looking for a different solution for every speed-related issue, you are faced with increased monetary costs and ever more complex tech set-up that could come crumbling down in a hot mess. That’s where NitroPack comes in – we got you fully covered and equipped to fight those red flags away!
If you are still seeing errors that you do not understand, we would love to hear them in the comments and help you figure out what you need to do!
Get the best scores you have seen for your website – try NitroPack's Free Plan.