Site Speed & Performance

The Advanced
Guide to SEO

Chapter 02

By Neil Patel
and
Sujan Patel

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

Go to https://developers.google.com/pagespeed/

Run The Tool On Your Homepage

Measuring Your Site - Google PageSpeed #1

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;

Measuring Your Site - Google PageSpeed #2

You should focus on the high and medium priority items first. Click on each item to get the details.

Measuring Your Site - Google PageSpeed #3

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.

Measuring Your Site - Google PageSpeed #4

Test Your Site For MOBILE Site Speed

Click the "mobile" tab top right;

Measuring Your Site - Google PageSpeed #5

Remember to test your inner pages as well;

Measuring Your Site - Google PageSpeed #6

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:

  1. Tracking within WordPress
  2. Tracking within a Non WordPress site

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.

Track Page Load in Analytics - WordPress #1

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?

Track Page Load in Analytics - WordPress #2

To do this, follow these simple three steps;

  1. Select "no"
  2. Check which users you do NOT want to track for traffic (I like just admin)
  3. Select "Remove" - this is the easiest method

The site speed portion. Its made so easy in this analytics plugin.

Track Page Load in Analytics - WordPress #3

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.

Track Page Load in Analytics - WordPress #4

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

Track Page Load in Analytics - WordPress #5

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;

Track Page Load in Analytics #1

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;

Track Page Load in Analytics #2

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

Track Page Load in Analytics #3

Most people miss this next step! Go to "page timings" > and click on "technical"

Track Page Load in Analytics #4

This view gives you a breakdown of what's contributing to your site speed.

Track Page Load in Analytics #5

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

Using Yahoo's YSlow Plugin #1

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;

  1. YSlow (V2) - Runs the full set of 23 rules
  2. Classic (V1) - Runs the first 13 rules
  3. 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".

Using Yahoo's YSlow Plugin #2

Reading The Results

Overall performance score - You should strive for an 85 (B).

Using Yahoo's YSlow Plugin #3

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.

Using Yahoo's YSlow Plugin #4

Each error provides a short explanation and a link to read more information on the Yahoo Developer site.

Using Yahoo's YSlow Plugin #5

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.

Go To Google Image Search

images.google.com

Finding Large Images Reduce - Google Image Search #1

Do A Site Search

site:quicksprout.com shows me all the images from my site Google has indexed;

Finding Large Images Reduce - Google Image Search #2

Shut Off Safe Search

We want to be sure we're getting all the images in results.

Finding Large Images Reduce - Google Image Search #3

Filter By Size

Finding Large Images Reduce - Google Image Search #4

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

Finding Large Images Reduce - Google Image Search #5

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.

  1. Then view images

    Finding Large Images Reduce - Screaming Frog SEO Spider #1
  2. Filter by those over 100kb

    Finding Large Images Reduce - Screaming Frog SEO Spider #2
  3. Sort by size

    Finding Large Images Reduce - Screaming Frog SEO Spider #3
  4. Export to .csv

    Finding Large Images Reduce - Screaming Frog SEO Spider #4
  5. 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!

    Finding Large Images Reduce - Screaming Frog SEO Spider #5

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.

  1. Go to the Google Compiler closure website

    The website is: http://code.google.com/p/closure-compiler/

  2. Click on the download

    The download is the link that says "compiler-latest.zip"

    Google Closure to Optimize for Speed #1
  3. 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.

      Google Closure to Optimize for Speed #2
  4. 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.

    Google Closure to Optimize for Speed #3
  5. Open a command line window

    • On a Mac

      Go to your Finder, then open Applications > Utilities > Terminal

      Google Closure to Optimize for Speed #4
    • On a Windows

      Click on Start, type in "command prompt", click on "command prompt"

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

      Google Closure to Optimize for Speed #5
    • On a Windows

      Type in "cd \" then the folder where your JavaScript files are located.

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

      Google Closure to Optimize for Speed #6
  8. 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.

    Google Closure to Optimize for Speed #7
  9. 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.

Optimizing CSS and JS Files- LESS #1

For Windows

Go to http://winless.org/ and download the WinLess application.

Optimizing CSS and JS Files- LESS #2

Open the Less Application

For Macs

Double click on the download and move the Less application to your applications folder.

Optimizing CSS and JS Files- LESS #3

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

    Optimizing CSS and JS Files- LESS #4
  • After

    Optimizing CSS and JS Files- LESS #5

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:

Optimizing CSS and JS Files- LESS #6

Click on Compiler, then Compile All

This will create new CSS files that have been minified for faster downloads.

Optimizing CSS and JS Files- LESS #7

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.

Optimizing CSS and JS Files- LESS #8

Your LESS files will look normal so you can still edit them:

Optimizing CSS and JS Files- LESS #9

But your minified CSS files will look like this:

Optimizing CSS and JS Files- LESS #10

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)

  1. SSH into your server

  2. 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.deb

    If 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

    Installing Google's MOD_SPEED for Apache on Debian Based Server
  3. Install the .deb package

    Type this into the command line: dpkg -i mod-pagespeed-*.deb

  4. 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)

  1. SSH into your server

  2. 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.rpm

    If 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

    Installing Google's MOD_SPEED for Apache on Fedora Based Server
  3. Install "at" using the Yum package manager

    Type this into the command line: yum install at

  4. Correct any broken dependencies in place

    Type this into the command line: rpm -U mod-pagespeed-*.rpm

Configuring MOD_PAGESPEED

  1. Open your Apache configuration file for editing

    If you're using Ubuntu or Debian the file will be located in: /etc/apache2/mods-available

    If you're using CentOS or Fedora or Redhat, the file will be located in: /etc/httpd/conf.d

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

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
Browser Caching #1

Find Your .htaccess File

This is located in the root directory. Make sure you can see hidden files, otherwise you may not notice it.

Browser Caching #2

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;

Browser Caching #3
  • Photo Files

    1. Turn RewriteEngine On
      this should be the first thing in the .htaccess file

      Browser Caching #4
    2. Add <file> wrapper tags

      Browser Caching #5
    3. Add the file type(s) within the wrapper

      Browser Caching #6
    4. Add the code which creates the caching and sets the max time to one week

      Browser Caching #7
    5. Add the same code for other photo file types .png and .gif

      Browser Caching #8

    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.

    Browser Caching #9
  • 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.

    Browser Caching #10
  • 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.

Well done! You made it through chapter two! Are you ready for chapter three:
New Search?