Compress CSS And Javascript To Reduce Site Loading Time

Site speed is among the important SEO factors which have impact on search rankings. Sites which load faster and smoother are more likely to get indexed than the sites which load slowly. Speed factor has not only importance for the crawlers but a visitor is also going to leave your site if it is taking a lot of time to load. Optimizing each and every necessary item to speed up your webpage will help to increase your rankings. Minifying/compressing CSS and JavaScript is among those practices which can reduce your site's load time. CSS and JavaScript codes are loaded before the site's above the fold content is displayed so reducing their size by minification or compressing can also have a positive effect on site's speed. It is also beneficial because Google recommends to allow CSS and Javascript access to crawlers so in this case the minified CSS and JS will be rendered faster by bots.

Now we will learn how to compress these codes using simple online tools for minifaction. Before proceeding to the process, we recommend you to make a save an original copy of the actual code which can be re-used if there is any problem in understanding after compression. Usually it doesn't happen but it might disturb if you remove comments inside the code and when it comes to edit it in future, you get stuck in finding the required syntax.

Compress/Minify CSS:

CSS is found inside <style> tags and is used to design layout of webpage. Externally hosted CSS can be linked using link tag with rel='stylesheet' attribute which resembles the below example.

<link href='link-to-external-css-file' rel='stylesheet'/>

Externally hosted CSS code can be found by browsing the link to CSS file in link tag. To minify the CSS go to any online compression tool like CSS Compressor, CSS Drive or CSS Minifier and compress the CSS according to your requirement.

After compressing, replace the old coding with new compressed one. Now its up to you if you embed the sheet in template or webpage itself or host your CSS externally.

Compress/Minify Javascript:

Javascript is found inside <script> tags which may include type='text/javascript' attribute. Javascript files can also be linked externally by using script tag with source attribute as shown in following example.

<script src='link-to-external-javascript-file' type='text/javscript'/>

Externally hosted scripts can be found in the same manner as we discussed in CSS. To compress JavaScript copy and paste JavaScript to any online JS compression tool like JavaScript Minfier or JS Compressor then reduce the size of Javascript according to your requirement by pressing compress or minfy button. It will reduce your code to a much smaller one saving you extra bits hence speeding up your webpage.

Replace the compressed code with original one or host it externally as per your choice.