Google has frequently highlighted the importance and benefit of fast and responsive websites. The underlying principal is that a website that loads quickly will be more enjoyable to navigate, and allow quicker determination of relevancy and quality. But how do you optimize speed?

While there are many different things that affect the overall performance of a website, the following is a good summary of the main tasks.

  • Optimizing caching – reducing from the beginning what will need to be requested or loaded remotely
  • Minimizing round-trip times – take advantage of concurrent/simultaneous transfers where possible
  • Minimizing request overhead – such as cookie-less domains for static public ressources (css, js, images etc)
  • Minimizing payload size – compression and minification of css, js and images and removal of unnecessary resources
  • Optimizing browser rendering – use efficient CSS and HTML markup.
  • Optimizing for mobile – consideration of the display and network environments for mobile handsets and smartphones.
Average Page Speed data in Google Webmaster Tools

Items from above that should be targeted aggressively and that can yield great improvements would be the minimizing of round-trip times and payload sizes. Essentially, this would be achieved by offloading static resources to a sub-domain or CDN to take advantage or parallelization and concurrent connections, appropriate image formats and compression levels for image resources, minification of CSS and JS files, and correct assignment of images as either background/design elements or content as this affects when they are loaded (ie. before or after the DOM Ready event).

Offloading of Static Resources

Using a CDN for static content or even a simple sub-domain allows browsers to create additional concurrent connections. The default for many browsers is to create no more than 4 connections to a single host. If you have 8 images to download on a page, serving 4 from one host, and 4 from another could reduce the total time required for download by at least 20% and as much as 50%.

A knock-on effect of using a CDN for content is that the content is served from a point closer to the browser (faster response times), in addition to reducing the load on the website’s main server which also helps increase responsiveness. The ease of implementation for modern CDN solutions makes this setup increasingly affordable and possible for websites or businesses of any size or type.

Correct Image Formats and Compression

The 3 main formats for graphics on the web are GIF, JPG and PNG. Each have their strengths and should be used where required.


GIF files are “indexed” image files consisting of a specified palette of colors including a transparent pixel. Small and non-complex imagery is generally suited to the GIF format and will yield the smallest filesize. For images less than 100 pixels and not requiring an alpha channel or transparent layer, GIFs would generally be preferred.


JPG is the standard format to use for most images of average or high color complexity due to its ability to compress in a lossy manner using algorithms as opposed to specific pixel-based colors. It is however highly important to use good image software and to use the appropriate level of compression with JPEG, otherwise images could be 3 or 4 times the size they need to be.


PNG is the best all-round format to use for images both large & small as it allows indexed palettes, alpha channels and transparency etc – however if used incorrectly, will result in the largest filesizes. PNG should not be used for large images (> 200 pixels) in 24-bit mode if alpha transparency is not required and if the image can be saved with some level of ‘lossy’ compression.

Minification of CSS and JavaScript

CSS and Javascript files contain a lot of whitespace, punctuation and characters that can be removed or reduced as they only exist to make the text human-readable and understandable. When the files are used in production however and are not being edited or modified – Minification is used to ‘squeeze’ the filesize down. Obfuscation is also used in JavaScript to provide some level of protection for the source code to hinder casual reverse-engineering and modifications. Minified files are generally labelled using .min.css or .min.js as standard. JavaScript can often be reduced in size by approximately 25%-40%.

Many tools are available to minify files prior to upload. For OSX, the Smaller application is great to use, for Linux commandline, the YUI Compressor script is available and very effective.

Background or Inline Images

Often neglected is the correct use of image resources. Many images get used as background-image and many as inline (<img>), however which method is used actually affects when the images are loaded and therefore affects the sequence of loading of many other resources and page events. Images that are considered content or provide meaning/information should generally be loaded inline using <img> and therefore would load before the DOM Ready event fires.

Images loaded as background-image in CSS, as well as inline javascript within the <body> section and Javascript loaded in the header that is attached to the DOM Ready event will all trigger after the DOM Ready event and as such will wait until all inline images and resources are loaded.

Another difference between images used as inline or background is how they are handled by search engines. Inline images will be indexed by search engines and Google Images but background images will not. Inline images can also have text-equivalent content attached to them via the ‘alt’ parameter, whereas background does not.

To optimize the loading speed of pages and to ensure the actual loading process is both visually smooth and elegant – correct and efficient use of the techniques I’ve outlined above should help immensely.

One Response to Page Speed And Reducing Load Times

  1. Matt Sharp says:

    Great and valuable information . I will try to apply this , firstly to my blog , and then if it really works I will use it for the big site . If you’re predictions are correct , and I don’t doubt that this should help my site run smoother in an obvious way . I expect results , my thanks 

Leave a Reply

Your email address will not be published. Required fields are marked *

Hire a Web Developer

Call Us at (212) 400-7632 or email
Set your Twitter account name in your settings to use the TwitterBar Section.