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

Screenshot of file list before optimization

After making changes with WhiteNoise + GzipMiddleware

Screenshot of files after (size gets smaller)

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!

FileBeforeAfter

Percent 

Change

main.css5.4 kB2.1 kB-61% 🔻
index.html16.4 kB6.1 kB-63% 🔻
branding_logo.svg15.7 kB6.5 kB-59% 🔻
jsolly.jpeg9.6 kB9.9 kB+3%      
kofi.png4.5 kB4.8 kB+7%      
favicon.png1.9 kB2.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.

FileBeforeAfter

Percent

Change

jsolly.jpeg9.6 kB8.9 kB-7%     🔻
kofi.png4.8 kB2.1 kB-56% 🔻
favicon.png2.2 kB1 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! 

Back to Home
 Profile Picture
Profile Picture

About John Solly

I am a Senior Software Engineer with a focus on geospatial applications, based in the Columbus, OH metropolitan area. This blog is where I delve into the intricacies of GIS (Geographic Information Systems), offering deep dives into different components of the geospatial technology stack. For those who share a passion for GIS and its applications, you've found a spot to explore and learn.

Interested in collaborating or learning more about my work? Take a look at my portfolio for a showcase of my projects and expertise.

Comments

  • No comments yet.
Login to Comment