Just how many times have you clicked onto Google to find something, clicked on a result and be faced with page that hangs while it loads? Did you wait patiently or did you move on and try another site? Slow site performance could be costing your site a lot of search traffic. After clicking on your site’s link in a search result, many visitors may just turn around and look elsewhere if a page is taking too long to appear. I know I do.
Google is constantly checking your site’s performance and all indications point to this being a ranking factor in future. This was reported a late last year by WebProNews, after an interview with the venerable Matt Cutts from the Google team.
By their own admission Google is all about the ”user experience”, with their prime SEO mantra being; “make websites for users, not for the search engines”. And page load time is one if the most important user experience issues that you’ll encounter when browsing the web. Google wants to serve it’s users with they what they want. Do they want slow page websites at the top of their search results? or do they want a page that loads instantly and gives them the information they’re seeking straight away. Obviously, the latter.
It’s a well known “statistic” that if a web page does not load in less than 3 seconds a user will ”bounce” from the site, return to the search results and probably pick one of your competitors. Which begs the question: how can you speed up a slow site?
Examine your site’s performance
First off, you should analyze all information available about how your pages load using some readily available tools. As a good SEO or webmaster you’ve probably already signed up for Google’s Webmaster Tools. A recently added feature is the “Site Performance” section, which is found under the “Labs” menu item.
This will give you a general indication of whether Google sees your site as being fast or slow, and provides a few tips on how your pages can be improved for speed. You can also see over time how your work in improving web site speed is taking effect.
For a more immediate read-out of a webpage’s performance I also use the Yahoo YSlow plugin for Firebug (a Firefox plug-in). YSlow can be run on a live page that you are viewing and gives instant (depending on page load time of course), feedback on what areas you can address to improve load time on your website. It will also give you an indication of the “emtpy cache” (first time visitor) and “primed cache” (repeat visitor) performance.
For an advanced metric of page load time, Google Analytics can be configured to record a page load time metric and gives a reasonable representation of the issue from the user perspective. Analytics can be made to track the load time based on internet connection speed in so giving a broad indication of your site’s performance.
Enable GZip Compression
All modern browsers support webpage GZip compression and are able to decompress the data sent from your server. The less data that is transferred for each page, the less time it takes for a page to load in a browser. For those site owners who have a restriction on the amount of traffic with their host, GZip compression will reduce the amount of data that you have to serve.
You can use a GZip compression test to check if your pages are currently compressed and if not, this tool will estimate of the size of savings to expect. If GZip compression is enabled, the actual % of data saved during compression is shown. This tool can also test CSS and JS files.
Apache and Microsoft IIS web servers both support GZip, and quick and dirty instructions for enabling GZip compression is shown below:
Apache Server
The module that deals with GZip compression on an Apache server is “mod_deflate”. Create an “info.php” file and add the code <?php phpinfo() ?>, upload to your server and browse “/info.php” to get a readout of the Apache modules installed. If mod_deflate is loaded on your webserver then the following .htaccess declaration will enable GZip for a lot of file types.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/javascript application/x-javascript application/x-httpd-php application/rss+xml application/atom_xml
</IfModule>
If mod_deflate can’t be loaded by your host or server admin (it requires a core recompile for installation) then the following .htaccess declaration will enable GZip compression for php files only. The “gzhandler” is not as efficient at compressing data than “mod_deflate”, so will be marginally slower and the savings will me slightly less but for most sites will suffice.
php_value output_handler ob_gzhandler
If your pages are .htm or .html (as opposed to .php) add the following lines at the top of your .htaccess to get Apache to parse those files as .php so that they will be compressed.
RemoveHandler .html .htm
AddType application/x-httpd-php .php .htm .html
Microsoft IIS
If you’re running a Microsoft IIS server, the following document will explain how compression can be activated: http://g.www.ms.akadns.net/technet/prodtechnol/WindowsServer2003/Library/IIS/25d2170b-09c0-45fd-8da4-898cf9a7d568.mspx?mfr=true
Reduce Image Size
These days websites are very graphicy, with most sites having appealing header images, product images and so forth. Unfortunately the more graphics on a site, the more data needs to be sent to the user’s browser leading to longer load times. This is especially an issue for first time visitors who don’t have the images cached.
Most competent web designers keep this in mind and will try to maximize the Jpeg compression versus the image quality to speed up page loading. But there are some cool tools out there that can further improve things like this. Even using gif’s and png’s instead of jpegs will make a difference as they tend to use less k’s is size.
One of the most useful image tools that we use is SmushIt (found in the YSlow plugin that is mentioned earlier in this post). SmushIt is able to examine the images on a web page and compress them even further with no noticeable degradation in image quality. Smushing your header and background images is a must, and the data savings are often surprising.
One of the big no-no’s that we often come across is using the browsers image scaling to fit a large image into a small space. We often find this is the case in product catalogs, when a large product image is used for the shingle thumbnail on the category listing pages. In this case, use a small thumbnail in the shingle instead of scaling.
For all other cases browser image scaling should be avoided, as the web browser is slow at scaling, not to mention the extra time spent downloading the large image. Always ensure images are scaled to the correct size before use on your pages, and you’ll notice an improvement in load time.
If your website template uses a lot of background images, header images and image buttons then the number of HTTP requests for a webpage will be quite high. Each request takes time and can slow down a page. To reduce this delay combine these template images into a CSS sprite image. This is basically one “big” image that contains all of your template images and using CSS classes you can pick out the correct part of this image that you need for each of the graphic elements on the page.
CSS and JavaScript Code
There are a few strategies for improving CSS and JavaScript file load time. At a minimum you should externalize all CSS and JS files so that they can be cached by the users browser. In addition, if you have more that one CSS or JS include file, combine all the CSS includes into one file, do the same with the JS includes, and this will reduce http requests. For the hardcore guys out there, try to Minify the CSS/JavaScript which will remove unnecessary white-space and line-breaks. Minify can be also found in the YSlow plugin for Firebug. And no, I don’t sell Firebug or Yslow (based on how many times I’ve mentioned it) – it’s just a cool plug in.
Reduce the amount of database calls in your application
A lot of websites out there rely on an SQL database to store information that is shown to your users. If your site runs a product catalog or a CMS systems then the odds are that a database is involved. Every time a page is requested by a browser, the database is queried for the information that the user will see on the page. This back and forth takes time and can be a bottleneck.
To speed things up, only run the minimum database queries that are required and only request the actual table fields from the database that you need. Avoid “SELECT * FROM” in your SQL queries. Optimizing things in this way can get quite quite knarly, so be prepared for a lot of hard work. For large sites that get a lot of traffic this can help in page load time tremendously and is worth the effort.
Wordpress
Wordpress is the most popular blogging software out there, and due to it’s flexibility is increasingly being used as a CMS system. Wordpress uses an SQL database to store all your posts and pages.
Hundreds of “plug-ins” are available for Wordpress to help customize it in countless ways. Unfortunately the more plugins that you install, the slower Wordpress becomes. The less plugins that are activated the faster your Wordpress blog will be. You should also go as far as removing all unactivated wordpress plugins from your “plugin” directory.
A useful addition to Wordpress are “Widgets”, which allow for “real time updated” areas within your template. There are Widgets available to show latest posts, most popular posts, dynamic menus and much more. The problem is that each one of these widgets will poll the database to get the information required, thus increasing the load time of the page. Try to reduce the number of widgets that you use and if a widget is showing content that doesn’t change too often, try to hardcode the HTML with what the widget would display.
Summary
There are many more things to look at to speed up a website and those listed above are the areas that I initially tend to look at for my search engine optimisation clients. Depending on the size of a site and the amount of traffic it gets, even the simplest change can have a significant effect.
If there are any other ways you have found to speed up a site, I’d love to know of your experiences.
