Google’s Web Performance Best Practices #4: Minimize Payload Size

4 Min read

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.

You should gzip javascripts, css, plain text, html, xml… basically anything that’s not a binary file.

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.


2. Minify: JavaScript, CSS, HTML

Minifying JavaScript code can save many bytes of data and speed up downloading, parsing, and execution time, according to Best Practices. This actually means removing unnecessary bytes, extra spaces, line breaks, indentations. In a nutshell, stripping extra code from your programs that is not essential for execution.

Minifying the CSS code has the same effect as minifying javascripts, and same benefits: reducing network latency, enhancing compression, and faster browser loading and execution. You can use free tools for this, and this is the best way to get it done, such as YUI Compressor, or cssmin.js. Finally, minifying the HTML code, that may include inline JavaScript and CSS contained in it, saves many more bytes of data.

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!

  • defer loading of javascripts: for some browsers, while JavaScript is being processed, the browser blocks all other resources from being downloaded and this adds considerably to latency. Deferring the loading of the JavaScript until it’s actually needed can help.


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

Read more:


Latest Articles

AWS FinOps Best Practices

Amazon Web Services (AWS) is the most established cloud vendor on the planet – its vast array of services increases every year, with a staggering 200 new offerings released in 2020 alone. These services offer businesses the ability to adjust resources based on demand – a cost-effective pay-as-you-go model and a global infrastructure for widespread […]

Nesh (Steven Puddephatt) Senior Solutions Engineer @ GlobalDots
30th November, 2023
Reduce Cloud Costs by Up to 80% with Automated K8s

In the dynamic landscape of cloud computing, Kubernetes (K8s) has emerged as a cornerstone for container orchestration. There is no doubt that K8s clusters are effective, yet companies continue to grapple with the complexities of managing K8s clusters, especially in production. GlobalDots, recognizing this challenge, has curated a pioneering solution: a platform that transforms the […]

30th November, 2023
FinOps Tools: Key Factors to Consider

For organizations already well-established in the cloud, vendors such as AWS and Azure often bite large chunks out of annual revenue. Monthly cloud bills accumulate quickly  – the 5 biggest cloud vendors rake in a combined total revenue of over $80 billion a year, with Microsoft and Amazon claiming the lion’s share of over $20 […]

Nesh (Steven Puddephatt) Senior Solutions Engineer @ GlobalDots
22nd November, 2023
AWS Innovations Decoded: GlobalDots’ Top 20 Picks

Join AWS experts from GlobalDots as they decode the top 20 cloud innovations you need to know in a 2 part Webinar. Gain insider insights on leveraging these transformative technologies to boost performance, tighten security, and reduce costs. Discover real-world applications to apply these advancements to your business. Reserve your spot now! 🚀 Stay Ahead: Learn […]

31st October, 2023

Unlock Your Cloud Potential

Schedule a call with our experts. Discover new technology and get recommendations to improve your performance.

Unlock Your Cloud Potential