Minify HTML, CSS and JavaScript to speed up web pages, reduce server load
By
03 February 2020

In my test the Minifier reduced pagefile size by 25.57%
ACRO Global
ACRO Global
Digital Tourism
Marketing & Advertising

Boothbay Harbor - Boston
Subscribe to my blog

Share This Article

Results of testing erb pages with Google webmaster tools like Lighthouse often include a recommendation to "minify" HTML, CSS or Javascript.

Following this recommendation makes perfect sense for both the site owner and users, because minifying page code reduces the size of the HTML files behind your web pages, which in turn reduces:

  • The time it takes the user's browser to download the page code
  • The time required for the browser to parse the page file and render a meaningful "paint" of the page layout and content
  • The load on your server
  • The user's data consumption
  • Negative assessments of your page on the part of Google

How does minifying work? A software program scans the code of your page, finds and removes white space and comments, and applies many other shortcuts in order to reduce the weight of your page file. And it does this very quickly.

Example:

I'm going to minify the code of one of our ACROGlobal.com pages using the HTML Minifier posted on Github by Juriy "kangax" Zaytsev, here: https://kangax.github.io/html-minifier/ which looks like this:

Our page on Direct Response Search Advertising is here: www.acroglobal.com/marketin...ism-search-advertising.htm

and looks like this:

To use the Minifier, I first viewed the source code of the ACROGlobal page in a browser window:

(There's much more, of course.)

Then, I copied all the source code, pasted it into the top pane of the Minifier, chose some options in the right column of the Minifier, and clicked Minify. Here's the minified version of the source code in the previous screencap - note the striking absence of white space and comments:

And here's the Minifier's report on the reduction in file size that occurred in that process:

The Minifier reduced the size of that file by 25%+ with about 10 seconds of work on my part.

And there are 20+ options in the right column of the Minifier that you can turn on or off by click boxes, to tweak the minification to satisfy your every whim.

Not bad. And free, too.


If you found this article helpful and would like to see more like it, please share it via the Share This Article link at the top of the page.

And if you have questions or comments, you can easily send them to me with the Quick Reply form, below, or send me an e-mail.


David Boggs    - David
  David@DavidHBoggs.com
View David Boggs's profile on LinkedIn

Google Certifications - David H Boggs
View my profile on Quora
Subscribe to my blog

   
   
Website
Visit Website
Rating
5/5 based on 1 vote.
Show Individual Votes
Tags , , , , , , , ,
Related Listings
External Article: https://kangax.github.io/html-minifier/


E-mail:
Quick Reply
Name:
E-mail:
Subscribe to my blog:
Your Comment:


You may use BB Codes in your message.
Spam Prevention:


Members currently reading this thread:

Previous Article | Next Article