Identifying Uncompressed Resources in your Web App
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.
You should be familiar with the Chromium 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:
The DevTools Network Tab should automatically be recording Network traffic. Go ahead and refresh or navigate to your web application in the Browser Tab.
Select the Settings Gear, and select Use Large Request Rows:
This will be helpful to quickly compare Resource and Transfer size later.
Use Ctrl + Left-Click to select the following compressible resources:
I intentionally exclude Images because those are binary assets and compression algorithms like gzip and brotli do not apply.
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
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:
In the filter box, apply the following text:
This will filter all request rows to Resources that have a compression algorithm applied.
Next, check the Invert option:
This will filter all request rows to Resources that don't have a compression algorithm applied.
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:
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!