Identifying Uncompressed Resources in your Web App

Posted On: December 21, 2021

Applying compression algorithms like gzip or brotli to your resources transferred over the network is crucial to ensuring optimal transfer size and network bandwidth utilization.

Many production web servers and CDNs do this for you automatically, but it's worthwhile to ensure all compressible assets on your page are indeed being delivered with proper compression algorithms applied.

Prerequisites

You should be familiar with the Chromium Network Tab.

Step 1: Open the Network Tab

The first thing you'll need to do is open the Network Tab, via F12 and then selecting the Network tab.

Ensure you have Disabled Cache selected:

A screenshot of the Chromium F12 Network Tab

Step 2: Navigate to your Web App

The DevTools Network Tab should automatically be recording Network traffic. Go ahead and refresh or navigate to your web application in the Browser Tab.

Step 3: Enable Large Request Rows

Select the Settings Gear, and select Use Large Request Rows:

A screenshot of the Chromium F12 Network with Use Large Request Rows highlighted

This will be helpful to quickly compare Resource and Transfer size later.

Step 4: Adjust your Resource Filters

Use Ctrl + Left-Click to select the following compressible resources:

Fetch/XHR
CSS
JS
Doc

I intentionally exclude Images because those are binary assets and compression algorithms like gzip and brotli do not apply.

A screenshot of the Chromium F12 Network Tab with Filters applied

Note: SVG images are text-based and may benefit from compression. If your web app utilizes SVGs, you may want to keep Images checked, but you should ignore binary image formats in the analysis (like .jpeg or .png images)

Step 5: Add a Headers Filters

Content-Encoding Header

If a resource has a compression algorithm applied to it for network transfer, the server will include a Content-Encoding header on the response, along with the specified encoding algorithm.

For example, a resource compressed with gzip would have the following header on its response:

Content-Encoding: gzip

Filtering the UI

In the filter box, apply the following text:

has-response-header:content-encoding

A screenshot of the Chromium F12 Network Tab with header-based filtering applied

This will filter all request rows to Resources that have a compression algorithm applied.

Step 6: Invert

Next, check the Invert option:

A screenshot of the Chromium F12 Network Tab with Invert highlighted

This will filter all request rows to Resources that don't have a compression algorithm applied.

Step 7: Sort by Size

Click on the Size table header so it's sorting in descending order. This will highlight the largest uncompressed resources in your web app.

Observe that for uncompressed resources, Resource Size and Transfer Size are nearly equivalent:

A screenshot of the Chromium F12 Network Tab Resource Size highlighted

Look for large assets (greater than a few kB or so) that don't have compression applied, and track down the compression settings for that server or CDN to ensure you're compressing your resources properly!

That's all for this tip! Thanks for reading! Discover more similar tips matching Beginner and Network.