Speed Matters For Better SEO

Speed matters when it comes to SEO. There are two reasons for this:

1. Search engine powerhouse Google uses page speed as one signal to rank search engine results.
2. Studies show that when your web pages take 4 seconds or longer to load, users will generally click off your page and move onto another site.

When navigating your site, your users' experience is a great reason to be concerned about getting as much speed out of your website as possible. Users have endless options when it comes to consuming content on the internet. A slow performing website frustrates your users and encourages them to go elsewhere. A faster and more responsive site keeps them more engaged and focused on your content, rather than waiting for scripts and images to load.

Use GTmetrix.com to Test Your Site

GTmetrix.com is a great site for testing your page load speed. It uses Google PageSpeed and Yahoo! YSlow to grade your site's performance and provide actionable recommendations to fix issues it discovers.

The Google PageSpeed family of tools is designed to help you optimize the performance of your website. PageSpeed Insights products help you identify performance best practices that can be applied to your site, and PageSpeed optimization tools can help you automate the process.

Yahoo's Exceptional Performance team has identified 34 rules that affect web page performance. YSlow's web page analysis is based on the 23 of these 34 rules that are testable. YSlow analyzes web pages and suggests ways to improve their performance based on these 23 rules.

Since GTmetrix uses both tools, you can compare results side-by-side. For example, here's a report I ran for this site as an illustration for this article:

Let's analyze this report. The first thing to see is that Google PageSpeed gives this site an "A" with a score of 96%. I'm happy about that. YSlow, on the other hand, gives the site a "B" with a score of 83%. If I were still in school, I could settle for a B, but for my website, that doesn't make me too happy. A slow page load could mean lost opportunities. I have work to do to improve performance. The page load speed of 5.69 seconds is way too long. So let's see what YSlow suggests. Click the YSlow tab to see the breakdown details:

From the breakdown report, I can see that there are four areas that demand my attention.

1. Make fewer HTTP requests
2. Use a Content Delivery Network (CDN)
3. Add Expires headers
4. Minify JavaScript and CSS

All four of these areas scored poorly with 2 Fs, an E and a D. Let's look at each one of these four trouble areas and the possible solutions to fix these issues. To view the suggested solutions, click the section title to view the report details for that section.

Make fewer HTTP requests

Yahoo says:

This page has 15 external Javascript scripts. Try combining them into one. This page has 14 external stylesheets.

Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads.

The Suggested Fix:

Reduce HTTP requests through combined files and CSS sprites. Some ways to reduce the number of components include:

• Combine files
• Combine multiple scripts into one script
• Combine multiple CSS files into one style sheet
• Use CSS Sprites and image maps

I've created CSS sprites for buttons and smaller image objects, maybe I can create them for larger images as well. This article uses 5 images that could potentially be combined into a CSS sprite. That would reduce the http requests for these images from 5 to 1. It could result in a large image file though that could work to slow the page rather than speed it up. The best thing to do is try both ways and see which provides a better performance profile.

If you're not familiar with CSS sprites, you can learn more from w3schools.com. When you're ready to create your own sprites, visit http://www.spritecow.com/. This is the site I use to create sprites. We'll look at combining scripts and CSS files below.

Use a Content Delivery Network (CDN)

Yahoo says:

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users.

The user's proximity to your web server has an impact on response times. Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user's perspective.

The details reveal that there are 43 static files associated with the home page that YSlow suggests should be served from a CDN. Thirty of these files are WordPress core or plugin files. Unless I serve the entire site from a CDN, there isn't much I can do about these files. The remaining 13 files are all images. If you use JetPack, you can turn on the Proton feature to serve images from a CDN, or you can store the images on Amazon S3 or similar service and serve the images from there. I'm just not sure how much horsepower that would buy me. I've never been able to get Proton to work correctly for me.

A very popular site CDN is CloudFlare. CloudFlare claims:

CloudFlare protects and accelerates any website online. Once your website is a part of the CloudFlare community, its web traffic is routed through our intelligent global network. We automatically optimize the delivery of your web pages so your visitors get the fastest page load times and best performance. We also block threats and limit abusive bots and crawlers from wasting your bandwidth and server resources.

I've had mixed results using CloudFlare. I tried it with several of my sites and those of my customers. Some sites sped up, some actually loaded more slowly. I also experienced a security breach that got to my server through CloudFlare. Since CloudFlare acts as a proxy server, the signup process adds an entry to your website's Domain Name Server records. One day I was doing some maintenance work on my site's back end through FTP and discovered some files in a directory on my server that shouldn't have been there. When I examined the source code, it was clear that these files were intended to hijack my server. I was able to trace the source of this hack back to CloudFlare. The raw access logs clearly showed that they were deposited on my machine through the CloudFlare proxy. That was enough of CloudFlare for me. Perhaps you'll have a better experience.

Add Expires headers

Yahoo says:

Expires headers let the browser know whether to server a cached version of the page.

• Reduce server load
• Increase page load time
• Cost benefit ratio: high value
• Access needed

This one puzzled me at first because I know that I have the expires headers set correctly for my sites. I set the expires headers through my .htaccess so I know every file distributed from my server has its header set. This requires further examination.

Viewing the details we can see that each of the four files YSlow complains about is from an external source. Two are served from Google. One is for Analytics, the other a web font. Another file is the S2Member badge and the last is for WordPress stats displayed through Jetpack. I can turn off the S2Member badge and stats, but the Google font and analytics are necessary. There are methods to programmatically download the required files and add the header information, but it's really not worth the effort. It would also require advanced skills that are beyond the scope of this article to discuss.

Minify JavaScript and CSS

Yahoo says:

Minification removes unnecessary characters from a file to reduce its size, thereby improving load times. When a file is minified, comments and unneeded white space characters (space, newline, and tab) are removed.

This improves response time since the size of the download files is reduced.

Two popular tools for minifying JavaScript code are JSMin and YUI Compressor. The YUI compressor can also minify CSS.

There are quite a few plugins available for WordPress that can handle the minification chores and serve minified scripts and CSS. One word of caution though, sometimes poorly written scripts will break a site when minified. Make certain you have a backup and recovery plan before you start tweaking your site.

One Last Thing

As I was writing this article, I stumbled upon a plugin called Autoptimize. As I read about this tool, it seemed to have a lot of support and good reviews. It is one of the many plugins that concatenates and minifies scripts and html. Look at the test results after activating this plugin and turning off the S2Member badge:

There's no Change in Google PageSpeed, but take a look at YSlow. There is a 7% performance increase. It is now at 90%! Wow! The page load speed is reduced to 3.11 seconds and the number of http requests have been reduced to 31 from 52. That is a significant result. I'm happy.

Questions?