In today’s world, everyone expects pages on a site they hit to load quickly. If a page takes longer than a couple seconds to load, as a site owner you can start kissing your conversion rate goodbye. One excellent tool that tracks page speed is Google PageSpeed Insights. This free tool provides a score out of 100 and provides a list of opportunities to improve the page’s speed.
One of these opportunities that pops up frequently is “Minify CSS” or “Minify JavaScript.” Sounds like a great thing to do. But just what does “minify” mean and how do you practically apply this to increase your page’s speed?
What does minify mean?
According to Dictionary.com, minify means “to make less” or “to minimize.” In coding terms, the “make less” applies to removal of unnecessary characters or whitespace in the code, whether it is HTML, CSS, or JavaScript.
Let’s look at some examples
CSS (cascading style sheets – essentially what makes the site look pretty) is a prime example of a source code file that can (for some sites) contain tens of thousands of lines of code. Minifying these tens of thousands of lines of code to remove unnecessary characters and whitespace could look like the following before and after example:
BEFORE
/* Header background should match brand colors. */
body {
background-color: #000000 ;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
AFTER
body{background-color:#000}h1{color:#fff;text-align:center}p{font-family:verdana;font-size:20px}
What changed?
- The /* Header background should match brand colors. */ is simply a comment in the code for the coder to note something in the code and can be removed because it has no affect on the code itself.
- All line-breaks removed to reduce whitespace
- All spaces between characters removed such as background-color: #000000 ; removed to reduce whitespace
- The hex color #00000 was reduced to its shorthand of #000 as well as the color white being converted to its hex shorthand of #fff
JavaScript (essentially updates and changes HTML and CSS on a webpage) is another example of source code files that in many cases exist as many lines of code. These can be minified similarly to the following before and after example:
BEFORE
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello John Doe!" ;
document.getElementById("demo2").innerHTML = "How are you?" ;
}
AFTER
function myFunction() function myFunction(){document.getElementById("demo1").innerHTML="Hello Dolly!",document.getElementById("demo2").innerHTML="How are you?"}
What changed?
- All line-breaks removed to reduce whitespace
- All spaces between characters removed such as .innerHTML = “How are you?” ; removed to reduce whitespace
Why does this matter?
Okay, great, I can remove some spaces and characters. That doesn’t seem like it will do much.
For small sites, perhaps not. However, for ecommerce sites that have hundreds of pages and thousands of lines of code, removing the vast amounts of whitespace and characters that do not need to be there while the code still functions exactly as it should could increase individual page speed and site speed overall significantly.
How significantly? Again, some of this depends on the size of the site. But even if you could increase average page speed by half a second to a second, that would be hugely significant to conversion rates.
How do I as a non-coder minify code?
Minifying sounds like a great tool for coders to go about implementing. What if you are not a coder? Here are a few tools that the coder and non-coder can use:
Simply copy and paste in your code, and the tool will spit out the minified code.
Hint: Remember to save a non-minified version of the code so any references in the code that you or someone else made are saved for future reference.
Conclusion
Increasing page speed, while obvious in its implications, is not always obvious in its application. Minifying CSS or JavaScript certainly can fall into the latter category. In short, minifying is simply removing unnecessary parts of code to decrease the time it takes to load the code file on any given page. It may seem like an insignificant and overly technical step to take, but using the examples and free tools mentioned above will help you maximize your conversions by minifying your headaches.
Wish someone else could deal with this for you instead? Check out our web development capabilities to see how we can help.
