Google’s Web Performance Best Practices #4: Minimize Payload Size
Four out of six, we are half way over through a series of blog posts inspecting Google’s web performance best practices in detail. We have already discussed caching, minimizing round trip time, downsizing on cookies. All with the goal of eliminating with ease the components that are adding to your page load time unnecessarily. And to the impatience of an end user.
Faster websites result in better user experience, better search engine rankings and more conversions. 1 out of 4 visitors won’t wait for the page to load for more than 4 seconds.
The essential data that is being carried within a packet across the internet, i.e. cargo of a data transmission, is known as payload. Most network packets are split into three parts: header, trailer and payload. Payload is the body of a packet, as well, and if a packet is fixed-length, then the payload may be padded with blank information to make it the right size.
Image 1 – Reducing on packet size helps them travel faster (Source: Wikimedia Commons)
If you minimize on the payload size, network latency can be significantly reduced. And not only that, your bandwidth bill will be smaller.
Steps to Take
Your best chances in reducing overweight in a payload involve compression and minimization of text based files such as scripts or styles, re-compression of some downloadable files, zero-body components and more.
1. Turn on gzipping!
This seems to be the easiest and the most effective step. How much improvement can you expect from gzip? On average – 70%. Google Speed Page will warn you if gzip is not on.
To enable compression, configure your web server to set the Content-Encoding header to gzip format for all compressible resources. You can also use deflate, which uses the same compression algorithms, but it is not that widely used, and gzip is thus more recommended.
To ensure that your content compresses well, Google’s Best Practices also advise to specify CSS key-value pairs in the same order where possible, i.e. alphabetize them, also specify HTML attributes in the same order. Use consistent casing, i.e. lowercase wherever possible, and consistent quoting.
How much size reduction can you expect from minification? It can actually make your scripts up to 85% leaner.
3. Other recommendations
Other recommendations include:
- remove unused CSS: many web sites reuse the same external CSS file for all of their pages, even if many of the rules defined in it don’t apply to the current page.
The best way to minimize the latency caused by stylesheet loading and rendering time is to cut down on the CSS footprint; or actually remove or defer CSS rules that aren’t used by the current page. Most handsomely, when you run Page Speed against a page referencing CSS files, it identifies all CSS rules that don’t apply to that page!
- optimize images: proper formatting and compressing. Improperly optimized images can take up more space than they need to; for users on slow connections, it is especially important to keep image sizes to a minimum, as advised.
Basic optimization includes cropping unnecessary space, reducing color depth to the lowest acceptable level, removing image comments, and saving the image to an appropriate format. This can be done with any image editing program. Advanced optimization involves further (lossless) compression of JPEG and PNG files.
- serve scaled images: for times when you want to display the same image in various sizes. You will serve a single image resource and use HTML or CSS in the containing page to scale it.
- serve resources from a consistent URL: a unique one, to eliminate duplicate download bytes and additional round trip time. For times when you need to reference the same resource from multiple places in a page, for example, ensure that one resource is always assigned a single URL.
They say that the average site today is 1.5 mb in size too big! This adds to the importance of keeping your payload clean. The effort to do that includes minifying the code and compressing files with gZip basically, and serving images in scale, and optimized. Not too much, if you consider the results.