Page speed measures the amount of time it takes for content on a particular webpage to load. It’s easy to get this term confused with other words related to site optimization like “site speed,” which refers to the average loading time of more than one sample page on a given site. Page speed, on the other hand, specifically refers to the loading time of a singular webpage. Many factors ultimately determine page speed, including server quality, file sizes, image compression, and more. This factors need to be considered at the time of website design and development.
That being said, there are some important distinctions to be aware of when talking about this metric. While having a seemingly straight-forward definition, there are different ways to measure page speed. Here, we’ll outline three of the more common examples:
Time to First Byte (TTFB): This metric assesses how long until a page begins the loading process.
Do you know that white screen that sometimes appears just before a web page fully loads?
TTFB in action.
Fully Loaded Page: This measurement examines the time for 100% of the desired page to load. This is the most direct way to measure page speed.
First Meaningful Paint/First Contextual Paint: This is the time needed to load a sufficient amount of resources on a webpage to actually read what’s there.
This is an important metric because it gives users the ability to better understand how site visitors experience and interact with the webpage. For example, maybe page speed insights suggest a blog post takes 15 seconds to load. While that might seem like a lot of time (which it is), this page speed metric doesn’t give you enough information alone.
It might turn out that visitors are met with the first meaningful paint in two seconds, so they interact with the page quickly.
How does page speed increase my SEO Ranking?
If you have any hopes for ranking your site high on Google searches, then you should focus on improving your site’s page speed. Page speed insights can give you an accurate idea of how your site will perform with search engines.
To claim that coveted spot on the first page of Google, your page speed will need to compete with the loading time of the top 10 organic page results. Otherwise, your page will be relegated to the second or third page of Google where most searchers never venture.
Google puts a premium on page speed because it’s a way of determining a site’s quality and gauging the user experience. Sites that perform well with this metric are rewarded with a high ranking. When optimized, page speed leads to more traffic from organic searches and, ultimately, a more successful website overall.
Backlinko conducted a thorough study that examined 11.8 million Google search results and the metrics of the top 10 pages. The purpose of the study was to determine which characteristics were common among the top-performing sites.
The results quickly supported what SEO experts assumed all along: page speed plays a major role in ranking sites. The quicker your page loads, the higher it’ll rank in Google search results. In the study, all of the pages that ranked highest for a particular search had quick page speeds. It was evident that site creators had made an extra effort to optimize their loading time.
The study also found a connection between top-ranking pages and low bounce rates. Results on the second or third page of Google seemed to have notably higher bounce rates. These findings were confirmed by Google’s new industry benchmarks for page speed. According to the document, pages with longer load times experience higher bounce rates.
SEO best practices
Google has indicated that site speed (and as a result, page speed) is one of the signals used by its algorithm to rank pages. And research has shown that Google might be specifically measuring time to first byte as when it considers page speed. In addition, a slow page speed means that search engines can crawl fewer pages using their allocated crawl budget, and this could negatively affect your indexation.
Page speed is also important to user experience. Pages with a longer load time tend to have higher bounce rates and lower average time on page. Longer load times have also been shown to negatively affect conversions.
Here are some of the many ways to increase your page speed:
Enable compression
Use Gzip, a software application for file compression, to reduce the size of your CSS, HTML, and JavaScript files that are larger than 150 bytes.
Do not use gzip on image files. Instead, compress these in a program like Photoshop where you can retain control over the quality of the image. See “Optimize images” below.
Minify CSS, JavaScript, and HTML
By optimizing your code (including removing spaces, commas, and other unnecessary characters), you can dramatically increase your page speed. Also remove code comments, formatting, and unused code. Google recommends using CSSNano and UglifyJS.
Reduce redirects
Each time a page redirects to another page, your visitor faces additional time waiting for the HTTP request-response cycle to complete. For example, if your mobile redirect pattern looks like this:
example.com -> www.example.com -> m.example.com -> m.example.com/home
…each of those two additional redirects makes your page load slower.
Remove render-blocking JavaScript
Browsers have to build a DOM tree by parsing HTML before they can render a page. If your browser encounters a script during this process, it has to stop and execute it before it can continue.
Google suggests avoiding and minimizing the use of blocking JavaScript.
Leverage browser caching
Browsers cache a lot of information (stylesheets, images, JavaScript files, and more) so that when a visitor comes back to your site, the browser doesn’t have to reload the entire page. Use a tool like YSlow to see if you already have an expiration date set for your cache. Then set your “expires” header for how long you want that information to be cached. In many cases, unless your site design changes frequently, a year is a reasonable time period. Google has more information about leveraging caching here.
Improve server response time
Your server response time is affected by the amount of traffic you receive, the resources each page uses, the software your server uses, and the hosting solution you use. To improve your server response time, look for performance bottlenecks like slow database queries, slow routing, or a lack of adequate memory and fix them. The optimal server response time is under 200ms. Learn more about optimizing your time to first byte.
Use a content distribution network
Content distribution networks (CDNs), also called content delivery networks, are networks of servers that are used to distribute the load of delivering content. Essentially, copies of your site are stored at multiple, geographically diverse data centers so that users have faster and more reliable access to your site.
Optimize images
Be sure that your images are no larger than they need to be, that they are in the right file format (PNGs are generally better for graphics with fewer than 16 colors while JPEGs are generally better for photographs) and that they are compressed for the web.
Use CSS sprites to create a template for images that you use frequently on your site like buttons and icons. CSS sprites combine your images into one large image that loads all at once (which means fewer HTTP requests) and then display only the sections that you want to show. This means that you are saving load time by not making users wait for multiple images to load.