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.
- 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
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0 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
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/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:
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. 😉