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