SEO guide to page speed

Google has historically used page speed as a ranking factor. Beginning with the initial announcement in 2010, and then reinforcing it with a new update in 2018, and finally sealing the deal with the introduction of Core Web Vitals in 2020. We’ll look at what page speed is today, how to measure it, and, most importantly, how to improve your website’s page speed scores in this article.

What is the definition of page speed?

Google has battled with gauging page speed for a long time. What are the most appropriate metrics? Do you use data from the field or from the lab? Is it better to time the entire page or just the top portion? There are dozens of criteria that go into page performance, and determining which ones are truly important to the user has been a long process.

Finally, Google has decided on three metrics for page speed that are now considered the most important: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS). These metrics, collectively known as Core Web Vitals, are intended to quantify the perceived page speed rather than the actual page speed.

Largest Contentful Paint

The time it takes for the viewport’s largest element to fully load is measured in Largest Contentful Paint. Because the largest element is often an image, image optimisation is the most important factor in this metric. Furthermore, LCP is reliant on server response timings, render-blocking code, and client-side rendering.

First Input Delay

The time between when an interactive element is painted and when it becomes functional is known as the first input delay. Let’s say a button is painted on the page, and you click it, but it isn’t responsive yet. FID can be made faster by splitting the code and using less JavaScript.

Cumulative Layout Shift

When a page loads, Cumulative Layout Shift determines whether the items on the page move around. A layout shift occurs when a page appears to be ready to use until a new image appears at the top and the rest of the content is pushed downward. CLS relies on correctly defined size attributes and resources loading in a specific order, from top to bottom.

How do you assess the speed of your website’s pages?

Google provides a number of tools that include Core Web Vitals as part of their page audit.

One issue is that some of the tools use lab data instead of field data, whereas Google only uses field data to rank your pages. These instruments can be distinguished because they use the lab-measured TBT (Total Blocking Time) metric instead of the field-only FID metre.

Another issue is that most of the tools can only evaluate one page at a time, which is ineffective for optimising an entire website.

The best Google tool to utilise is probably Google Search Console. You may access the report for all of your pages at once by going to Experience > Core Web Vitals.

After that, you can follow the drill-down process to find specific issues within each metric, then the pages affected by the issue, and finally the PageSpeed Insights report for a specific page after a few clicks. Although the top-level report is delivered in bulk, determining which pages are impacted by which issues might be time-consuming.

How can you make your website’s pages load faster?

Now that you’ve compiled a list of pages that are affected, it’s time to work on increasing page speed. Some of the most common optimisation opportunities are listed here, along with some tips on how to take use of them.

1. Set image dimensions
Let’s get this party started with something easy. It may take some time for the browser to properly size your images and videos if you don’t include image dimensions in your code. This means that your page’s content will move around, lowering your CLS score. Always set the width and height properties for your images to avoid this problem.

2. Make photos available in next-generation formats.
Image formats aren’t all created equal. In comparison to AVIF, JPEG 2000, JPEG XR, and WebP, our trusted JPEG and PNG codecs now have significantly inferior compression and quality attributes. WebP is perhaps the most important of the formats listed. It allows for transparency and animation, as well as lossy and lossless compression. Furthermore, WebP files are often 25% to 35% lighter than PNGs and JPEGs of comparable quality.  With an image optimisation plugin like Imagify, you may quickly produce a WebP copy of your photos if your website is built on WordPress. If your website isn’t built on a CMS platform or you don’t want to install a lot of plugins, you can use online converters or graphics editors to convert your images.

3. Image compression
Compressing your photos, whether you employ next-generation image formats or not, is still a viable technique to reduce overall page size. If your website is built on WordPress, you can use image compression plugins like WP Smush to compress your images in bulk. If you don’t want to install too many plugins and risk slowing down your website, you can alternatively use online compressors.

4. Postpone off-screen images
Offscreen images are those that display below the fold and aren’t visible until the user scrolls past the first screen. Everything below the fold should be delayed until above-the-fold items are fully loaded, which will be a frequent topic throughout the rest of the article. The above-the-fold section is where Google measures your page performance, therefore it’s where you should focus the majority of your optimisation efforts.

5. Defer any CSS that isn’t in use.
CSS that isn’t used can cause a browser’s render tree to take longer to build. The problem is that a browser must scan the complete DOM tree to determine which CSS rules apply to each node. As a result, the more unused CSS there is, the longer it will take a browser to compute the styles for each node. The purpose is to find unneeded or non-critical CSS and either eliminate them or adjust the order in which they load.

6. Compress JS and CSS
Unnecessary comments, whitespace, line breaks, and fragments of code are frequently seen in JS and CSS files. Although the average minification is substantially smaller, removing them can make your files up to 50% lighter. If you have a small website, you can use online minifiers such as CSS Minifier, JavaScript Minifier, and HTML Compressor to compress the code. Alternatively, if your website is built on a content management system (CMS), such as WordPress, you can use plugins to automate the process.

7. Identify and extract important CSS
CSS is a render-blocking resource by default. The browser will not render your page until it has downloaded and parsed CSS files, which can take a long time. To remedy this, take only the styles that are required for your page’s above-the-fold region and put them to the of your HTML content. Asynchronous loading is possible for the rest of your CSS files.

8. Improve the response time of the server
The most irritating aspect about server response delays is that they can be caused by a variety of factors. Slow routing, slow application logic, resource CPU starvation, slow database queries, memory starvation, slow frameworks, and so on are examples. Switching to better hosting, which in many cases involves moving from shared to managed hosting, is a simple non-dev solution to these difficulties. Managed hosting typically includes CDN networks and other content delivery techniques that improve page speed.

9. Async/defer third-party JS
Third-party resources, such as social sharing buttons and video player embeds, are notoriously resource-intensive. Furthermore, whenever the browser finds JS, it will delay the execution of HTML until the JS is dealt with. If any of your third-party resources aren’t required for the appearance or functionality of the above-the-fold, you should remove them from the critical rendering path. You can use either the async or defer attributes to load third-party resources more quickly. The async property is gentler; it allows HTML and JS to be downloaded at the same time, but HTML will still be paused while JS is executed. The defer attribute is harder — it will not pause HTML to execute JS, which will only be executed at the very end.

10. Connect to third-party resources ahead of time
Establishing connections, especially secure ones, takes a long time in general. The problem is that it necessitates DNS lookups, SSL handshakes, secret key exchange, and a few roundtrips to the final server handling the user’s request. As a result, you can pre-connect to the essential origins ahead of time to save time.

11. Break up big tasks into smaller chunks
Your page may appear unresponsive to the user if there is a chunk of JavaScript that takes longer than 50ms to execute. To fix this problem, look for large jobs, divide them up into smaller chunks, and load them asynchronously. Short responsiveness windows will be introduced into your website loading process this way.

12. Preload key resources ahead of time
Browsers are in charge of deciding which resources to load first. As a result, they frequently try to load the most important resources first, such as CSS, before scripts and pictures. Regrettably, this isn’t always the greatest option.

13. Enable browser caching
Without browser cache, every time you visit the same page, it is completely reloaded. With browser caching, some page elements are stored in the browser memory, so only a part of the page has to be loaded from the server. On subsequent visits, the page loads substantially faster, and your total page speed scores improve. The goal is usually to cache as many page resources as possible for as long as possible while also ensuring that modified resources are revalidated for caching. All of these parameters can be controlled using specific HTTP headers that provide caching instructions.

14. Decrease the size of the DOM
Speed, runtime, and memory performance can all be significantly impacted by a huge DOM tree with complicated style rules. A DOM tree with less than 1500 nodes total, a maximum depth of 32 nodes, and no parent node with more than 60 child nodes is the best practise. It’s a good idea to get rid of any DOM nodes you don’t use anymore. To that end, consider removing nodes from the loaded document that aren’t now visible and attempting to generate them only after a user scrolls down a page or presses a button.

15. Don’t use too many redirects.
One of the most important things you can do to improve the speed of your site is to remove all unwanted redirects. Every additional redirect slows page rendering and increases the number of HTTP request-response roundtrips. The recommended strategy is to avoid using redirects at all costs. If you absolutely must use one, though, it’s critical to select the correct redirect type. For permanent redirection, it’s recommended to utilise a 301 redirect. Temporary 302 redirects, on the other hand, are the greatest alternative if you want to redirect customers to some short-term promotional sites or device-specific URLs.

Conclusion

The issues listed above are not all of those that can effect page performance; rather, they are the most frequent and have the greatest potential for improvement. Make sure your optimisation strategies are tailored to the problems identified in your page speed analysis. Keep in mind that issues that affect a large number of pages on your website can often be fixed in bulk by making site-wide modifications.