How Speed Affects SEO
Speed: Background & Overview
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.
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.
- 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.
How Fast Should My Website Load?
Naturally, the first question becomes how fast should your website load? What are the benchmarks? Let’s go through those key metrics.
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 FCP needs to be varies depending on the visitor’s device. Google, in Google Search Console’s reports, considers a website 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. 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.
Speed as an Organic Ranking Factor
Along with the benefits for the people visiting your website, faster speeds can also help your organic search performance. 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.
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.
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.
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.
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 78 on mobile. Below this, you can begin to see the metrics from the lab and field data, including FCP. 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 Lightbhouse. 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.
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.
From the home page, enter in 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.
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.
One helpful report to decide how to fix the time is 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.
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.
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:
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 setup by adding code to your website’s .htaccess file.
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.
Editing an Image Using Pixlr
Using the example above, we have an image that is 500×500 and we want to crop that down to 350×350.
1. Start by going to https://pixlr.com/editor/
2. Click Open Image From Computer
3. Navigate to the image you want to, select the image and click open
4. Go up to the menu bar and click Image>Image Size
5. In the Image Size box change the Width to 350 and make sure the Constrain Proportions box is checked (this will automatically adjust the height and keep the image from becoming distorted).
6. Click okay and now your image is resized to 350×350
7. Save your file by hitting Ctrl>S on your keyboard or going to File>Save
8. Give your file a descriptive name
9. Select the file format you want to use (see below for details on file formats)
10. Adjust the quality for clarity and file size (see below for details on file size)
11. Click Okay
12. Save your file to your computer
13. Upload to your website
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.
- Speed Becomes a Ranking Factor – 2010
- Mobile Speed Algorithm Update – 2018
- How Fast Is Fast Enough?
- Mobile Page Speed Benchmarks
- Image Optimization Recommendations
- Minify JS and CSS
- jQuery Lazy Load
- Comparing JPG, PNG, and GIF
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.