How Speed Affects SEO

What It Is

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.

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 will be incorporating this same speed factor into their mobile-search algorithm as well. Note that speed works against you not for you with slower sites seeing a negative impact but faster websites not getting a boost due to their faster speeds.

Thankfully, there is a lot you can do to decrease the load time of your website. Naturally, then, the question becomes how fast should your website load? Google’s recommendation is that a website should load within two seconds, though studies have found about half of all websites take longer than three seconds to load. Still other studies indicate that load times over five seconds can increase the bounce rate, discouraging visitors from using your website. The bottom line, is that your website should load as fast as possible—on desktop and on mobile devices.

Our recommendation at Elementive is that you should aim for your website’s key pages to load within 1-2 seconds, and definitely no more than 3 seconds. If the load time is substantially more than that, working on decreasing your website’s speed would probably be a worthwhile investment.

Testing Speed

The first step to addressing your website’s speed is knowing what your speed is. There are a multitude of speed test tools available that, for free, will tell you how fast your website loads. When reviewing these tools, most will give you a multitude of metrics describing different stages of your website’s load. While each metric matters, you should pay attention to two key numbers:

  1. Start-render or time to first paint. This is how long it takes between the request of the URL and when everything begins loading into the browser. A slight variation is something called First Contentful Paint which is when actual items are loaded into the browser for a visitor to see.
  2. Total load or onload time. This is 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 or DOM Content Loaded. Going back to our recommendation, you want your website to start render within 1-2 seconds and the total load time to complete with in about 3 seconds.

Google PageSpeed Insights

One tool you can use, and the one we’ll focus on in this guide, is Google’s PageSpeed Insights. 

google pagespeed insights

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.

google page speed insights results page

 

The first piece of information presented is information about the median First Contentful Paint and median DOM Content Loaded. This data comes from Chrome’s User Experience Reports and represent the real-world times people have experienced when loading your website. Because it comes from real-world data, this information wouldn’t be available for a new page and it likely isn’t available for websites with less traffic.

In the Page Stats section, Google provides information about the size of the page being tested. This is sometimes referred to as the weight of the page because a page with a larger file size is heavier and will take longer to load. This section also provides details about how many trips are required to the server when loading this particular page—the fewer the better since each trip to the server adds time to the total load time.

google page search results page 2

Google then provides recommendations on how to improve your website’s speed. As well, Google will list out any speed optimizations they already see present on the website.

Note that you can view these stats for desktop and mobile devices.

Web Page Test

Google PageSpeed Insights is somewhat limiting in the data they provide about the way in which the website loads. As well, Google PageSpeed Insights doesn’t provide mean load for smaller websites or new website. That is why at Elementive we recommend and use Web Page Test.

web page test home

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 users are located and select the browser 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 performance results

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 start render time is 1.3 seconds and our total load time is 2.4 seconds. We’re a bit over 1-2 second recommended time, so 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.

waterfall view

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 us.

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. 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 more of load time—and each second counts.

In WordPress, one caching plugin we’ve found that works quite well is Comet Cache. The advantage to Comet Cache is it works well with a variety of other plugins and WordPress themes. As well, Comet Cache doesn’t require additional configuration to work. However, if you want to configure it further you can. All you have to do to get it working is install the plugin, then Enable it from the options screen. As you make changes, the plugin will automatically clear the cache or you can click the “Clear” button to wipe out your cache manually.

comet cache

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.

gzip enabled

If your server isn’t already compressed, this is typically pretty easy to setup by adding something like following code to your website’s .htaccess file. (Note: if you aren’t familiar with editing .htaccess files, please contact us or reach out to your developer.)

# Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml

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. (https://www.picmonkey.com/)
  • Pixlr – Our recommendation for a simple, easy to use photo editor for basic cropping and file sizing for web, plus its free! https://pixlr.com/editor/
  • 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. - https://www.gimp.org/

Editing an Image Using Pixlr

Using the example above, we have an image that is 500x500 and we want to crop that down to 350x350.

1. Start by going to https://pixlr.com/editor/ 

pixlr home page

 

2. Click Open Image From Computer

pixlr editor

3. Navigate to the image you want to, select the image and click open

pixlr editor select image

4. Go up to the menu bar and click Image>Image Size

pixlr editor 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).

pixlr editor change image size

6. Click okay and now your image is resized to 350x350

pixlr editor resized image

7. Save your file by hitting Ctrl>S on your keyboard or going to File>Save

pixlr editor save file

8. Give your file a descriptive name

pixlr editor give file 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.

Resources

Technical SEO Services

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

CONTACT ELEMENTIVE