BOOST SPEED BY MINIFYING CSS AND JAVASCRIPT

The importance of minifying your CSS and JavaScript file to Improve SEO?

Minify CSS and JavaScript - By SimplerWebsIs minifying your CSS and JavaScript important for the success and growth of your small online business? Read on to find out!

Because more users are navigating websites, looking for something to buy, using their smart devices, and Google making Mobile device speed as an important ranking factor, your online business has to load within 2 seconds, or less - If you want to keep your would be shoppers and not have them leave your site and go to your competitor's because of your slow website.

What does Minify CSS and JavaScript actual mean?

Minify CSS (or JavaScript) is the process of:

  • Removing white space that exist in your document
  • Removing unnecessary comments you added when writing your CSS or JavaScript document
  • Converting 100's lines of code into a single line

Thus, making your CSS and JavaScript file process a lot faster, resulting in a faster website.

Why you should Minify your CSS and JavaScript files?

When your CSS and JavaScript files are minified, there will be a lot less data to be process down the wire, resulting in a faster page load. Of course there is more than just minifying your CSS and JavaScript files to help improve your website such as combining your CSS files into one file, and your JavaScript files into one file respectively.

Let us look at two example where part of the CSS being int its original form, and the second one having been minified.

A sample of a Non-minified CSS file

#navigation .g-main-nav {margin: 1.2rem 0 0 -5rem;text-align: left;}
#navigation .g-main-nav .g-toplevel > li > .g-menu-item-container > .g-menu-item-content {letter-spacing: 0.1rem;line-height: normal;word-break: normal;}
/*mobile menu Icon*/@media only all and (max-width: 47.938rem) {.g-home-particles #navigation, .g-home-positions #g-navigation {border: 0;background: green;}}
#header p#title {font-family: Myriad Pro,Helvetica,Tahoma,Arial,sans-serif;font-size: 2rem;font-weight: 700;letter-spacing: 1.5px;text-transform: uppercase;}

A sample of a Minified CSS file

#navigation .g-main-nav{margin:1.2rem 0 0 -5rem;text-align:left}#navigation .g-main-nav .g-toplevel>li>.g-menu-item-container>.g-menu-item-content{letter-spacing:.1rem;line-height:normal;word-break:normal}@media only all and (max-width:47.938rem){.g-home-particles #navigation,.g-home-positions #g-navigation{border:0;background:green}}#g-above p#abovetitle,#g-header p#title{font-family:Myriad Pro,Helvetica,Tahoma,Arial,sans-serif;font-size:2rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}

As you can see from the above two samples, the comments, white spaces are gone, plus everything is on one line.

Tools to use

Before you start optimizing your website, there are online tools that can help you see some technical SEO issues your site might be experiencing, thus, increasing your website page load. We like to use Pingdom Tools, and Pingdom Tools to scan our website and get good insights of issues so we can tackle them and further optimize SimplerWebs.com

Pingdom tools

Pingdom Performance Insight

GTmetrix

GTmetrix website pagespeed score

 We run a GTmetrix scan on a rondom website and this is what we got related to Minify CSS

GTMetrix minify css result

Note the 19% reduction the website could've shaved off! Looking at the percentage, you might think going through the process of Minifying your CSS is futile and not worth the time, but when you add that percentage to other percentage of other areas your site might be experiencing speed problems, like combining CSS and JavaScript, optimizing your images, that 19% might turn into 50%, if not more. So is it worth it? YES!

Factors that will help you improve your site's speed

Many business owners, new to web design, prefer using online web design tools to quickly design their business website not knowing that, it takes more than just using an easy to use online site builder to have a successful online business website.

Now, let's talk a little bit about some factors that can improve your site speed, or make it load slower than a snail.

  • Hosting:  You just can't look for a $1/month (or maybe $2) hosting plan and sign up. Your hosting server plan and configuration has a lot to do about your site speed
  • Design platform: As we previously mentioned in this article, even though it might be easy and user friendly, using a site builder, which are offered by your hosting company, or other companies (using their proprietary site builder) is also not a good solution because you will be limited at how much you can do to optimize your site using On-page SEO and technical SEO techniques. You need to have access to your website through FTP and, unfortunately, some easy to use site builders do not offer that options.
  • Installed Theme/Template: If you are using a content management system (CMS) like Joomla, or WordPress (or any other CMS), and you plan to purchase a theme, or a template instead of designing one from scratch, we recommend that you use a template from a professional template designer and choose the one that has the features you need, and not the ones you don't care about that will make your site load slower.
  • Installed features: We still see website that are using features that are not only so 90's, but also serve no purpose except that they increase page load such as hit counters (yes, it's true), websites designed in mostly using Flash, live website with an animated (and quite large) 'coming soon' image, and so on.
  • Images - Make sure that you optimize all the images, like a logo for example, for speed (lowering the file size) before you upload them and use them.

Again, as mentioned earlier, speed is a very important ranking factor (for your desktop, laptop and mobile viewers) that your business can't afford not to make it a high priority. The less files a browser has to request, the faster the page will load on your visitor's device.

Your Feedback, or Comments are welcome!

If you enjoyed reading our short 'Minify CSS and JavaScript" article, please provide us with your feedback and share it with your followers by using any of the social media button below! Did we miss something, or do you have something to add to this article, please do so by submitting your article!

SimplerWebs