A full guide to page load speed and how to improve it

When it comes to website speed, every second counts. In this post, we will go through a full guide on website speed, from measuring it, to tips on how to speed up site page load time.

Contents:
1. Why technical SEO and page load speed matter
2. First step: Check website speed
     2.1 PageSpeed Insights by Google explained
3. How to speed up page load time
    3.1  Non-technical things you can do to improve website speed (file sizes, images, fonts etc.)
    3.2 Technical things you can do to improve website speed (minification, JavaScript files etc.)
4. Other page load speed factors
 

PageSpeed Insights from Google is a tool that has been launched mostly with experienced developers in mind. So, apart from the speed score it calculates, the analysis of the causes may be harder to understand.

Let’s break it down a little bit and make sense of the main parts.

First of all, the tool checks web performance in two different tabs, one for mobile and one for desktop. Your results on one may be very different from outcomes on the other. But the scoring scale is the same. 

Based on six different site speed criteria, it generates a score from 0 to 100. Scores between 0-49 are in the “red” zone. 50-89 is an average result. 90-100 is “green”, giving the website a perfect evaluation in terms of page load speed. 

Please note that different pages on the same website can have very different scores. Also, even the same page can vary a lot during the day, due to several factors that you may not be able to fully control.

Now, beyond the score, there is some more detailed information below. 

Field Data: This section hosts some important metrics that break down exactly how much time it takes for the first elements, as well as the largest elements, to load. It also measures the time of browser response and ability for interaction. It does this based on the average load times from the previous 28 days. 

Below this, the Lab Data section has some similar metrics, but they are based on test visits performed on the spot, after you submit the URL for testing. If your website speed has been improving lately, then you could expect the results under Lab Data to be better than the ones under Field Data. For all the metrics in this section, you should strive to stay in the green areas, or at least close to them.

Probably the most important metrics (and easiest to understand) are the FCP and the Time to Interactive. 

First Contentful Paint (FCP) is the time it takes for your page to load any content (text, image or any other element that the user can “consume”). If this is below 3s, it should be fine. The best pages have an FCP of under 1s.

Time to Interactive is the time from the moment the site starts to load to when users can interact with it. Hopefully, this is under 3s as well.

If these metrics don’t look very good, then you should scroll further down to see why. There is a Diagnostics section and Passed Audits below it. The first one highlights measures that could improve your performance. Look for ones with a red triangle near them. 

Some of these are more technical. Examples:

• Eliminate render-blocking resources: This basically means that there are processes being loaded before your FCP. This could include apps or plugins that use JavaScript. The browser attempts to load these processes before rendering actual content. This can severely slow down the website. Read further down to learn what to do about it.
• Minify CSS or Minify Javascript: The way your website looks and acts is dictated by these files. In the CSS files, details like font sizes, colors, positioning etc. are established. CSS and JS files look like text files with a few characters per line. This leaves many white spaces in these files. White spaces lead to larger files, which take longer to load. Believe it or not, you could get a very small speed boost just by deleting these white spaces. And this is what “minify” means. In the next section, we will tell you how to do it.
• Minimize third-party usage: Sometimes, your template or the apps or plugins you installed may load external resources. There may be providers of services for which you have placed a script in your website header (analytics tools are no exception). Try to limit the number of third-party providers to ones you absolutely need. Otherwise, it can impact website speed. 

Other issues affecting page speed are less technical, and any website owner, regardless of skill, can easily improve them. We cover them next.
 

3.1  Non-technical things you can do to improve website speed (file sizes, images, fonts etc.)

These are the things you can tick off, regardless of the type of site you have and regardless of your technical skills.

3.1.1 Reduce the size of your images: The larger the webpage, the more time it needs to load. And a big part of that has to do with images. Keep image sizes as low as possible. Smaller images load faster. Although, in some cases you do need larger images, don’t waste precious KB and seconds by using unnecessarily large images. In this example, this picture is displayed at a maximum width of 400-500 px on my website, even on wider screens. This is simply the space we have for it in our design. 

Then you don’t need an image that is natively 1200px wide, which is larger, slower to load and needs to be resized by the browser every time the page loads. One with a width half the size would look exactly the same in this situation. So, for most images, you can reduce their size and you will gain extra speed. But be careful on cover images and bigger images in your design. Don’t resize them if they will be displayed in a larger size. This will decrease quality.

3.1.2 Use new image formats that are more efficient: .webp is one example of an image file format that was specifically developed to get the same picture quality with a smaller file size on websites. Try converting your images to this format and gain extra load speed.

3.1.3 Limit the number of fonts you use on a page: Each font loads an external resource which slows down the website. Using fewer fonts will also make things more visually coherent. Yet, by comparison, this will save less loading time than other measures.

3.1.4 Use videos and special effects or animations only below the fold: Above the fold is the first section of the page that your visitors see. It’s also the first one to load, so you need to keep it clean. If you have a large video right on top of the page, it will lead to slower loading times and less user satisfaction. However, if it’s further down, then there is time for it to load by the time users start to scroll and general speed score will not be affected.
 

3.1.5 Cache content: Caching is a process that uses high-speed data storage layers to access the content of a page quicker. Your website content can be saved as static content in a cache. This will also mean, depending on how the cache is set, that users may see the cached version of your page, instead of the live one. If you often make updates and edits to a page, then overusing cache is risky, as visitors may see an outdated version of the page, loaded from the cache. But especially for pages that don’t change all that often, cache is a great speed booster. The cached content won’t stay the same forever. It can, in any case, be reset or refreshed during set time frames.

Caching is not difficult to perform, depending on the type of platform your website is built on. 

How to cache a Wix website: 

To enable caching:

1. Go to your Editor.
2. Click Menus & Pages. 
3. Hover over the page you want to cache and click the Show More icon.
4. Click Settings.
5. Click Advanced Settings.
6. Go to “manually control caching for this page” and change the toggle to enable it.
7. You should now see: Enabled - the page will be cached.
8. Then you can select how often you want to reset the cache for the page: every hour, every 24 hours etc. 

How to cache a WordPress website:

Go to the Plugins section in your dashboard and look for a cache plugin like WP Fastest Cache. Install it and then go to Settings. In the window, make sure cache is enabled. 

You will also get more options to speed up your website with the same plugin, like file minification and the possibility to combine CSS, as well as to combine JS files. We'll discuss these in the next section. 

If you have another type of website, there are usually apps and plugins developed to help you out with this. For advanced users and developers, there are open source caching tools available online.

3.1.6 In general, keep your website clean: 
Do not keep unnecessary files, elements, or apps if you are not actively making use of them. Keep things simple and don’t overcomplicate the structure of your website, in order to make it load faster.