How Speed Affects SEO

On websites, faster is better. Each page of your website should load into the visitor’s browser as quickly as possible that way as people click to your website or navigate through your website, they don’t spend too much time waiting. Similarly, any features on your website—like videos or images—should load quickly too.

Table of Contents

What Metrics Do You Use to Measure Speed?

The first step to addressing your website’s speed is knowing how it currently takes for your website to load. There are many speed-test tools available that, for free, will tell you your website’s load time. We’ll discuss those tools later in this guide but for now, let’s discuss the most important metrics you’ll see when reviewing these tools. While there are many different numbers describing different aspects of the load time, you don’t need to track each metric. Yes, each metric matters in specific circumstances. However, you should pay attention to and work to optimize three key numbers:

  • Time to First Byte (TTFB). TTFB measures how long it takes from when a URL is requested to when the first bit of information is returned from the server. If TTFB is high, that indicates problems with your website server and hosting configuration. This metric is also highly correlated with organic search rankings.
  • Start Render. Start Render looks at how long it takes between the request of the URL and when you start to see something load into the browser. If this metric is high, that indicates your website is loading too much stuff (images, JavaScript, CSS, etc.) to the browser. This is similar to a metric called First Contentful Paint, which is measured in Google’s PageSpeed Insights tool.
  • Total Load or Fully Loaded Time. This metric tells you how long it takes between the request of the URL and when everything has finished loading into the browser. Sometimes this is referred to as DOM Complete, DOM Content Loaded, or Document Complete.

Google’s Core Web Vitals

Those three metrics are closely related to the speed metrics Google uses in its Core Web Vitals report. In Core Web Vitals, Google reports on:

  • First Input Delay (FID). FID measures the time between a visitor first interacting with a page and the time the browser responds to that interaction. This is similar to another metric Google reports on in their tools (though not a Core Web Vital metric): Total Blocking Time (TBT). TBT looks at the time between when the page starts to render and the time when the page can be interacted with by a visitor. What these metrics get at is that your website should respond quickly to visitor requests so that visitors spend less time waiting and more time interacting.
  • Largest Contentful Paint (LCP). The second speed metric in Google’s Core Web Vitals measures how long it takes to load the largest item on a page. This gives you an idea of how long it takes for a page to load in total and also gives you an idea of what that biggest element is that will most affect a website’s speed. The faster the page loads and the faster that largest element loads, the better (for Google and for the people visiting your website).

How Fast Should My Website Load?

Naturally, the first question becomes how fast should your website load? What are the benchmarks? What does Google require? Let’s go through those key metrics.

General Guidelines

Before we get into Google’s requirements, let’s go through the first three metrics we discussed. We tend to find focusing on these metrics is a bit easier because they can be measured in a variety of speed tools (making it is easier in development and staging environments) and because those metrics are somewhat easier to understand what you need to do to improve that metric. As well, improving these three metrics will also improve the metrics Google reports on in Core Web Vitals. 

TTFB should be as quick as you can possibly make it. As mentioned above, TTFB is correlated with search rankings and that study found ranking differences on TTFB greater than half a second. Along the same lines, KeyCDN recommends notes that the average is typically 200-500 ms (.2 to .5 seconds) and that anything over half a second is considered slow.

How fast your start render (or FCP) needs to be varies depending on the visitor’s device. Typically, a website is considered fast if it begins showing content (or painting content) to the browser in under one second and slow if it takes longer than three seconds to show content on the screen.

What about total load time? That is the time between requesting a page and the completion of the page loading into the browser. For visitors using a smartphone, your website should typically begin showing content in three seconds or less and for visitors using a desktop computer, your website should load in two to five seconds (source).

Our recommendation at Elementive, in general, is:

  • TTFB should be half a second or less. 
  • FCP should be one second or less.
  • Total load time should concern you if it is greater than three seconds.

Again, those are in general recommendations. With all of these metrics, it depends on exactly how the speed is affecting visitors as to whether or not load times greater than these recommendations really present a critical problem for your website. As well, the more competitive your search rankings, the faster all of these metrics should be.

To help put these metrics in context, you want to also measure how speed impacts visitors by looking at how speed correlates to website engagement, how visitors perceive the website’s speed, and how you compare to competitors.

Google’s Requirements

In 2010, Google made speed a factor they use to help determine where a website should rank in search results. As of the summer of 2018, Google incorporated this same speed factor into its mobile search algorithm. As of 2020, Google has incorporated those speed requirements into Core Web Vital metrics. These requirements can influence your search rankings and you want to make sure you are as close to these requirements as is possible.

  • First Input Delay (FID). FID should be 100 ms or less. Anything greater than 300 ms is cause for greater concern. If you have a fast server (measured by TTFB) and if the code is light (measured by, among other things, Start Render), then your server should hopefully be able to respond quickly to visitor interactions.
  • Largest Contentful Paint (LCP). The largest item on the page should load in 2.5 seconds or less. Anything greater than 4 seconds is a cause for concern. If you size images appropriately, reduce your JavaScript and CSS as much as possible, reduce third party scripts, and other similar actions, that should help improve LCP. Improving LCP also means you are improving your website’s total load time as well.

Note that speed works against you and not for you with slower sites seeing a negative impact. However, faster websites typically won’t get a boost due to their faster speeds. Whether fast or slow, speed is a pretty minor ranking factor. As a result, at Elementive, our recommendation is that so long as your speed is pretty good and your website isn’t too slow, there are more important factors to focus on first to help improve your organic search performance.

Speed’s Impact on User Experience & Conversions

Remember, as you work on improving your website’s speed that this also affects your user experience and conversions. Several studies have found that the faster the website loads, the higher the overall conversion rate, with websites loading in under three seconds reporting the highest conversion rates. As with speed’s effect on SEO, while speed is important, it isn’t everything and there can be other (sometimes more important) factors that will do more to improve your search performance.

Our research into how users perceive speed has found that people using your website may be less sensitive to small changes in speed. That means if your website currently loads in five seconds, making a large investment to reduce the speed to four seconds might not have a measurable impact. However, reducing the speed to from five to two seconds would. When it comes to speed improvements, go big.

Measuring Speed

Google PageSpeed Insights

The first tool we’ll look at in this guide is Google’s PageSpeed Insights. PageSpeed Insights provides two types of data: lab data and field data. The field data is a historical look at real visitors to your website that used the Chrome browser and reports on how those visitors were able to load your website. Because the field data comes from real-world visitors, this information wouldn’t be available for a new page and it likely isn’t available for websites with low traffic volumes. The lab data comes from Lighthouse and provides a real-time analysis of how quickly your website loads.

Google Page Speed Insights GPSI Home Page

Once you arrive on the PageSpeed Insights main page, enter in a URL to a page on your website then click Analyze. We’ll use Amazon as an example. Once you click the button, the test will run then you’ll see the results page, which will look something like this.

PSI Amazon June 2020

The first piece of information you’ll see is a gauge showing the website’s performance score. This performance score is based on Lighthouse (which is the lab data). In Amazon’s case, their score is 62 on mobile. Below this, you can begin to see the metrics from the lab and field data, including FID and LCP. You also have FCP, which corresponds to Start Render. 

Remember: field data is a historical look at how this page has performed while lab data is a real-time assessment of your website’s speed from Lighthouse.

You can toggle between desktop and mobile using the links in the upper right corner to see how speed compares between these different devices.

Scrolling down the page, Google provides recommendations about how to improve the website’s speed. Although these recommendations are provided by Google’s tool, that does not mean that correcting these specific issues will help improve Google’s assessment of your website or that fixing these specific issues will directly improve your website’s ranking position in search results. Instead, these are ideas about how you may be able to improve your website’s speed.

optimization suggestions from google speed page insights

Web Page Test

Google PageSpeed Insights is somewhat limited in the data provided and doesn’t go into as much detail as other tools. That is why at Elementive we recommend and use Web Page Test along with PageSpeed Insights.

web page test home page

From the home page, enter the URL to the page you want to test. In this case, we’ll test Elementive’s home page. One nice feature about Web Page Test is you can select different locations and devices. Pick a location near where your visitors are located and select the browser/device your visitors are most likely to use. In our case, we’ll test from Denver, Colorado using a Chrome or Firefox browser on a desktop computer.

After the test runs, you’ll be taken to the results page. You’ll notice these results are far more detailed than what is offered by Google’s PageSpeed Insights tool.

web page test results page

The most important information is contained in the table, which summarizes three different runs of the speed test. In this test of Elementive’s home page, our TTFB is .7 seconds, a bit higher than what we’d recommend it should be. Our start render time is 1.3 seconds, which is also a bit slow. Our total load time is 2.4 seconds, which is in line with our recommendations. Given that we’re over our recommended time, we’d want to dig deeper than this table to see what we’d need to do to improve our load time.

web page test results

One helpful report to decide how to fix the time is the waterfall report. Click the “Details” link in the navigation to go to the page showing a waterfall report. The waterfall shows everything that had to be loaded into the browser for the website to load and the order in which everything loaded.

web page test waterfall

Generally speaking, the items with the longest bars are the items that are slowing down your website’s load time. Everything is color-coded so that you can see which items are taking the longest to load (the key is directly above the waterfall). For instance, we have a long red bar in the middle of our waterfall report and red relates to font files. To improve our speed, we may want to investigate the need for that font on our website’s design. Keep an eye out for long bars related to images as many images can be quickly resized as a quick win for decreasing a website’s speed.

Additional Speed Test Tools

Other tools we’d recommend are listed below. We recommend using several tools to test your website’s speed. Within each tool, test from different locations and, as available, devices. Each tool loads the website and tests the speed slightly different, so using multiple tools can give you a more balanced look at your website’s speed and the work you need to do to decrease the website’s load time.

Decreasing Your Website’s Speed

After running your website through speed test tools and reviewing the reports, now it is time to actually improve your website’s speed. While there are many areas to address, three broad areas usually help the most to decrease a typical website’s speed. We’ll provide a high-level recap of what each area is below. For more details, and for specifics on how these can be applied to your website, please contact me.

Caching

One of the biggest contributors to long load-times is retrieving information from a database. For example, if you use WordPress, each page’s content is stored in a database. When somebody requests a particular page, your website’s server has to go find that page in the database. This trip to the database takes time, as does running the various queries against the database to get the information about the page.

Caching avoids this step. Instead of each visitor having to access the database, a copy of the page is created outside of the database. That way, instead of your server having to go and find the page in the database, your server has to find a static file with the page’s information and finding a static file is considerably faster. The trick is making sure the cache is cleared and the page’s information is updated on a regular enough basis so that content doesn’t become outdated.

Platforms like WordPress offer a variety of different caching platforms. If you aren’t using WordPress, chances are your content management system offers a caching solution as well. At Elementive, we’ve also added caching solutions to custom-built websites. Depending on the exact configuration of your website, this can save a second or more of load time.

In WordPress, one caching plugin we’ve found that works quite well is WP Fastest Cache. The plugin works well with a variety of other plugins and WordPress themes. There are a variety of configuration options available within the plugin to help you do the most you can to improve your website’s speed. The most important configuration is simply checking “Enable” by the “Cache System” option. Here is a way we typically configure this plugin:

wp fastest cache configuration

Compression

Have you ever created a compressed (zipped) folder on your computer? If so, you already know how compression works. Essentially, compressing a file makes it smaller by stripping out unnecessary or redundant pieces of information. When you compress your website files, the data sent to a visitor’s web browser is sent through is a compressed format. The web browser then receives a compressed file and figures out the right way to present it back to the visitor.

Compression can lead to big savings as well. In Elementive’s case, our home page’s size is 67% smaller thanks to GZIP compression. You can test if your website is GZIP enabled for free here. If your server isn’t already compressed, this is typically pretty easy to set up by adding code to your website’s .htaccess file.

Gzip test

Reduce Images and Image Sizes

The final area we’ll discuss in this guide to reduce your website’s load time is optimizing images. There are many routes you can take but the easiest first step is to get rid of any images you don’t need. If images are included strictly for aesthetics, question if they are necessary. Unlike the early days of the web, web designers can often create aesthetically pleasing websites with CSS and no images. Even images that seem to be necessary for the content might not be beneficial—remove the image and see if users engage and convert in similar ways.

Once you’ve removed all the unnecessary images, the next step is to see if you can resize any of the remaining images on your website. For example, you might have an image that is 500 pixels wide presented on the page at 350 pixels. That 500 pixel image is much larger and takes longer to load, so you’d be better off resizing the image to 350 pixels and re-uploading it to the page.

As well, when saving images, be sure you are saving for the image in such a way that it is optimized for size on the web. There are several tools on the market for resizing images. The most well-known program is Photoshop, but for some, the cost of Photoshop may be too steep. We have several alternative photo editing program suggestions you can try, including:

  • PicMonkey – A simple editor with lots of features. They offer a free trial, starting at $5.99 a month.
  • Pixlr – Our recommendation for a simple, easy to use photo editor for basic cropping and file sizing for web, plus its free!
  • GIMP – An open-source, free image editing software application that can be run on Windows, Mac or Linux. This does everything Photoshop does, but isn’t a very intuitive tool to use. If you are truly looking for a Photoshop alternative and have more sophisticated needs, this is the way to go. If not, Pixlr should work just fine.

Image File Formats

There are several image file formats you can choose from. The universally supported image formats are GIF, PNG and JPEG. You will want to choose the file format that works best of the image you are working with. For the most part, JPEG will be the image format you will use. Google has an in-depth help guide that explains the various file formats you can use and how to decide which one is best for you.

Image Size Specifications

There are no hard and fast rules when it comes to the perfect file size for an image, but a general rule of thumb would be to keep small sized images to 20kb or less, medium images to 60kb or less and large images 150kb or less. Each image on your website is likely used in its own unique way so a set file size guide isn’t realistic. For example, you may have a hero image on your homepage. That image is not only large in width and height but is also likely large in file size when compared to a thumbnail image you are using in a blog. The goal with image file size is to get it as small as possible without distorting or blurring the image to a degree that it just doesn’t look good anymore. Play with the quality settings of your photos to see how file size is impacted.

Additional Resources

Technical SEO Services

Want help improving your website’s technical SEO factors? Contact me today to discuss how we can help review and improve your current technical structure, including optimizing your website’s speed.