Pro Tip: Auto Minification

Pro Tip: Auto Minification

I recently migrated this site from GitHub Pages to S3 + Cloudflare, and keep finding more goodness in this combination. This tip will be more or less useful depending on your workflow, but I wanted to share since it's quick and easy.

First, what is minification? It's simply the process of stripping unnecessary characters from web content (minifying). This goes for HTML, CSS and JavaScript. You don't develop this way because refactoring code with no spaces or line breaks would make your eyes bleed... but minifying on the way to production accelerates content delivery.

There are a lot of ways you can accomplish minification. You can use free tools around the web including cssminifier.com and minify-html.com (pick your favorite, a lot of free sites do this), perhaps even auto-prefixing along the way (auto-prefixing involves adding additional CSS for better cross-browser compatibility). This gives you a lot of flexibility, but is time consuming.

Another common approach is to incorporate minification and auto-prefixing into your tooling. Common Swiss Army Knives such as Babel, Parcel and Webpack can be configured to minify and auto-prefix as part of your build process. They also bring a load of other features such as transpiling (which may involve distilling things like TypeScript down to pure JavaScript and adding polyfills enabling development leveraging the latest ECMAScript features while ensuring compatibility with older clients). Folks doing web development for their day job will most likely have a preferred tool-chain and take the time to tweak it for desired effect. However, this brings a lot of complexity and may be overkill.

Users of Cloudflare have another, simpler option. Let the platform do the hard work for you! For a static site consisting of HTML, CSS and JavaScript you can enable automatic minification. This is extremely easy to configure and available in the free tier... so if you are thinking about moving your site behind Cloudflare's CDN, or already have but aren't leveraging these features, follow along for a quick overview!

Create or login to your Cloudflare account, then navigate to the the Speed section on your dashboard:

The Speed icon hides a lot of optimization goodies.
Optimization goodness hides beneath the Speed icon.

If it's your first time, you'll be asked to run a speed test for your site (assuming you've already set one up). Feel free to do it (only takes a few minutes and helps establish a baseline), but if it fails on first pass don't worry... drill down to Optimization:

A lot of optimization options are available in the Free Tier.

From here, explore the available options... I've enabled a few which are available for free:

Auto Minify: You can select which content (HTML, CSS, JavaScript) you want minified on the fly. No more manual steps or excess tooling to worry about, the platform will optimize selected content for you. Just upload and go!

Brotli Compression: Now that your static content is a nicely optimized series of strings fitting in fewer packets, why not add compression to reduce the total delivery size? Similar to zipping files on your hard disk to save space, Brotli is simply a streaming compression format understood by most web browsers and CDNs.

Rocket Loader: For sites utilizing JavaScript, this option reduces time to first paint (often referred to as first contentful paint). This automates trickery traditionally supported by additional design (careful thought about above the fold content) and lazy loading libraries.

There are additional free options which you may find useful, including auto-detection and redirects for mobile users (if you want a separate mobile experience) as well as a handful of options only available for paid plans. Be sure to check out the Browser Insights section for analytics capabilities, and refer back to the Overview for analysis of how your new optimization options help improve your site's content delivery. Also note, you may need to purge your cache to see updated content faster.

Of course a natural question might be, "Why bother with any of this?". Avoiding premature optimization is good, but in this case there are a couple of key wins without much complexity or effort... First, you will improve your user experience (especially on mobile devices and Internet connections with less bandwidth or higher latency). A nice secondary effect is improved page rankings which should enhance the visibility of your message with just a few clicks!

Additional definitions too lengthy to fit above:

For a good overview of time to first paint, see this and this and this.

To better understand above the fold content, go here and here.

This is a good discussion about lazy loading in JavaScript.

Thanks for reading!

Show Comments