Making sure that your visitors can view your site as fast as possible is of vital importance to any website. It not only affects the average time a user stays on your site and their return rate, but also your site’s perceived credibility. All of these factors influence the revenue your site can generate. A fast site not only gives a better user experience, but also appears more professional and of a higher quality. Page response time and load time are also two of the quality factors that influence your Google search ranking. Website optimization is the science at play here.
Starting Website Optimization
Before you start to optimize your site, you need a way to measure your site’s current performance so that you can quantify any improvements. A convenient way to get this information is to run your site through Pingdom Full page test.* This tool does a quick visual benchmark of the load time of all components on your site. It gives you a grasp of which components you may need to optimize. Be sure to save the information for later reference.
A less graphical but more detailed report on your site performance can be obtained using the Web Page Analyzer.* This is an excellent tool that analyzes a webpage and gives recommendations for decreasing its load time.
The following two Firefox plugins will be of immense help as you optimize your site.
Firebug – Provides debugging abilities for Firefox.
YSlow – Integrates with Firebug to add performance analyzing functionality.
With these plug-ins installed, navigate to the page you want to analyze. Next, click on the YSlow icon on the status bar to bring up the YSlow tab of the Firebug window.
From there, click the Run Test button to make an instant performance analysis of your website. This will show you where your site is slow and what you can do to improve it.
Look through all of the performance categories, even the ones you already have an “A” grade in, to learn in what areas you may be able to optimize. For each category there is a link to Yahoo’s Performance Rules§ that further describes how you may implement the optimizations.
YSlow will give your site an overall performance score from 0-100. It is recommended that you bring your site up to at least 80.
YSlow includes three more tabs—components, statistics and tools—that you should examine as well. In particular, the statistics tab can provide some useful data.
For more information about YSlow, take a look at the YSlow user guide.* Another Firebug extension similar to YSlow is Google’s Page Speed plugin. It will give you Google’s perspective on what makes a high performance website and is definitely worth testing out.
Note Page Speed – Adds performance analyzing functionality to Firebug, similar to YSlow.
Reducing the size of the XHTML document that makes up a web page can significantly improve a page’s load time, overall help with website optimization. As seen in your Pingdom benchmark, the XHTML document needs to be fully downloaded before the browser can start downloading the other components.
A good guideline is that the page size, excluding the components, should not be more than 50kb if possible. To reduce the size of all your pages, you can try to shave off redundant HTML elements from within your CMS template code. You may also want to split content across multiple pages for very large documents.
W3 Total Cache
One of the best techniques for speeding up a WordPress site is to install the W3 Total Cache plugin. While there are a great many plug-ins related to WordPress performance, this is the only one you really need. It includes page caching, database caching, minification, http compression, and transparent CDN integration—each of which will be explained later in this chapter.
W3 Total Cache – This WP plug-in improves overall site performance.
With this plug-in fully configured and running, there are few remaining optimizations you need to make for your site. Techniques such as reducing the total number of database queries and executed PHP code become unnecessary when you are providing static cached pages to the visitors.
Most CMSs—including WordPress—run on PHP, which is an interpreted programming language. This means that, any time a visitor arrives at such a site, the server has to compile the requested PHP files, execute database queries, and finally send the compiled HTML file to the end user. Because of this, commonly mentioned website optimization techniques for Wordpress Sites include:
Replacing PHP code with static HTML.
Reducing the number of database queries.
Removing or disabling plug-ins.
While such changes can significantly improve performance on an uncached WordPress site, they have no effect on a site cached with, for example, W3 Total Cache. On such a site visitors will instead be served precompiled cached HTML files. It is in fact preferable to keep your WordPress template files dynamic with PHP and database queries, in order to make the site easier to modify. You then get the best of both worlds: the speed of static HTML files and the modifiability of dynamic PHP.
Content Delivery Network
CDN service providers include, for example, Amazon Cloudfront, Akamai Technologies, Mirror Image Internet, and Limelight Networks. Their services are not free, but as your number of visitors grow larger, a CDN becomes necessary to achieve fast response times.
This website optimization is performed automatically by W3 Total Cache and it can be configured under the Browser Cache Settings page. Keep in mind that if you use a far future expiration date you normally have to change the component’s file name whenever it is modified in order to ensure consistency across all visitors. With W3 Total Cache installed, however, this will be done automatically for you whenever you update a cached component.
The tradeoff with gzipping components is an increased server CPU-load. Usually, this is a good tradeoff, given the speed of compression. It is also possible to store gzipped static components and to send over the pre-compressed versions. This is done by default by W3 Total Cache for cached text-based files.
Minimize HTTP Requests
One of the largest factors influencing the page load time is the number of components that are present on that page. Components include everything that requires an extra HTTP request, after the page has been fetched when the visitor’s cache is empty.
Examples of components include images, videos, style sheets, scripts, and Flash. There is an inherent overhead in each HTTP request. Therefore, reducing the number of separate components required to render a page will improve its performance for first-time visitors.
Split Components across Domains
In order to maximize the number of active download threads, the components can be split across multiple domains.However, because there is a penalty for the DNS to map an IP address from a given hostname, using a separate domain for every component is not a good idea either. It is recommended to use at least two but no more than four domains for optimal performance. This gives a good compromise between reducing DNS lookups and increasing the number of parallel downloads.
By preloading components you can take advantage of the time the browser is idle and request components that the visitor is likely to need in the future. This way, when the user visits the next page, you could have most of the components already in the cache and thereby allow the page to load much faster.
Another way of preloading components is by using the HTML tag. This tag, when added to a page, provides a set of prefetching hints to the browser. After the browser is finished loading the page and is idle, it will begin silently prefetching the specified documents and storing them in its cache. This link prefetching is currently only supported by Firefox. However, since Firefox is the second most popular web browser, you can noticeably decrease load times for a large percentage of your visitors just by adding one line of code to your HTML markup. For prefetching purposes, the Firefox browser looks for an HTML tag with a relation type of either “next” or “prefetch.” An example of using the tag to prefetch a web page would look like this:
Link prefetching can also be used for static components, such as images.
WordPress sites include a link tag by default to prefetch the next post.
CSS sprites are the preferred method for reducing the number of HTTP requests for images. A sprite is an image made up of several smaller images. Using the CSS background-image and background-position properties, you can display the desired image segment from this sprite. For more information you can read about CSS sprites on CSS-Tricks.com.
CSS on Top
Placing your site’s stylesheet within the element of the document makes pages appear to load faster. This is because it allows the browser to render the page progressively. The browser will display whatever content it has as soon as it can, which gives the visitor visual feedback and improves the overall user experience.
One optimization that minification tools are unable to do is to find and remove unused CSS rules. A useful Firefox plugin that can help you perform this task is Dust-Me Selectors. This plug-in can both test pages individually and scan through an entire site in search of unused selectors.
Note Dust-Me Selectors – A Firefox plugin that finds unused CSS selectors.
Reducing Download Iterations
Web browsers will not begin fetching a CSS background image until they know for sure that it will be used. Therefore, you need to actually use the CSS rule in the document for this optimization to work. This is the reason why the prefetched images are hidden from view by being moved off the screen. In the code above, the id selector† is used, so by applying that selector to the body tag, the images will be prefetched.
With this optimization in place, the page previously benchmarked will be able to load in only two download iterations.
Graphics and photos often constitute a significant amount of the page size, so optimizing them should be a high priority. The three image formats supported by all browsers are jpg, gif, and png. These formats have the following properties:
For photographic images (continuous tones), the jpg format produces the smallest file size. When saving the file, you can also reduce the size further by selecting a lower quality. For graphics (solid color images), the png format gives file sizes smaller than jpeg and in most cases smaller than gif. Basically, png is an excellent substitute for gif that was built to handle the same types of graphics better and faster.
Another important aspect to image optimization is the image dimensions. Typically, you should not scale the width and height of an image down in HTML. This makes the image appear jagged and gives an unnecessarily large download size for the end user. However, it is recommended to include the width and height attributes of the element, in order to state the image’s actual dimensions. This allows the browser to reserve space for the image and to render it faster once it has finished downloading.
To make an image appear to load faster, it can be saved as either “interlaced” (gif/png) or with “progressive loading” (jpg) format. Browsers will then start to draw the image before it is fully loaded. This improves the user experience at the cost of a slightly larger file size. It is most useful for large images that appear above the fold.
A final optimizing technique is to remove unnecessary bytes without changing the visual quality of the image. A useful online tool for this purpose is Smushit.*
Are you satisfied with your optimizations? Then it is time to test your site. See if it can outperform your competitors’ sites with Pingdom.† You can also sign up for a free account with Pingdom to be able to monitor the page response time from various locations around the world.