How to Speed up your site by minifying CSS, HTML and JavaScript in 2018. How to minify CSS, HTML and JavaScript in 2018. Speed up your site by 100% and make your site light in size. Learn how to increase the performance of your website by minifying CSS, JavaScript and HTML and reduce the size of your site.

Google announced that from July 2018 your website’s page speed will be an important ranking factor for mobile. Poorly written codes can slow your website, negatively affecting load times and rendering speed. Optimization is a special type of minification which will help you make your site light and fast.

How to Minify CSS, HTML And JavaScript In WordPress and Blogger in 2018. In this post, I will teach you all how to minify CSS, HTML and JavaScript in WordPress and Blogger in 2018. With this trick, you will be able to speed up your WordPress and Blogger site by 100%. Your website will run at a lightning speed with the help of this trick.

How to Speed up your Site by minifying CSS, HTML and JavaScript in 2018

Minifying CSS, HTML and JavaScript can be done in two ways, manually and by using some WordPress plugins. It seems very hard when you go through the way of minifying CSS, HTML and JavaScript manually. We will use some handy techniques to speed up our site’s speed. This will help you rank high in Google Page Speed Insights. This trick is really very convenient and you’ll love it. It is easy and really does works.

What is Minifying?

Minification (also minimisation or minimization) is the process of removing all unnecessary characters from source code without changing its functionality. Minifying is the process of shortening the language codes like HTML, CSS and JavaScript. While building up a site, they are made up of the combinations of PHP, HTML, CSS and JavaScript which contains lots of unnecessary scripts, codes, gaps, space and more. This is why the browser takes a longer time to load a site. Minification of these codes helps you make your website lighter by removing and minifying unnecessary scripts, codes, gaps, spaces and more which results in faster loading of the website.

Why to Minify CSS, HTML and JavaScript?

Many people know that they should minify CSS, HTML and JavaScripts of their sites. They know that they remove all the unnecessary script, gaps and space of their site but they don’t actually have the real concept of doing so. You may don’t know that the size of Scripts, CSS and HTML are much greater than the article and image that you have on the posts of your site.

So, minifying your code will totally omit the gaps and spaces in your codes, which will make your site speed awesome. Moreover, if you have good site speed, you can receive a good amount of traffic on your site because Google ranks only those sites on the 1st page which takes low/few time to load.

How to minify CSS, HTML and JavaScript in 2018?

As I have mentioned already, there are various methods of minifying HTML, CSS and JavaScript codes, some are:

  • Manually (Going through single codes and minifying them yourself)
  • Using CloudFlare CDN
  • Using plugins in WordPress.

Only a few tricks will work for Blogger CMS. Blogger really is easy, so we can do it manually. It will just take some few time to minify CSS, HTML and JavaScripts manually. But if you find it hard you can use a simple trick that I will tell you down here. You can use Cloudflare CDN for minimizing CSS, HTML and JavaScripts in Blogger CMS.

Minify CSS, HTML and JavaScripts manually

This method is little risky and somehow hard comparing to our upcoming method. In this method, you have to copy your code and convert it into minified form. You can find different sites that will convert your CSS, HTML and JavaScript like CSS minfier, HTML minifier, JavaScript minifier etc. Remember you should minify your code accordingly like you should. However, removing blank spaces and gaps can be done manually by yourself. This method is risky because there may be codes that should not be minified, which if minified will cause some severe problems on your site. I have also faced this problem in the past, so I prefer you not to do this manually. Using Plugins is really very simple and it works effectively without causing any errors.

Minify CSS, HTML and JavaScripts using CloudFlare

CloudFlare, Inc. is a U.S. company that provides a content delivery network, DDoS mitigation, Internet security services and distributed domain name server services, sitting between the visitor and the CloudFlare user’s hosting provider, acting as a reverse proxy for websites. CloudFlare makes the Internet work the way it should.

You can use CloudFlare to easily minify your CSS, HTML and JavaScripts without any problem. It works flawlessly and without any error. Your site will not face any kind of problems. But for this, you need to set up CloudFlare on your website. While setting up CloudFlare, you have to change the Nameservers of your website through your domain panel to CloudFlare’s nameserver. While doing this your site will not face any kind of downtime or anything. If you need any help with setting up CloudFlare, you can watch the video below and get help. I am also using CloudFlare CDN to minify CSS, HTML and JavaScripts. It also provides a whole bunch of more features which are really very beneficial for your site’s SEO, Security, Performance and many more.

CloudFlare CDN Setup Tutorial

How to minify CSS, HTML and JavaScripts with CloudFlare

CloudFlare users interested in minifying HTML, CSS and JavaScript can activate Auto Minify in their CloudFlare settings. Auto Minify will remove all unnecessary characters from HTML, JavaScript, and CSS files.

CSS & JS minification operates on cached CSS and JS files only. Once Cloudflare returns a cache HIT for the file it will be returned to browsers in minified form. This allows CloudFlare to deliver a more complete minification result. If you need to enable or disable minification for CSS & JS you will now need to purge your CloudFlare cache to see the effect of any minification change.

After you have successfully got CloudFlare on your website, you can easily minify CSS, HTML and JavaScripts from the Speed tab on Cloudflare Dashboard. The Auto Minify option can be found under the ‘Speed’ Section.

How to Speed up your site by minifying CSS, HTML and JavaScript in 2018

After you are on the Speed tab, select all the three options JavaScript, CSS and HTML. Now BOOM! You have successfully minified your CSS, HTML and JavaScripts.

Minify CSS, HTML and JavaScript in WordPress using Plugins

As I have already told you this method is really easy and best method of minifying HTML, CSS and JavaScript. A single simple plugin will be a lot beneficial and will do great things for you. In this method, few simple plugins are going to do great things for you. Here while minifying the codes on your website, plugins will be the king of minifying HTML, CSS and JavaScript. To minify HTML, CSS and JavaScript using plugins, you can use many plugins which will be accurate for you.

You don’t need to do anything, just install and activate the plugin. It will automatically do all the work for you. To see the result, you can see the change between the page source code before and after activating the plugin. You will find all your HTML, CSS and JavaScripts files minified as they will be in compressed form without any spaces or gaps.

Plugins which you can use for minifying your site:

Autoptimize

How to Speed up your Site by minifying CSS, HTML and JavaScript in 2018

Autoptimize makes optimizing your site really easy. It can aggregate, minify and cache scripts and styles, injects CSS in the page head by default (but can also defer), moves and defers scripts to the footer and minifies HTML. The “Extra” options allow you to async non-aggregated JavaScript, remove WordPress core emoji cruft, optimize Google Fonts and more. As such it can improve your site’s performance even when already on HTTP/2! There is extensive API available to enable you to tailor Autoptimize to each and every site’s specific needs.

I used Autoptimize in the past but it did not gave me a good result. So I switched to another trick.

Remove query strings from static resources

How to Speed up your Site by minifying CSS, HTML and JavaScript in 2018

This plugin will remove query strings from static resources like CSS & JS files inside the HTML <head> element to improve your speed scores in services like Pingdom, GTmetrix, PageSpeed and YSlow. This plugin will ONLY remove query strings from resources located inside the HTML <head> element, any query strings located inside the HTML “body” element shall and will not be removed by this plugin.

Your site can be a little bit slow even if you minify your CSS, HTML and JavaScript because of the query strings. So, you can install and activate this plugin and it will automatically remove query strings from your site. Using Remove query strings from static resources plugin with Autoptimize can give you a great result.

WP super cache

How to Speed up your Site by minifying CSS, HTML and JavaScript in 2018

This plugin generates static HTML files from your dynamic WordPress blog. After a HTML file is generated your web server will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.

There can be many unused and useless cache staying on your site which will slow down your site. So, in order to get rid of it. You can install and activate it and it will also automatically do all the work for you. You can also find some advanced features from it in advanced option.

One main thing! Using the combination of Remove query strings from static resources, WP Super Cache and minifying the site with CloudFlare can give you a great result. Earlier, I also used the combination of Autoptimize, Remove query strings from static resources and WP Super Cache but it also did not gave me my expected result. Now, when I started using WP Super Cache with Remove query strings from static resources and CloudFlare CDN, it is giving me a mind-blowing result. It is just awesome and fabulous. My website is doing great and is speedy all because of this combination of WP Super Cache with Remove query strings from static resources and CloudFlare CDN

WP Rocket

How to Speed up your Site by minifying CSS, HTML and JavaScript in 2018

WP Rocket is one of the best plugins to minify your CSS. HTML and JavaScript code. It has also got a bunch of more additional features like Page Caching, Remove query strings from static resources and more. You can Remove query strings from static resources without using any plugin. It has got this feature inbuilt. Speed up your WordPress website, more traffic, conversions and money with WP Rocket caching plugin. It will help make your WordPress site load Fast with a Few Clicks. Minimal Configuration, Immediate Results works best for all site.

Though it’s a premium plugin you should give it a try. It is really worth. Using this plugin will make your website a Rocket.

WP Fastest Cache

How to Speed up your Site by minifying CSS, HTML and JavaScript in 2018

This plugin creates static HTML files from your dynamic WordPress blog. When a page is rendered, PHP and MYSQL are used. Therefore, the system needs RAM and CPU. If many visitors come to a site, the system uses lots of RAM and CPU so the page is rendered so slowly.
In this case, you need a cache system not to render page again and again.
Cache system generates a static HTML file and saves. Other users reach to the static HTML page.

Setup of this plugin is so easy. You don’t need to modify the .htacces file. It will be modified automatically. It is really best to use. You may give it a try and see how your site looks like after using this plugin.

Wrapping Up!

This was the tutorial for minifying CSS, HTML and JavaScripts. However, this also might not help you get your desired result. But certain combination can help you get a good result. You have to figure out this on your own which will help you improve your site’s loading speed and time. I have one combination which is working really very best for me. It has helped in making my site’s loading speed very fast. It may or may not be useful for you but you may give it a try. Who knows if it will work great for you! The combination that I use and that I recommend you all is WP Super Cache with Remove query strings from static resources and minifying the site with CloudFlare. Have a great day! See you in the next article!

Pin It on Pinterest

Shares