Home | Blog | Web Development | What is CSS Minify and How to Implement It

What is CSS Minify and How to Implement It

May 17, 2018, 20:03 PM | Published under Mobile Websites , Search Engine Optimization , Web Development by Michael Hodgdon

Minify Code

One of the quickest ways for people and search engines to lose interest in your site is slow loading times. These days no one wants to wait for a page to load. So, if your site is slow, people will quickly move on to the next one, and the search engines will likely find a similar faster site than yours to put atop page one!.

With most websites, there is a lot of data to load before it becomes fully functional. This can include anything from HTML, to CSS and Javascript.  The trick is to get them to run with the minimum amount of actual code, while achieving everything you need. This is where minify comes in.

When writing code, most people like to spread out their work so it is easy to trouble shoot. They also often put notes or other indicators to quickly navigate their work to remove bugs that turn up during testing. However, once that is done, a lot of this becomes redundant and simply slows things down.

The trick is to store your fully annotated code in a safe place for when you want to make adjustments. Then minify the version that you are going to run on your site. By minifying your code, a program will strip away all the extra spaces, comments etc., resulting in a ‘clean’ code that the computer can read and implement quickly.

However, minifying is not compression. When you minify something you just literally remove every character or space that takes up memory, but does not serve an actual programming purpose. With compression you compact the file which will then needs to be decompressed before it will run effectively.

How to Minify

The most efficient way to achieve this is to use a minifier. There are a number of programs on the market that which will take your code and minify it into the most efficient and quickest running version. 2 Good ones to start with are:

  • The Closure Compiler: This is a JavaScript optimizer that will examine your code to eliminate the dead space. It will also check and warn you about any JavaScript issues. Its goal is to compact your code and improve its performance.
  • CSS Minifier:  This is a free online tool that will clean up your code by removing spaces, indentations, comments etc. To use it, you simply copy your original code into the Minifier. Once it has completed its work, copy the finished code back into your site. It should function as before but significantly faster.

There are many other versions of these programs, including plug-ins you can use. But in each case their goal is the same, to take your original code, remove any non-essential characters, so it runs at optimum speed.

In Summary

The more quickly your code loads your site into a user’s browser, the happier they will be. Your site will run more quickly and is less likely to get hung up. This means that people can browse through your products and services seamlessly, making them more likely to return and hopefully order and then re-order. As the web matures load times of websites become a bigger and bigger ranking factor, so much to the Google has introduced even newer technology called AMP to address load factors beyond Minify. All though implementation of AMP technology maybe overkill in the market your website serves a solid Minify strategy that can help your first page site listing on search move up even one or two spots, is well worth the investment!

About the Author

Mike is the Marketing & SEO Director at Infront Webworks. An online entrepreneur since 1997, he has owned or run website design / SEO, online marketing and internet advertising companies for over 15 years. Featured in Entrepreneur Magazine, Colorado Springs Business Journal and with projects featured in N.Y. Times, L.A. Times, he has a solid track record of successful online undertakings. He is a certified Yext Partner, Google Certified in Analytics, Tag Manager, AdWords, Online Display Advertising, Shopping and Video Advertising.

Load more comments
Thank you for the comment! Your comment must be approved first
website user
New code
comment-avatar

Best SEO Company -10 SEO's
google-partner-color
lsa-color
bestbusiness-color
clutch-color
bbb-color
top-seo-agency-color