Speed Up your Website Step 1- Send Less Data

As discussed in the last post, the first step in reducing the page load time of any website is to reduce the amount of data which must be sent down the wire to the user’s desktop. The benefits here accrue as there is reduced opportunity for network congestion at any point through the transmission process.

HTTP Archive reports that in the last 4 years the size of webpage has increased by nearly 3 fold from 726kB per page to 1829kB per page.

Meanwhile connection speeds have only doubled;

_Source - http://www.statista.com/_

So with Web pages growing in size and pipes not growing fast enough to transmit the increased data, then it makes sense to:

Send less data

How do you send less?

Reduce the size of the files sent
Reduce the number of files sent
Enable Compression

Reducing File Size

Compress the Files

Google wraps this recommendation up pretty well:

All modern browsers support and automatically negotiategzipcompression for all HTTP requests. Enablinggzipcompression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to first render of your pages.

Minify Resources

Ideally you should minify resources such as CCS, JavaScript and HTML documents. While the levels of compression Gzip provides has in most cases significantly reduced the value this optimisation can provide, it still makes sense to follow best practice and remove comments, formatting, unused code etc from these files before sending them down to a browser.

Optimise Images

The majority of growth in the size of web pages over the last few years has been in the growth of images being sent to the browser. Where possible, the images should be optimised for delivery into the browser. This can be an area of great complexity subject to the images being sent, the form factor of the device receiving them and the browser running on that device.

Again from Google, here is an image optimisation check list:

**Prefer vector formats:**vector images are resolution and scale independent, which makes them a perfect fit for the multi-device and high-resolution world.
**Minify and compress SVG assets:**XML markup produced by most drawing applications often contains unnecessary metadata which can be removed; ensure that your servers are configured to apply GZIP compression for SVG assets.
**Pick best raster image format:**determine your functional requirements and select the one that suits each particular asset.
**Experiment with optimal quality settings for raster formats:**dont be afraid to dial down the quality settings, the results are often very good and byte savings are significant.
**Remove unnecessary image metadata:**many raster images contain unnecessary metadata about the asset: geo information, camera information, and so on. Use appropriate tools to strip this data.
**Serve scaled images:**resize images on the server and ensure that the display size is as close as possible to the natural size size of the image. Pay close to attention to large images in particular, as they account for largest overhead when resized!

Reducing the Number of Files Sent

When sending a page it is possible to send only parts of the files required to build the page if the browser has previously received some of the files which make up the page and the browser is enabled to reuse those files. This is all about leveraging the browser cache.

To do this you must make files cachable in the browser and provide for reuse of the cached versions of the files on reload of a page in the browsers or indeed if the browser loads a page with parts of the page which have been seen previously in another page.

It is important to set the cache control headers for assets and make sure the naming conventions across pages for assets allow for reuse. You must consider, what can be stored and reused in the browser (as compared with any downstream proxy device), for how long that asset can remain in the browser and what happens when that time expires.

In the next post of this series we will have a look at reducing the distance to deliver files.