Is Site Speed Important?

We oftentimes have conversations with our clients about their website speed and, invariably, this question pops up: Is my website speed really that important? Let me lay to rest this question and answer it once and for all…

YES! Period. Full stop.

In recent months, we have seen a remarkable correlation between our clients’ website speed and their rankings within a Google search. Both moz.com (a premier SEO research company) and Matt Cutts, the guy who is basically in charge of Google’s search algorithm, have published articles on the importance of site speed. (The Cutts article is a little bit dated but please be assured that site speed is even more heavily weighted currently than it was when Mr. Cutts published that piece.)

Site speed is important; you should pay attention to it; here are my insider tricks to help turbocharge your website. First, though…

What Factors Affect Website Speed?

There are a bevy of factors that can slow your website. If you use Google’s Page Speed tool it will oftentimes report some or all of the following problems. My own explanations follow.

  • Enable compression — Instructing your web server to zip up (compress) the website code before sending it actually makes your site faster since fewer bytes have to traverse the internet. Your web browser will unzip this information to display it on the screen.
  • Leverage browser caching — Oftentimes people visit the same page on your site multiple times. On many pages the information hasn’t changed between visits. Therefore it helps site speed to store a copy of the webpage on the user’s computer. This way the web server doesn’t have to send a new copy every time the user re-visits a page.
  • Minify JavaScript / CSS / HTML — To “minify” means to remove all unnecessary white space in a file–that would be spacebar characters, tab characters, line breaks, and the like. Humans use whitespace to better be able to read the code. Computers couldn’t care less. Removing the whitespace saves bytes transmitted thereby reducing load time.
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content — Sometimes the CSS and Javascript in your pages can prevent the rest of the page from displaying. If you move the unnecessary code to a separate file that is loaded after the full page loads, the content displays more quickly and visitors (and Google) are usually a lot happier.
  • Optimize images — Don’t use images that are larger than necessary for the task at hand. Large high resolution images are pretty but if they’re only going to be displayed in a very small window then there’s no need to use the large file.
  • Reduce server response time — This one factor could be the topic of a novel. Suffice to say that it’s long, in depth, and complicated. We won’t be discussing it in this article but the gist is, if you make the server itself faster, the websites will load faster.

How To Improve Website Speed

(NOTE:  Our office primarily uses and supports Linux-based Apache web servers running WordPress and / or straight HTML / PHP.  Therefore these suggestions will be focused on those tools.)

Now to the nitty gritty… If your website is built on the WordPress platform then you’re in luck. I recommend the plugin W3 Total Cache as a one-stop-shop for most of your performance improvement needs. With W3TC you can accomplish the top four of the six factors above just by adjusting the settings within the plugin. (Unfortunately W3TC cannot optimize your images for you nor can it reduce your server’s response time.) As a bonus, this plugin will also allow you to publish your site to a Content Delivery Network (CDN) to even further increase your site speed. (CloudFlare is one CDN that offers free service in certain situations. Others require a nominal monthly fee.)

Other content platforms (e.g. Drupal, Joomla, etc.) have their own types of modules that can accomplish this same thing. Since we work primarily with WordPress I’m afraid I have no experience with those platforms. I’m sure a Google search will turn up a wealth of information, though.

If your site is built upon standard HTML or PHP then you will have to do a little bit more hand-coding. Below are snippits that you can insert into your .htaccess file to accomplish the listed tasks.

How to Enable Compression:

# BEGIN gzip and deflate
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip
Header append Vary User-Agent env=!dont-vary
# END gzip and deflate

How to Enable Browser Caching:

# BEGIN Browser Cache Instructions for Improved Page Speed
ExpiresActive On
ExpiresDefault “access plus 1 seconds”
ExpiresByType image/jpeg “access plus 2592000 seconds”
ExpiresByType image/png “access plus 2592000 seconds”
ExpiresByType image/gif “access plus 2592000 seconds”
ExpiresByType text/css “access plus 604800 seconds”
ExpiresByType text/javascript “access plus 604800 seconds”
ExpiresByType application/javascript “access plus 604800 seconds”
ExpiresByType text/html “access plus 2592000 seconds”
# END Browser Cache Instructions for Improved Page Speed

How to Minify Code:

Minifying code is best done with an external tool. I suppose you could do it by hand but it’s a job that’s much better suited to a machine. After you’ve completed writing and testing your site code, head over to a place like compressmycode.com to minify each of the individual pages & scripts.

How to Eliminate Render-Blocking Code:

This is where we start to get into more technical and intricate problems and solutions. The general concept here is that you want to load the very smallest amount of data possible to have the page start displaying the “above the fold” content (i.e. the information in the screen area that the user sees first before scrolling down–the top of the page). To do this properly, you need to take note of exactly what Javascript and CSS elements are required to render the top of the page and separate those from the code for the below the fold content. You will create two files–one for the top of the page and the other for the bottom. You will then load these only as needed to render the page. Scott Hanselman has a nice tutorial which walks you through this process. The downside of Scott’s article is that it’s written for Microsoft IIS servers but the upside is that it combines instructions for minifying your code as well as splitting up the JS and CSS files. I also recommend Patrick Sexton’s article on how to defer loading of Javascript. Good stuff there too.

How to Optimize Images:

Optimizing your images takes two distinct paths. You must consider both the footprint of the image–how tall and wide the image is–as well as the file type and compression. I will let inObscuro tell you about file type and compression. If I were to do it I would take up another 1,400 words and Nela has already done a very nice job. As for image footprint, it is a logical conclusion that if you have an original image that is (for example) 3,000 x 1,000 pixels but you are going to display it on screen in a space that is only 300 x 100, then all of those extra pixels are not necessary and just add unnecessary weight to the image. Before you follow Nela’s tutorial linked above, resize all of your images to the exact dimensions required to fit the space that you need. If you have a need to display a large image such as might be the case with an ecommerce store, it would be best to duplicate the image and have both a large and a small version. The small version could load with the page and the large version could load only when the user clicks to see more detail. Best of both worlds!

Wrapping it All Up

As you have probably figured out by this point, each of these topics could be its own blog post. There is so much information and each point is so complex that it would behoove you to do a little more research on the topics that are particularly giving you trouble. If there is one thing that you take away from this article, let it be that site speed is crucially important to rankings and those webmasters that ignore site speed do so at their own peril.

If you’ve got other suggestions, corrections, or better ways to accomplish these tasks, let’s hear them in the comments! Thanks for sticking with me to the end. 😉

Jerod Karam

Jerod Karam is Director of Technology at Netvantage Marketing, an online marketing company specializing in SEO, PPC and social media. Jerod consults with internal and external clients on all matters technical and is responsible for most of the technical work and custom online tools the company uses.