Site Speed & Performance
The Advanced
Guide to SEO
Chapter 02
The first section covered how to make your site crawlable and accessible. That's a fantastic first step, once accomplished, to make your site better than many others on the web.
Now we're going to crank it up a level and help make your site faster and perform more efficiently. This is not only great for user experience but search engines love it to.
Follow this section straight through for some tips to get your site up to speed.
Measuring Your Site Speed
Page speed or page load time is crucial these days, not only for a possible small boost in rankings, but because users will love you. Providing a fast experience for visitors is essential!
We're going to cover how you can measure your site speed through Google Page Speed Online.
Go To Google PageSpeed Online
Run The Tool On Your Homepage
This gives you an overall score, and being your homepage is a good gauge of your site as a whole.
Then you can drill down into the list of prioritized issues;
You should focus on the high and medium priority items first. Click on each item to get the details.
The tools gives you detailed suggestions for each item. Fixing many of the common issues is covered later in this document. For now, we're simply running the tool to diagnose any issues.
Run the Tool On Inner Pages (Especially Those That Might Be Different From The Homepage)
I have a page on my site, QuickSprout, which is entirely different than most of the other pages - http://www.quicksprout.com/pro/
So I would also want to run the PageSpeed tool on this page to look any differences, especially because it's an important sales page.
Test Your Site For MOBILE Site Speed
Click the "mobile" tab top right;
Remember to test your inner pages as well;
Track Page Load in Analytics
You may know that you can also track page load speed within analytics. But you may not know of a few little extras you can do along with this.
We're going to cover doing this two ways:
Setting Up Tracking In WordPress
Install the Normal Tracking Code
You probably all know how to install the normal analytics tracking in WordPress, and you may even know how to install the page speed code snippet as well.
We're using the Google Analyticator Plugin for this.
Again, this is likely very basic, but just a reminder. Install the tracking code here.
Before we configure the page speed part, we're just going to be sure you've configured the user tracking correctly. Might as well, since we're in here, right?
To do this, follow these simple three steps;
- Select "no"
- Check which users you do NOT want to track for traffic (I like just admin)
- Select "Remove" - this is the easiest method
The site speed portion. Its made so easy in this analytics plugin.
Just be sure its "enabled".
You might think that was easy, and this is an advanced guide. Now that we have the basics setup, let's add some more important features.
Set Sample Rate
Not many people know to do this, but you can set your sample rate. Normally, Google Analytics does not track a very large percentage of your site speed data (only 1% by default) — so if you have a small site, you could potentially be missing out on a lot of important data.
This gets installed before tracker initialization, so be sure to put it in the correct box.
Here's the code snippet (The Async snippet);
_gaq.push(['_setSiteSpeedSampleRate', 5]);
Notice the number ‘5'. This is the new sample rate — 5% of all visits. For a small site, that receives less than about 10,000 visits a month, feel free to crank that up to 50 or even 100, but only a reasonable amount to collect the data you need.
But please note, that if your site receives more than 10K hits a day, Google will automatically only collect a 1% sample.
It is also recommended to keep your sample size as low as possible but large enough to collect data.
Check Source Code
You should always check your source code to be sure its rendering correctly. (Remember, don't check it while logged in to WordPress, because as an admin you will be excluded from seeing the code).
You should see the Sample Rate code just above the Track Pageview code, as shown in the screenshot.
Setting Up Tracking In Non WordPress
This is a very similar process, but we're going to lay it all out specifically so you can see it.
Locate Your Google Analytics
Depending on how your custom site may be set up, you might have a .php file that handles the header (like in WordPress) or you may have static HTML files with the header in each file (in which case you will have to update every file).
Our example will have a header.php file.
Add Page Load Time Code
This is all pretty basic, but just make sure you have the page load time code added in analytics;
Your analytics will look like the following, with the page load code bolded;
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1589983-1']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackPageLoadTime']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' :
'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
Add Sample Rate Code
Next, we'll add the same sample rate code;
The code again is;
_gaq.push(['_setSiteSpeedSampleRate', 5]);
And you use the number (in this case 5) to control the percentage of the site being tracked for page speed.
Where To Find The Report
You will view this data by going to;
Content > Overview > Site Speed
Most people miss this next step! Go to "page timings" > and click on "technical"
This view gives you a breakdown of what's contributing to your site speed.
Test Your Analytics Setup
Finally, you can use the Analytics Chrome Plugin Debugger to test: https://chrome.google.com/webstore/detail/jnkmfdileelhofjcijamephohjechhna
That's it — have fun!
Using Yahoo's YSlow Plugin
Install YSlow
Go to http://yslow.org/
Install the YSlow plugin in your browser (pretty much anything besides Internet Explorer).
Open and Run YSlow
This is all pretty basic, but just make sure you have the page load time code added in analytics;
You'll notice there are three rulesets to choose from;
- YSlow (V2) - Runs the full set of 23 rules
- Classic (V1) - Runs the first 13 rules
- Small Site or Blog - Runs 14 rules that apply to small sites
I would use small site or blog only if you're getting less than about 10,000 visits a month. Otherwise use YSlow (V2) if you're getting over 10,000 visits a month.
Load the page you want to test. Hit "Run Test".
Reading The Results
Overall performance score - You should strive for an 85 (B).
Also, note that you can filter the report of the type of result.
As a strategy of prioritization, I would focus on the F's first.
Each error provides a short explanation and a link to read more information on the Yahoo Developer site.
Notice the first error returned in YSlow?
Make Fewer HTTP Requests:
- This page has 23 external Javascript scripts. Try combining them into one.
- This page has 7 external stylesheets. Try combining them into one.
- This page has 19 external background images. Try combining them with CSS sprites.
This is very common, and it is because the CSS and JS files are not optimized and minified.
Check out the section" Using LESS to optimize CSS" for how to improve these areas.
Let's tackle one of the easiest win areas: reducing large images.
Finding Large Images To Reduce
Large images are often the biggest culprit when it comes to slow site speed. I'm going to show you a few ways to find the worst offenders so you can take action and reduce them.
Google Image Search
That's right! You can find large images within Google image search. This is a quick method to catch any low hanging fruit.
Do A Site Search
site:quicksprout.com shows me all the images from my site Google has indexed;
Shut Off Safe Search
We want to be sure we're getting all the images in results.
Filter By Size
Start with a conservative number, and filter for images larger than 640x480.
Look at Results
When you're looking at results, see if you spot any images that end up as being "large" that you know shouldn't be. You know they're probably being resized in the CSS or HTML and should be reduced to the actual size you want.
Here are the results. This one image caught my attention;
And you can see when clicking on the photo, the actual size is much to large
This is a really quick method to find some really obvious ones. Let's do some approaches that work much better at scale.
Use Screaming Frog SEO Spider
We're going to use Screaming Frog to crawl a site and show us the largest images by file size.
Crawl The Site
If you haven't already, crawl the site you want to check.
-
Then view images
-
Filter by those over 100kb
-
Sort by size
-
Export to .csv
-
Use the spreadsheet as you track your progress to reducing images. You may have a lot of large images, and reducing them could take a few sessions!
Google Closure to Optimize for Speed
When you minify your JavaScript and turn it into a single file you increase the speed of your website because it's only one small download instead of many larger ones. This tutorial will help you install Google Closure Tool and minify all of your JavaScript.
-
Go to the Google Compiler closure website
The website is: http://code.google.com/p/closure-compiler/
-
Click on the download
The download is the link that says "compiler-latest.zip"
-
Open the ZIP file
-
On a Mac
Double click on the ZIP file. It will create a folder with the same name containing a "JAR" file.
-
-
Copy the JAR file to the folder where all your JavaScript is located
In this example, we dragged the compiler.jar file to the folder where our JavaScript is located.
-
Open a command line window
-
On a Mac
Go to your Finder, then open Applications > Utilities > Terminal
-
On a Windows
Click on Start, type in "command prompt", click on "command prompt"
-
-
Change to the folder where your JavaScript is located
-
On a Mac
Type in "~/" then the folder where your JavaScript files are located.
In this example, my JavaScript was in the home directory under a folder called code, then os2, then public, then javascripts.
-
On a Windows
Type in "cd \" then the folder where your JavaScript files are located.
-
-
Type in the Java command to create your minified JavaScript file
-
On both Windows and Mac
Type:
java -jar compiler.jar --js
jquery.js jquery_spinner.js --js_output_file output.js"Replace "jquery.js" and "jquery_spinner.js" with the names of the JavaScript files you want to minify. If order is important, type them in the correct order they need to go in.
Replace "
output.js"In this example, we compiled jquery.js and a plugin called "jquery_spinner."
-
-
Add the minified JavaScript file back into your project
In this example, we added line 8 to add the JavaScript back into this HTML file.
-
Finally, test your application to make sure everything is still running
Optimizing CSS and JS Files
In sections two and three we covered how to evaluate the performance of your site. Here we're going to cover an advanced way to optimize CSS and JS files, with "LESS".
LESS is a dynamic stylesheet language that creates CSS for you. The advantage of using LESS is that a LESS compiler will automatically make your CSS files smaller so they are faster to download for your users.
Download and Install Less Applications
Less has a free application you can download to compress your CSS files
For Macs
Go to http://incident57.com/less/ and download Less.App.
For Windows
Go to http://winless.org/ and download the WinLess application.
Open the Less Application
For Macs
Double click on the download and move the Less application to your applications folder.
Open the Folder Where your CSS Files are and Rename your CSS Files as ".less"
In this example, we took a Wordpress theme's CSS files and renamed them all with ".less".
-
Before
-
After
Drag the folder with your LESS files into the Less application
In this example, we're dragging the folder that contains the LESS files into the application:
Click on Compiler, then Compile All
This will create new CSS files that have been minified for faster downloads.
Less will Automatically Minify your LESS Files into CSS Files While it's Open
While the application is open, every time you change your less files, it will automatically update the minified CSS for you.
Your LESS files will look normal so you can still edit them:
But your minified CSS files will look like this:
In this example we shaved off 2k in file size. While it's only a small difference doing many small optimization tweaks will add up and give your users a much faster download.
Installing Google's MOD_SPEED for Apache
Installing Google's MOD_SPEED for Apache
If you are running your website on an Apache server and you have control over the configuration of the server at the module level, then you can install the MOD_PAGESPEED module for an easy speed boost.
Warning: Although this tutorial looks very advanced, it's relatively easy for someone with experience configuring Apache at the server level. However, doing this on your own with no experience may result in your whole website going down! You should know how to install Apache modules and configure your webserver from a command line. If you don't know how then you should leave this up to a professional web developer or system administrator who has experience.
For additional information about MOD_PAGESPEED see: https://developers.google.com/speed/docs/mod_pagespeed/using_mod
If you're using a Debian based server (such as Debian or Ubuntu)
-
SSH into your server
-
Download the mod-pagespeed .deb package
If your server is a 32-bit machine use this command:
wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_i386.debIf your server is a 64-bit machine use this command:
wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_amd64.deb
-
Install the .deb package
Type this into the command line:
dpkg -i mod-pagespeed-*.deb -
Correct any broken dependencies in place
Type this into the command line:
apt-get -f install
If you're using a RedHat based server (such as RedHat, Fedora, or CentOS)
-
SSH into your server
-
Download the mod-pagespeed .deb package
If your server is a 32-bit machine use this command:
wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_i386.rpmIf your server is a 64-bit machine use this command:
wget https://dl-ssl.google.com/dl/linux/direct/mod-pagespeed-beta_current_x86_64.rpm
-
Install "at" using the Yum package manager
Type this into the command line:
yum install at -
Correct any broken dependencies in place
Type this into the command line:
rpm -U mod-pagespeed-*.rpm
Configuring MOD_PAGESPEED
-
Open your Apache configuration file for editing
If you're using Ubuntu or Debian the file will be located in:
/etc/apache2/mods-availableIf you're using CentOS or Fedora or Redhat, the file will be located in:
/etc/httpd/conf.d -
Locate the pagespeed_module directives
They will be wrapped inside an IfModule directive.
Enabling or disabling the module per folder
Add the following line to any .htaccess file on your website:
- To turn ModPagespeed on:
ModPagespeed on - To turn ModPagespeed off:
ModPagespeed off
- To turn ModPagespeed on:
Browser Caching (Non-WordPress site)
Most of you are likely running WordPress sites, and we're going to cover some plugins you can use with WordPress to speed up performance.
But for some of you who may not be running WordPress, I still want to give you some technical info on optimizing for speed.
Here, we're going to cover some advanced things you can do within your .htaccess file to leverage browser caching. So when you see that warning within Google PageSpeed Online, you can use the following techniques to fix it.
Note: You should be a little comfortable editing your .htaccess file. Talk to your webmaster if you're not sure this is something you should be editing.
Log Into Your FTP Server and Backup Your .htaccess file
Use your FTP client of choice, or you can download and use FileZilla - http://filezilla-project.org/
I am sure you are familiar with how to log in via FTP, but in case you need a quick reminder;
- Host: website name
- Username
- Password
- Port: most cases you can leave this blank
Find Your .htaccess File
This is located in the root directory. Make sure you can see hidden files, otherwise you may not notice it.
Note: In some cases your site may not have an .htaccess file, so you can just create a new file. Start a new document in your text editor and name it .htaccess
Download and Backup the .htaccess File
Next, we're going to download the .htaccess file and save a backup so we can safely edit it, but restore it if there is a mistake.
In FileZilla you right click and download;
-
Photo Files
-
Turn RewriteEngine On
this should be the first thing in the .htaccess file
-
Add <file> wrapper tags
-
Add the file type(s) within the wrapper
-
Add the code which creates the caching and sets the max time to one week
-
Add the same code for other photo file types .png and .gif
We're setting the cache time for one week for photos. You should determine a reasonable time frame for your site, depending on how often the photos change and people visit.
-
-
CSS
Notice the code is basically the same, but we've chosen a different length of time for the css.
This will cache your CSS for one day. Again, this depends on how often you change your css files, and how often people return back to your site.
-
JavaScript
The code for javascript caching is also similar, but in this case we've set it to a month.
This will depend on how heavily your site requires Javascript and how often it changes.
-
Time Cheat-Sheet
Here's a few different time frames, since they are calculated in seconds;
- 5 minutes in seconds = 300
- 1 day in seconds = 86,400
- 1 week in seconds = 60,4800
- 1 month in seconds = 2,629,000
- 6 months in seconds = 15,774,000
- 1 year in seconds = 31,536,000 (basically ‘infinite')
As mentioned, you can mix and match the file types with time frames that make sense for your site. When in doubt, set your time frames a little shorter just to be safe!
If you've followed and implemented the tips in this section you should have one of the faster sites on the web! Next we're going to cover new and groundbreaking areas of search. You should be doing these things now to stay ahead of the competition.
