Page Speed SEO: 23 Ways to Speed Up Your Website

Google Page Speed is an incredibly useful tool for SEOs and site owners of all types.

In this post, you’ll find out (almost) EVERYTHING you need to know about page speed and SEO, including how to speed up your website.

We’ll cover how Google has evolved page speed and what that means moving forward.

Let’s get started!

How important is page load time in SEO?

Search Engine Optimization (SEO) is about performing actions that optimize for search engines. In turn, those search engines aim to optimize for relevancy of searchers — a.k.a. people.

I think you get the point, page speed is important.

So a crucial part of SEO is being aware of what people like and expect. And with few exceptions, people don’t like slow sites.

Looking forward, there are fewer and fewer reasons to tolerate a slow site. And Google themselves continuously put on pressure to have page speed affect rankings.

Increasing site speed has been shown to increase SERP rankings and other metrics like conversion rates.

Source: https://neilpatel.com/wp-content/uploads/2016/12/image13.png

Source: https://cxl.com/blog/testing-tools-site-speed/

How much does page speed affect SEO?

Over a decade ago, Google declared that site speed is a ranking signal and introduced Google PageSpeed to help with website performance optimizations.

Most notably was the introduction of PageSpeed Insights.

What is PageSpeed Insights?

PageSpeed Insights (PSI) is a tool from Google used for auditing the performance of a page for mobile and desktop devices and suggesting how it might be improved.

What is Lighthouse?

Source: https://developers.google.com/web/tools/lighthouse

Lighthouse is an open-source, automated tool for auditing performance, accessibility, progressive web apps, SEO, etc.

PSI uses Lighthouse to analyze a given URL, generating a performance score that estimates the page’s performance on different metrics, including First Contentful Paint, Largest Contentful Paint, Speed Index, Cumulative Layout Shift, Time to Interactive, and Total Blocking Time.

In May 2020, Google announced Web Vitals to provide unified guidance for quality signals essential to delivering a great user experience on the web.

What are Core Web Vitals?

Source: https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html

Core Web Vitals are a standard set of signals critical to all web experiences.

The 2020 Core Web Vitals’ foundation is loading experience, interactivity, and visual stability of page content.

These are represented with the following metrics: Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.

By the end of May 2020, Google provided an early look at an upcoming Search ranking change—Core Web Vitals will become ranking factors.

Google stated that Core Web Vitals are a way of evaluating page experience for a better web and “looking ahead towards 2022, we are investing in building better understanding and ability to measure page speed, and other critical user experience characteristics.”

And Google said that over the next few months they would be updating Lighthouse, Chrome DevTools, PageSpeed Insights, Search Console’s Speed Report, and other tools for Core Web Vitals.

Page Speed is a big deal.

How can I increase Google Page Speed?

When looking to increase page speed, technical problems are some of the most common issues you’ll face. Technical SEO tools are remarkable for helping you find and fix a wide array of technical issues.

Because there’s a vast array of problems your site may be having, tools like Google PageSpeed Insights and other site audit tools give you better website analysis to optimize more effectively.

Let’s check out these tactics in more detail:

1. Eliminate Render-Blocking Resources

JavaScript and CSS scripts often prevent your page from loading quickly.

Every user has to download and process these files before they can see the rest of the page, so having a lot of them, or poorly optimized files, can negatively impact your site’s speed.

Google recommends two solutions:

• Inline JavaScript or CSS if you don’t have very much. This means including your JavaScript and CSS into your HTML files. Notably, WordPress sites often have enough JavaScript that this method likely slows the page down.
• Defer your JavaScript. Adding the defer HTML attribute downloads your JavaScript file during HTML parsing, only executes it after the parsing is complete., and executes scripts in the order they’re included on the page.

2. Avoid Chaining Critical Requests

This audit message refers to how browsers render content through the Critical Rendering Path (CRP).

Files like JavaScript and CSS have to be fully loaded before anything else on your website becomes viewable. So to improve page speed, you need to minimize the number of dependent requests and their sizes.

A few ways to avoid chaining critical requests are covered by other recommendations here, including:

• Eliminating render-blocking resources
• Deferring offscreen images
• Minifying CSS and JavaScript

3. Keep Request Counts Low, and Transfer Sizes Small

Every request slows your page speed. So, it makes sense to recommend that you minimize the number of required requests to decrease the time it takes to load.

There’s not any specific request number or maximum request size to follow. Instead, Google recommends setting a performance budget with goals related to things like:

• Maximum image sizes
• The number of web fonts used
• The number of external resources you call
• The size of scripts and frameworks

4. Minify CSS

CSS files are always larger than they need to be.

To make them easier to work on and develop they might include unnecessary characters like carriage returns and spaces that are wasted space that doesn’t help computers to read them any faster.

Minifying CSS is the process of condensing CSS files by removing those unnecessary characters like spaces, and duplications. This can greatly reduce your CSS file size, and the increase in speed gets bigger with the size of your CSS file.

5. Minify JavaScript

The minification idea applies to JavaScript files as well. Remove unnecessary characters for the computer’s understanding and boost your page speed.

6. Remove Unused CSS

Any styles included in your CSS is data that will have to be loaded before your page is visible to users. If that data isn’t actually being used, you’re wasting resources and slugging your performance. That’s why it’s often recommended to remove any unused CSS.

Google Chrome Dev Tools has a coverage tab that will show you what CSS a page actually uses.

1. Press Command+Shift+P (Mac) or Control+Shift+P (Windows, Linux, Chrome OS) while DevTools is in focus to open the Command Menu.
2. Start typing coverage and select Show Coverage. The Coverage tab appears.

Source: https://developers.google.com/web/tools/chrome-devtools/css/reference#coverage

1. Click the reload button to reload and start capturing coverage. The page reloads and the Coverage tab provides an overview of how much CSS (and JavaScript) is used from each file that the browser loads.
2. Click a CSS file to see a line-by-line breakdown of what CSS it uses.

Source: https://developers.google.com/web/tools/chrome-devtools/css/reference#coverage

7. Minimize Main-Thread Work

Main-thread is responsible for turning code into a webpage that users can interact with.

It parses and executes all of your HTML, CSS, and JavaScript and it’s responsible for handling user interactions.

So when the main thread is working through your site’s code, it can’t handle user input.

If your site makes the main-thread take too long, you’re likely not providing a good user experience and slow page loading times (that Google will factor into rankings).

Ways to reduce main-thread work share methods for other sections, including:

• Minifying your code
• Removing unused code
• Implementing caching

8. Reduce JavaScript Execution Time

JavaScript execution time is often the largest slowdown to main-thread work.

The methods we suggested above for reducing main-thread work should also reduce JavaScript execution time and increase your page speed.

9. Reduce Server Response Times (TTFB)

Time to First Byte (TTFB) measures how long it takes for a browser to receive the first byte of data from your server after making a request.

Several factors that can influence and lower your TTFB include:

• Using a high-quality web hosting provider
• Using lightweight themes and plugins
• Reducing the number of plugins installed on your site
• Using a Content Delivery Network (CDN)
• Implementing browser caching
• Using a quality Domain Name System (DNS) provider

10. Properly Size Images

Images quickly become the largest tear on site performance if you’re not careful.

Images that are larger than they need to are automatically resized with CSS, and this takes longer than using properly sized images to begin with, resize images online.

Properly sizing images is a simple way to reduce your loading times.

Either upload images at the proper sizes, or use responsive images by creating differently-sized images for various devices and use the srcset HTML attribute.

11. Defer Offscreen Images

Deferring offscreen images is commonly known as lazy loading.

Instead of making the browser load every image on a page before displaying above-the-fold content, you can have it only load images that are seen on page load. Less loading means better performance.

12. Efficiently Encode Images

You’re probably getting the point that images have a significant impact on site performance. One of the most basic optimizations you can do is compression.

This reduces your file sizes so they’ll load faster.

Additional recommendations to compressing images include:

• Serving images at the correct size
• Implementing lazy loading (deferring offscreen images)
• Converting images to next-gen file formats, such as WebP
• Using video formats for animated content, such as GIFs

13. Serve Image in Next-Gen Formats

Some image file formats will load more quickly than others.

We’re not talking about your PNG or JPEGs. But image files like WebP and AVIF are becoming the new standard.

14. Use Video Formats for Animated Content

Animated content delivered through formats like GIF cost to your performance.

GIFs are demanding to load, and you’ll see recommendations to load video formats like:

• MP4: Will create slightly larger files, but is mostly browsers compatible.
• WebM: Highly-optimized video format, but has limited browser compatibility.

15. Ensure Text Remains Visible During Webfont Load

Similar to images, fonts are often large files that take a good amount of time to load. Browsers sometimes even hide text until the font loads completely.

You can resolve this issue by applying the Font Display API swap directive in your @font-face style.

16. Enable Text Compression

In some cases text compression is enabled automatically on your server. If that’s not the case for your site, here’s a few things you can do.

1. The first is to install a plugin with a GZIP compression feature.
2. Compress your text manually by editing your .htaccess file.

17. Preconnect to Required Origins

Preconnect HTML attributes immediately tell browsers that you have third-party scripts on your page that need to be loaded so they can initiate as soon as possible and improve your performance.

You likely have a couple third-party resources on your site.

These resources take time for browsers to establish a connection to these resources and slow down your loading speeds. So it helps to tell browsers that they need to establish a connection as quickly as possible.

18. Preload Key Requests

Following preconnect, preload minimizes the number of requests browsers must make to your server.

But instead of connecting to third-parties “preload key requests” refers to loading critical assets on your own server.

19. Avoid Multiple Page Redirects

You’ll often have redirects when you move or delete a page on your site. While this is what you should use redirects for, be aware that redirects do cause additional delays in loading time.

So avoid using multiple redirects unless you absolutely have to.

20. Serve Static Assets With an Efficient Cache Policy

Caching refers to how browsers save copies of your pages to load faster on future visits.

Browsers periodically clear their caches to keep them updated and you want this time to be higher rather than lower.

Clearing your site from browser caches every couple of hours doesn’t make any sense, so you can optimize your cache expiration period using Cache-Control and Expires headers.

21. Reduce the Impact of Third-Party Code

We’ve already touched on how third-party scripts can do big hits to your performance. So it’s important to reduce their impact on your performance where you can.

A few methods to reduce the impact of third-party code on your page speed include:

• Defer the loading of JavaScript
• Use link tags with preconnect attributes
• Self-host third-party scripts

22. Avoid Enormous Network Payloads

Large network payloads use more data and cost everyone more money. Minimizing the number of network requests needed to load your site helps avoid this.

Google recommends keeping your total byte size under 1,600 KB.

A few ways to lower your network payloads include:

• Deferring CSS, JavaScript, and images that are below the fold
• Minifying code
• Compressing image files
• Using the WebP format for images
• Implementing caching

23. Avoid an Excessive Document Object Model (DOM) Size

The DOM is how browsers see HTML as objects in a tree-structure with individual nodes representing each object. The larger your DOM is, the longer it takes to load.

Google recommends you keep DOM trees with:

• Under 1,500 nodes in total
• Under 32 node depth
• Under 60 child notes for any parent node

Summary

Page Speed matters for your ranking. Google continuously focuses on measuring page speed alongside other user experience characteristics.

We covered how Google search has, over the years, put more effort into measuring page speed. Your page speed should be a focus moving forward, but page speed is just one of many SEO KPIs you should be tracking.

We also shared SEO tools that can give you recommendations to work on your site, and ways to improve your page speed.

Do you have questions about Page Speed or optimizing your site’s performance?

Our SEO audit service provides actionable insights into putting your site on the right path, and our team can take care of the implementation work required to increase targeted search traffic to your business.

Read this next…

Technical SEO strategy – Develop a winning technical SEO strategy to drive organic growth.