Login
Sign Up
Top 7 Speed Report Issues Resolved | 2020 Tips for a Faster Website
The most common issues with your website speed explained with easy fixes.
Top 7 Speed Report Issues Resolved | 2020 Tips for a Faster Website

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:

  1. Eliminate render-blocking resources 
  2. Unoptimized Images
  3. Use a Content Delivery Network (CDN)
  4. Make fewer HTTP requests
  5. Enable Compression
  6. Leverage Browser Caching
  7. Specify a Cache Validator

 

 

Eliminate render-blocking resources

 

Pagespeed Error - Eliminate render-blocking resources

 

To easily understand what render-blocking resources are, we will need to firstly establish how browsers render your website’s pages. Basically, when a user lands on a page, their browser starts to read the code from the top, going down. And as it reads, it comes across JavaScript and CSS files that need to be downloaded and processed. Whenever such files come along, the browser has to stop reading the code while parsing the resources. This wait time could be used on something much more beneficial – like you know, rendering the part of you page that is immediately visible to users (above-the-fold-content). 

 

Let’s consider how to deal with CSS and JavaScript files separately.

 

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.

 

 

Critical CSS example

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.

 

 

 Defer parsing of JavaScript

 

If you want your website to load faster, here’s another advice: defer parsing of JavaScript. Much like in the case of render-blocking CSS, before a visitor’s browser can load a page from your website, it should parse the contents of all script tags. This leads to additional time for loading the website. Therefore, JavaScript needs to be minimized to the amount needed for rendering the page. At the same time, you should defer parsing of unneeded JavaScript, until it has to be executed.

 

Defer Parsing of JavaScript

 

If you are not really sure how to make this happen on your own, you can take a breath and relax. NitroPack has a solution to this issue as well. Our Defer JavaScript loading functionality uses innovative implementation of the technology for blazing optimization results.

 

 

Unoptimized Images

 

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.

 

LAZY LOAD

 

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.

 

 

Use a Content Delivery Network

 

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.

 

 

Make fewer HTTP requests

 

As we discussed already, whenever a visitor lands on your page, their browser makes individual request for all files needed to load it - usually HTML, CSS and JavaScript resources. These are called HTTP requests where HTTP stands for Hypertext Transfer Protocol. And the more files you need to render the page, the slower it will actually load. Hence, decreasing the number of HTTP requests could be accomplished by reducing the number of components on a page.

 

HTTP requests

 

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.

 

 

Minify HTML, JavaScript and CSS

 

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.

 

Minifying (or compacting) the HTML, CSS and JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time on websites. However, it is also time-consuming and challenging task to take up and do manually especially if you do not feel comfortable working with code (although there are a number of free tools available if you are up to it).

 

If you prefer to get the benefits of minification without lifting a finer, NitroPack has you back. We offer powerful minification of HTML, CSS and JavaScript for optimal results, based on AST trees (Abstract syntax trees). These AST trees are the representation of the structure of source code in programming language. Again, this process only removes unnecessary data, but without affecting how the resource is being processed by the browser.

 

 

Combine CSS and JavaScript

 

The process of concatenation, or if you prefer its more human synonym combining, actually does just what it seems – combines files together. So if your page needs 3 JavaScript files and another 3 CSS files, a browser will need to do a total of 6 requests to render the page. If, however, you use concatenation, the browser needs to only do 2 requests – one for the CSS and one for the JavaScript file.

 

CSS and JS combination

 

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.

 

Still, in case you are not using HTTP/2, you need not to undertake the cumbersome process of combining your static resource files together. NitroPack can help you combine the CSS and JavaScript files together to make sure you are optimised for best speed.

 

 

Enable compression

 

Yet another common speed related issue related to compressing files, however this time we are not talking about images. G-zip compression has to do with zipping the HTML, CSS and JavaScript files of your website. Enabling G-zip compression allows the server to send the files in much smaller packets that take less time to visualise.

 

G-Zip compression

 

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.

 

Leverage Browser Cache

 

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.

 

 

Specify a cache validator

 

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.

 

 

Icons made by Freepik, Pixel perfectPayungkead,  prettyconsSmashicons from www.flaticon.com.    

Stay tuned

Subscribe to our newsletter and stay updated!