Posts Tagged ‘speed optimization’

Page Loading Optimization using YSlow

Wednesday, November 12th, 2008

Making sure that your pages load as quickly as possible will help you keep your users.  Fast loading pages will also increase your audience as now you do not limit your users to those with high speed internet.  Loading times are usually not thought of by large corporations, in large cities that all of high speed connections.  There are a lot of rural visitors who may be not so lucky.

Enough about the importance of loading times; let’s get to the discussion on how to make our pages faster.  To debug why your page is taking so long to load, I suggest that you install the great firebug extension, which I talked about in my last post titled, “Firebug: A Developers Best Friend“.

Along with this install the YSlow firebug extension, as it breaks down how your page is loading and whether it is fully optimized.  Once installed, navigate to the page you want to debug and enter firebug, hit the YSlow tab, and then click on performance at the top.  YSlow will now begin loading the components of the website and gives you a performance grade.  The following are the important ones to look at, and will be described further in detail.

  1. Make fewer HTTP Requests
  2. Add an Expires Header
  3. Gzip components
  4. Put JS at the bottom
  5. Minify JS
  6. Configure ETags

Make fewer HTTP Requests

HTTP requests are made for each image, stylesheet, script, and flash within an HTML page.  Cutting down on the amount of these resources needed to load will speed up loading time.

One “practice” that has been thought up to reduce the requests made is to create CSS Sprites.  CSS Sprites is the idea that combining a bunch of images into just one image will reduce the number of trips to the server.  You can then use the CSS property of background-position to only allow the user to only see a part of the image that you want.  I found a great CSS sprite generator that does this for you and even spits out the background-positions you will need to use.

Another thing to keep in mind when you are designing your pages is to try and keep your fancy images to a minimum.  Try not to create separate images for your navigation, but instead create CSS navigation using the same background image for each link.

Add an Expires Header

Caching your pages is one of the most important things you can take time to control.  Caching is the process of your browser storing resources on your machine, so that when you come back to the same website it can used the cached resources instead of downloading new ones.

Of course caching can also be an annoyance, as when content is changed we sometimes still see the old content until we clear our cache.  This is the reason why you need to specify which resources you wish to cache.  You may want to cache images, stylesheets, and javascripts but not PHP pages.  PHP pages are dynamic in nature and show different content based on a number of factors.  Images on the other hand rarely change and thus make it great to cache.

The easiest way I find to cache these elements is to add the following to a .htaccess file:

ExpiresActive On
ExpiresByType image/jpg "access plus 2 years"
ExpiresByType image/jpeg "access plus 2 years"
ExpiresByType image/gif "access plus 2 years"
ExpiresByType text/javascript "access plus 2 years"
ExpiresByType text/css "access plus 2 years"

GZip Components

I am sure you have all heard of zip archives.  They offer a way to compress multiple files into a one smaller file.  GZip works in a similar way.  The way it works is you request a resource, the server compresses it, it passes it over the internet to your browser, and then the browser uncompresses the file and you don’t even know what just happened.

Enabling this aspect on your server can help wait times, and saves you bandwidth in the end.  In Apache GZip is controlled by mod_deflate.  Adding the following to your .htaccess file specifies some rules in which mod_deflate must follow:

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.pdf$ no-gzip dont-vary

Put JavaScripts at the bottom

Putting JavaScript at the bottom of your page will allow the page to load styles, and elements more quickly.  If your JavaScript is entered in the head tag, the page will load all this JavaScript before it gets to creating your HTML mark-up.  If JavaScript is placed at the bottom the user will at least see the website, and then JavaScript can be loaded as the user is already processing the content.

Minify JS

This topic is fairly self explanatory.  When white space/comments are stripped out, the client has less to download and thus speeds up the process of downloading.  The problem with this is that if you look at a minimized file you will get lost very easy.  No indenting and commenting makes for tough debugging.

There is a way to have the best of both worlds.  Install Minify! This is a PHP application that renders a JavaScript file and then outputs it in a minified way.  Changes made to the CSS file are immediate changed in the minified file and thus allows fast loading times, but the ability to easily make changes as well.

Configure ETags

This is probably the most obscure point that YSlow has.  Most people have no idea what ETags really means.  Adding the following to the .htaccess keeps YSlow happy:

FileETag None

Tags: ,
Posted in Web Programming | No Comments »

 
connect with me!