Blog

Speed is Everything (2)

28th July 2011

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.

  1. 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.
  2. 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.

Related Articles

camera
Using Photography on your Site

17th May 2016

There is no questioning how effective visual content is online and a photograph really can be a high value part of your site, but only if its presented properly and used in the right way. Most websites do not use online photography effectively and their images actually do more harm than done. Quality photography on […]

clock
Page Speed

20th April 2016

The time it takes a web page to load should an integral element of your website’s SEO strategy as it is now an increasingly important Google ranking factor. Page Speed matters from both a search engine perspective and from a user perspective, particularly on mobile and tablet. Having first announced in 2010 that page load […]

crystal-ball
Digital Crystal Ball for 2016

27th January 2016

Many of the digital trends we expect to see in 2016 are a development of the work Crush are already doing, but in the next 12 months the new developments will come into their own. There are also plenty of old constants too which can’t be forgotten and remain as important as ever. Below are […]