On Tuesday we discussed the problem of page load time. Today we look at the practical solutions developers can take to ensure a speedy loading.
Combined files: The lower the number of HTTP requests the better so try to combine css stylesheets, javascripts into one file. This saves time in first three actions of an HTTP request call and will reduce the file size compared to the sum of the individual files.
Image Sprites: This reduces the number of images that need to be downloaded by combining them into one; so the browser only sends one request for one file. Again, the file size of this one file is smaller than the sum of the individual images. By making one big image from all the small images and using CSS property background-position, you are able to display a part of the image on each web page.
Expires Headers: Headers are the values that are sent when a request is made. Expires Header describes how long each particular component (image, scripts, styles etc) are stored in the browser cache; which is vital to stop files already in cache being downloaded again. On Apache you can edit Expires Headers by accessing ‘modifying.htaccess’ file.
Gzipping Components: This is the most useful performance advice as it requires no coding, just a server configuration. Enabling gzip compression reduces the size of an HTTP response, as data is encoded before sending to browser, reducing the size by up to 70%. It is a great way to compress text, images, js, css, xml, jason and more.
Minifying JavaScript and CSS: Minification wil help reduce the size of javascript and css files, by removing unnecessary characters from the code. We recommend these tools:
- for CSS (YUI compressor, CSSTidy)
- for JavaScript (YUICompressor, JSMin)
Optimising Images: Proper optimisation of images can save 40-50% of the total page weight. Use the rules below to achieve the best optimisation:
- every GIF needs to be transformed into PNG8 – it can store up to 256 colours (like GIF) and also supports full alpha transparency
- use Progressive JPEG, which loads from low quality to high in several ‘passes’
- run optimisation tools on images – like PNGCrush, jpegtran or Smush.it
Parallel downloads: There are two key rules that will help your site load faster with parallel downloads.
- Put CSS stylesheets in the HEAD tag. This allows your browser to render the page progressively. It will not block any other process and the browser will not have to redraw the element.
- Put all JavaScript at the bottom of BODY tag, so they do not block parallel download of other elements.
Not using redirects or ETags will also help increase speed, as will minimising the number of iframes on the site. Remember: page loading time is still very important in both web development and page rank. Technology will keep getting faster, but the simple rules still apply.
