How to reduce web page file size

Google is placing more importance on page loading times, so it’s important to make your site load fast. Of course, this has the very important benefit of making the site better for your visitors! So what steps do you need to do in order to achieve this, and what are realistic targets?

You may be thinking ‘why should I bother – everyone has broadband now, right?’ Wrong. Many people are connecting via 3G either at home or on a mobile device, which, while faster than dialup is nowhere near the speed of ADSL. Not only that, if the signal strength is weak then it may be closer to dialup speeds than you/they realise. Therefore a fast and responsive site is likely to keep their interest.

Let’s start by breaking down the areas that you need to concentrate on:

  • HTML file size
  • CSS file size
  • JavaScript file size
  • Image sizes
  • Server-side compression

When a web page is called it starts by loading the HTML. As the browser parses the page it will call all of the files listed, such as style sheets (CSS) scripts (JavaScript) and images – the more files and the larger they are, the longer the final page will take to render. The design of the site can also play a major part in this page loading time. If you are using tables to lay out the site structure then the page cannot be displayed until the last part of the table has loaded. Loading large JavaScript libraries and Flash video will also have an overhead, especially if the user has an older PC. And then there is the issue of browser compatibility to content with – many web designers have (thankfully) written off the problematic Internet Explorer 6 as now defunct, given that it was released way back in 2000, but there are still significant differences between the current crop of browsers to give designers a headache!

There are plenty of free tools available, such as the Page Speed plugin for Chrome or websiteoptimization.com, which will provide a breakdown of all of the elements of your page and give suggestions on what you can do to improve performance.

HTML File Size

This goes hand in hand with CSS, as you can radically reduce the size of your HTML page through effective use of CSS. Firstly, ensure that any CSS that might be included in the head section of the  HTML page is moved to a separate CSS file. Browsers cache all files that are loaded, which means once it’s loaded for the first page it will stored on the user’s PC ready for the next page. If your CSS is around 10kb then that’s already removed a 10kb overhead from every other page on your site that might rely on the same file.

The same applies to JavaScript – move it all to a single, separate file. Remember, we are trying to minimise the number of files called, as well as minimising the size of each file. While the JavaScript file itself may be quite large, especially if you are including libraries such as jQuery, it’ll be cached, so will remove the overhead from subsequent pages.

Comments, also known as remarks, are often used to separate and explain code during the design phase, but only serve to bloat out the page once the site goes live. Unless you really need the comments delete them. The same can also be said for whitespace, although you can sometimes perform whitespace removal automatically on your server, depending on whether you are using a scripting language or not. If you have a 10kb file it’s quite possible that 5% -10% of this will be whitespace that can be safely removed, but in doing so it will make the page more difficult to read from a programming perspective.

If you are going for a really deep cleansing of your site size then evaluate how the page is physically designed. We mentioned tables earlier – they can add considerable size to a complex multi-column layout and can take time to render. With CSS styles you can end up with a series of DIV tags that not only load fast but may often offer better cross browser compatibility, especially when using separate styles for mobile devices. A great example of how CSS can drastically change the look of a web page is the fantastic ‘CSS Zen Garden’ website and book – there are hundreds of examples of how different CSS files are used against the same HTML file to startling effect.

Compression

Probably the easiest way to get a quick hit performance boost is to enable compression on your web server. There are a variety of ways of doing this, depending on whether you are running a Linux or Windows server, and whether you are taking advantage of a scripting language such as PHP. Firstly, find out what server and scripting language are available. The main ways of enabling compression are:

  • On a Windows server (IIS7) you can enable page compression within the IIS control panel
  • On a Linux server without PHP you can use the .htaccess file to enable GZIP compression
  • On a Linux server with PHP you can add a PHP command to your page to compress

Your ISP can often give advice on this area. You can test whether your server is currently using GZIP compression using the Online GZIP test on the GID Network website at http://www.gidnetwork.com/tools/gzip-test.php.

Compression can give a massive boost to a page’s download time – often around 80%. It can be applied to any text based file, so this covers HTML, CSS and JavaScript files, but does not apply to images.

CSS file size

If you are working on a site that is relatively old, chances are that it contains a lot of redundant CSS code. Look at each class and/or ID tag and do a site-wide search to see whether it is still in use across any live pages. If it is not, remove it (keeping a backup somewhere, of course!).

Next, if you are using multiple CSS, perhaps to offer printer-friendly or mobile-friendly pages, combine them into a single file. You can do this by specifying the media type e.g. @media print and then putting all of the CSS relevant to that media directly underneath it. If you had three style sheets for screen, print and mobile you’ve just removed your file loading overhead by two in one hit. Don’t forget to remove whitespace.

JavaScript size

This one is often difficult to reduce, but again with older sites you may find that you are running either multiple instances of the same code or simply have redundant code that can be removed. Again, ensure all JavaScript is removed from the HTML and just call a single file (or as few files as possible).

Image size

This is where you have the possibility to really reduce the overall file size of your page. The first thing to do is to ensure that your images are as small as possible. I’ve often seen old sites where the designer has simply use the ‘drag to resize’ feature within a web design app to rescale the image – this does not reduce and save the image, but simply makes it smaller on screen. I’ve seen sites loading megabytes of images on their home page, which even on high speed broadband will take 10-20 seconds to load.

There are three main image file types that should be considered:

  • JPG (or JPEG). Best for photos. There is a sliding scale for ‘lossy’ compression, which allows you to find the best mix of file size and quality.
  • GIF (Graphics Interchange Format). Best used for icons and images of less than 256 colours. You can specify a lower number of colours to reduce the file size. This is great for background images where there is not a lot of colour separation or company logos of 1-2 colours. Quite often you can reduce an original JPEG of 20-30KB down to 1-2KB by reducing the colours down and saving as a GIF. You can also get animated GIFs, which are a series of stills that can be put together as a slideshow, or GIFs with transparent backgrounds.
  • PNG (Portable Network Graphic). A bit more flexible than GIFs as they can have a higher colour count and handle background transparency better, however they tend to have a higher file size because of it.

Start by looking at all of the graphics that make up your overall site template. Can the graphic be replaced with a smaller, different file type? Don’t forget to consider whether you can replace the graphic using CSS altogether.

Many web designers use Adobe PhotoShop as their weapon of choice for image editing, but there are plenty of others out there that will allow you to compress and save web-friendly graphics. Paint.net is one such example, which is also free.

CSS Sprites

This is more for advanced users, but CSS sprites can significantly reduce the number of files you need to call. If you have a site that has a lot of small icons, perhaps in a menu bar, then by using a single image that includes all of your icons and using CSS to display only the right part of that image in the right place you can make a major reduction. It’s beyond the scope of this article to detail how to do this, but a quick search for ‘CSS sprites’ will tell you all you need to know if it is relevant to you. Remember, when you get to 20+ files being loaded, then 80% of the overall time will be due to the server having to deliver these files, and the actual file size becomes less important. Yahoo use CSS sprites to reduce file calls on their site.

Don’t worry about building the same identical site for all browsers

One trap that web designers unwittingly set themselves is that they design a site which looks great in the latest version of Chrome, which the client expects to look the same on every user’s computer. Newer browsers support newer features, and there’s nothing stopping you taking advantage of that. As long as the site still remains functional and looks good across all of your target browsers you should not get hung up on the fact that it is not a pixel perfect match across all of them. A site written using CSS3 techniques such as drop shadows and rounded corners will look fine in all current browsers but will render with square corners and no drop shadow in IE8. But by using CSS3 you have future-proofed the site, reduced the size and number of files required to render it, improved your user’s experience across different devices and helped your SEO rankings all in one hit.

And finally, test, test and re-test

Once you’ve done all of this, check that everything still works. This is especially important for dynamic sites, where a bug in the code can often leave the user with a screen-full of error message or, worse still, nothing at all. Check that all affected pages render as they should, and check it across all browsers. Get friends and colleagues to check it as well. Run HTML and CSS validators (such as the W3C tools) on the site to ensure that everything is compliant.

Summary

Hopefully even without metrics you will already be feeling the difference, but it’s always good to have a before-after comparison. If you apply all of the above techniques to any depth the chances are you will have spent hours or even days doing it – that will make the comparison all the more sweet! I performed this approach on the 123insight.com website recently and reduced the number of files called from 35 to 20 and the overall file size of the home page by nearly 50%. All subsequent pages benefited, not only because they were based on the same template which made up a large part of each page’s file size, but also as the additional external files were cached. The site certainly felt much snappier to navigate, with pages appearing virtually instantly.

It’s difficult to gauge whether reductions have a direct impact on SEO, as they are often undertaken at the same time as other SEO tweaks, but these techniques should be a part of every web designer’s web strategy.

All content is copyright of Martin Bailey unless otherwise specified. Text or images may not be reproduced without permission.