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.
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.
- for CSS (YUI compressor, CSSTidy)
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.
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.