Boost Page Speed: Minification and Compression for Static Assets
in Web Dev
Last updated:
Caching static assets is only half the game. Adding minification and compression dramatically boosts page speed. With this PR, all CSS/JS is now compressed and minified via WhiteNoise, HTML minified via GzipMiddleware, and images via ImageOptim.
Before Optimization
After making changes with WhiteNoise + GzipMiddleware
Many of the files are smaller. For example, main.css went from 5.4 kB to 2.1 kB. That’s a -61% decrease in size!
| File | Before | After | Percent Change |
|---|---|---|---|
| main.css | 5.4 kB | 2.1 kB | -61% 🔻 |
| index.html | 16.4 kB | 6.1 kB | -63% 🔻 |
| branding_logo.svg | 15.7 kB | 6.5 kB | -59% 🔻 |
| jsolly.jpeg | 9.6 kB | 9.9 kB | +3% ▲ |
| kofi.png | 4.5 kB | 4.8 kB | +7% ▲ |
| favicon.png | 1.9 kB | 2.2 lB | +16% ▲ |
Unfortunately, images INCREASED in size. Doesn’t appear that WhiteNoise compresses images. That makes sense because image compression degrades quality. A colleague suggested the tool ImageOptim. ImageOptim reduces file size by removing image metadata.
By default ImageOptim removes invisible metadata from images, such as EXIF camera information and color profile. ImageOptim overwrites the files with their optimized versions. This is safe, because ImageOptim preserves image quality.
It blows my mind how much the tool reduces image size.
| File | Before | After | Percent Change |
|---|---|---|---|
| jsolly.jpeg | 9.6 kB | 8.9 kB | -7% 🔻 |
| kofi.png | 4.8 kB | 2.1 kB | -56% 🔻 |
| favicon.png | 2.2 kB | 1 kB | -55% 🔻 |
Conclusion
With a handful of lines, you can decrease the size of static assets. Additionally, I found a way to reduce image file size without quality loss by removing image metadata via ImageOptim. By performing these optimizations, the total payload size went from 50.6 kB (not including CDN minified assets) to 30 kB for an overall reduction of 40%.For small websites like mine, you might not notice 20 kB, but imagine a large, media-rich site reducing its size by 40%
Add compression and minification to your static assets today!
Comments
- No comments yet.
Related Posts
Implementing Anonymous Likes and Views in Django - A Guide
2 min readLearn to implement anonymous likes and views in Django with a step-by-step guide. Discover the best ways to track and record user engagement on your website.
Find Your Dream Job: A Guide to Job Searching and Interviewing
7 min readFind your dream job with this guide on job searching, researching companies, interviewing, and resumes/cover letters.
0
15-Minute 'Dump and Go' Instant Pot Recipes
20 min readQuick and easy Instant Pot recipes in less than 15 minutes! From soups and stews to main dishes, these 'dump and go' recipes will save you time in the kitchen.
0
John Solly
A hands-on AI practitioner who transitioned to a CTO role to broaden my impact.
Most of my career has been dedicated to developing spatial systems at Esri, startups, and federal agencies. Currently, I lead technology strategy for Leidos' Health IT division, supporting agencies such as SSA, VA, and HHS.
My primary focus is the convergence of spatial computing and AI, enabling machines to interpret the physical world and applying these capabilities to meaningful missions.
Please reach out if you are interested in spatial systems or advancing AI within the federal government.
0