Why is page speed important for SEO?
Page speed is important for SEO as it has been known to be a ranking factor on desktop searches for quite some time. However, It was not until recently that Google officially introduced speed as a ranking factor for mobile searches with the Google Speed Update. With the index now being mobile first, optimizing the page loading speed has never been more important if you want to rank well. So how do you know if your website has an okay page speed? Well there are quite a few tools available that lets you measure page speed and we introduce you to some of them in this article.
What website speed test should I use?
The purpose of using tools to measure page load speed is to determine bottlenecks in order to deal with them. Whether it comes down to reducing the size of images, combining css files or reducing the number of redirects these tools make the process of identifying the problems a lot easier. There are quite a few useful tools available for measuring website speed so lets take a look at some of the more popular ones.
Pingdom Website Speed Test
The Pingdom Website Speed Test is a free and easy-to-use tool that lets you analyze your website speed. The process is very easy – you just enter the URL of the page you want to test, select one of the available test servers and click ‘start test’. If you have a decent amount of global traffic you should run multiple tests, using all of the available test servers, to get a better idea of what the experience will be like depending on where the visitor is accessing the site from. Once a test is complete you’re presented with the result page which looks like this:
Right below the score summary you will find suggestions on how to improve the page performance of the tested page. Each section is graded from A-F, representing a numeric score from 100-0, and can be expanded to get a more detailed description of each suggestion.
A bit further down you will find the File requests table which can be sorted by multiple parameters. It gives you a better idea of which files are slowing your site down and provides detailed information on load time for each file. This is a great way to identify speed related bottlenecks related to the server configuration, as load time might very well be increasing due to DNS configuration issues or lack of cache etc.
Pingdom Speed Test is a great tool to not only get a quick idea of what your website page load speed is like, but also to get detailed data on how to improve the performance. The servers are quite busy at times, but the queue system works well and you rarely have to wait more than a few seconds to get your test started.
PageSpeed Insights (PSI)
PageSpeed Insights (PSI) is a similar tool to Pingdom Website Speed Test, but while the latter is developed by a 3rd party, PSI is developed by Google themselves. As we recently reported PageSpeed Insights was just recently updated to version 5 and is now using Lighthouse as its analysis engine. The process is equally simple as with Pingdom Website Speed Test. You just enter the URL of the page you want to test and once the tests have completed you’re presented with the results. In difference to the tool from Pingdom, PageSpeed Insights will automatically run tests for desktop as well as mobile and the two results are sometimes drastically different. It also consists of Field Data (based on feedback from the Chrome User Experience Report, ie real world data from visitors of your site) as well as Lab Data (based on Lighthouse analysis). Load time is separated into First Contentful Paint (FCP), which is when the user actually sees content being rendered in the browser, and First Input Delay (FID), which measures the time from when a user clicks an element to when the browser responds to the click. All this data can be somewhat overwhelming, but it really is a great way to get a better understanding of the steps needed to be taken in order to improve the page speed.
You will find a section called ‘Opportunities’ below the score section of the result page, where detailed instructions on how to improve your page speed based on the data presented. In the case of image optimization PSI lets you know the current size of an image as well as the size once optimized, which is quite helpful when you want to identify the images that will reduce the loading time the most.
Being an official tool from Google PageSpeed Insights is likely to be a more trustworthy tool as to determine how Google will rank your sites loading speed, which in turn will affect your sites ranking. Its more useful to those wanting to dig deeper into issues, while still providing enough feedback for the more casual user to take action.
GTmetrix is yet another tool to measure site speed and while the previously mentioned tools are completely free, GTmetrix also offers a Pro version in addition to the free version reviewed here. It is very similar to Pingdom Website Speed Test with a score summary and table of recommendations below it. It also offer the same type of data as Pingdom with Waterfall diagrams of load time for individual files. A disappointing limitation of the free version is that you are unable to select the location of the test server and the default server is located in Canada which is not very useful if your target audience is located in Europe. The GUI is not as intuitive as Pingdoms tool where all data is presented within a single page, whereas with GTmetrix you have to click tabs to see certain data. In addition to the PageSpeed Score, GTmetrix also lists YSlow Score, which is based on Yahoo’s rules for high performance web sites.
For the purposes of testing page speed and identifying bottlenecks GTmetrix offers few features but the ones offered for free in Pingdom and PSI. Being restricted to a single test server location seems more like a way of getting people to pay for the Pro version rather than actually providing other useful features for the purpose of measuring page speed performance. If you want to track performance over time, monitoring sites for uptime and being able to archive reports – GTmetrix might be for you, but for the purpose of this article we would recommend going with Pingdom Website Speed Test or PageSpeed Insights.
How to optimize page speed
So now that we’ve identified the bottlenecks in our website speed using one of the tools above, how do we go about actually eliminating / reducing them? Well we’re going to separate the optimization part into two different types of optimizations. Content optimization covers how you can optimize files to make them load faster, while server optimization will focus on making the web server serve up content as fast as possible. So lets start off with what you can do with your content to improve your page speed.
There are several image formats used on the web but the most common ones are JPG, GIF and PNG. JPG is best used with photographic images, GIF is the only format if you want to use an animated image and if you want a lossless format that works great with graphical elements go with PNG. There are more modern image formats available such as Googles WEBP, but the support in tools and browsers are still somewhat sparse. One way of optimizing an image is to simply convert it into a more compressed format. If you have a large photo saved as a PNG, simply converting it to a compressed JPG could greatly reduce the file size of the image. Once you’ve made sure each image is saved in the optimal format, the next step is to optimize the file using one of the many tools available.
This tool has some great features including a live preview of the compressed version of the image vs the original one, making it very easy to see if the quality is still up to par after being compressed. It lets you select wether to use lossy or a lossless (only available for JPG and PNG) compression, and once the image is uploaded you’re presented with the compressed version and a slider that lets you compare it with the original one. The bar below the image preview displays the size before and after compression using numeric representation as well as a bar diagram. Everything is done automatically, all you do is upload an image and voila – you’ve got a compressed version! This is great for those wanting an easy way to compress images, but with the addition of some options to set level of compression etc, this tool would be even better!
Squoosh is an image compression tool developed by Google and features some great functions for those wanting to have more control over the compression settings. It has the same type of slider as Compressor.io but adds a bunch of cool features such as being able to resize the image, set the quality level and select the file format for the compressed version. While it adds some complexity with the all the options and features, it still keeps things intuitive enough for those just wanting an easy way to compress images. Besides, if you are serious about optimizing your images – you really need to get as much control of the process as possible!
In addition to minifying scripts it is also possible to minify HTML. While minifying markup and scripts can make the files harder to edit, its a quick way to shave off overhead from the page load time. Will Peavys minifier does the job just fine.
Apache being the most popular web server in the world, there is a good chance are your website is powered by it. Luckily Google has created an Apache module called PageSpeed module which automatically optimizes Apache according to Googles PageSpeed Insights parameters. It’s a simple install and once installed it automatically optimizes Apache to perform at its full potential. You can find the module and installation instructions on the link below.
The PageSpeed module is also available for IIS but as a commercial module which is quite pricey with a monthly fee of $35. If your site is hosted on Microsofts platform this might still be a good option if you want to optimize the web server without spending tons of time digging through the different configurations.
There are multiple plugins available to assist in the process of optimizing the page speed of WordPress. The most common ones are WP Super Cache and W3 Total Cache which are cache plugins reducing the page load speed by caching the dynamic content of WordPress into static html files which load much faster. We use WP Super Cache but a lot of people prefer W3 Total Cache so it is really up to you whichever you prefer. At the end of the day they offer the same type of functionality with some smaller differences. Autoptimize is another great plugin which deserves a mention. It minifies scripts and HTML to make the response size as small as possible and coupled with one of the caching plugins previously mentioned, you’re off to a great start of optimizing your WordPress site. Another type of caching is object caching, an internal API of WordPress for caching complex data queries , and there are two main plugins to enable this type of caching: memcached and Redis.
TTFB is short for time-to-first-byte which is the time from when the initial request is made to the first response is generated. While this metric is still very important Google wants to emphasize that time-to-interactive, when the user is actually able to interact with the site, is the single most important metric when it comes to page speed. Long TTFB can be caused by misconfigured DNS, memory leaks and network issues. Caching solutions is a great way to reduce TTFB so if you are using WordPress go ahead and install one of the recommended plugins mentioned above.
HTTP/2 is a major improvement over HTTP 1 & HTTP 1.1, especially as far as optimizing page speed is concerned. While the previous version of the HTTP protocol has to make a new TCP connection for each request, HTTP/2 can use a single connection to make multiple requests and have it remain open as long as the website is open in your browser. Combining multiple JS/CSS files into a single file to reduce the number for requests is not needed with HTTP/2, as a new request is not made no matter how many files are requested.
Installation instructions for Apache: https://httpd.apache.org/docs/2.4/howto/http2.html
Installation instructions for IIS: https://docs.microsoft.com/en-us/iis/get-started/whats-new-in-iis-10/http2-on-iis
While many focus on TTFB when optimizing page speed, Google Webmaster Trends Analyst Gary Illyes recently explained that what really matters is load time of critical content, because that’s what the users care about. With mobile first index having been implemented in full effect, it is now crucial to have a fast website in order to rank well, so tweaking your server and content in order to achieve this is more important than ever. The process of optimizing your page speed is as follows:
- Identify what needs to be fixed using a page speed test tool.
- Make the content specific optimizations needed (optimize images etc).
- Enable HTTP/2.
- Install the PageSpeed module.
- Pick a caching solution along with a CDN to ensure page speed is optimal.
To get the best result, using a combination of hands on optimization along with a caching solution as well as a CDN is the way to go. We hope this guide provides you with enough information to get started and if you have any questions or suggestions as to how to improve the guide, please let us know!