How To Minify Your Website and Improve its Speed
April 27th, 2018 | by Ravi Chahar || 4 Comments |
The page loading time has the major influence on the ranking and the user experience. If you’re thinking about the SEO of the website then take a step forward to improve it. Today, you will learn about reducing the size of the files of your website. Do you know what is minifying?
How to minify your website? You know that in your WordPress website there are many types of files present. The HTML files, CSS files, Javascript files etc. Have you ever thought about the size of these files? If the size is larger, your website would take so much time to load these files.
Do you want to improve the speed of your website? Are you thinking about minifying your website? Well, I can help you with that.
What is minifying and how to minify
You may have read about the term compression. It means to reduce the size of the file by compressing it. Minifying is just like compression. Though both the terms have different meaning but still, in general terms, you can understand the concept.
When you remove the unwanted white space, unwanted strings from the files and reduce the size then the technique is termed as minifying.
Basically, the CSS file and the Javascript files are of larger size. It is because developers create many Javascript files and the plugins you use may create new files.
The HTML file can be compressed. You don’t need to minify it. It is because the white space in the HTML code doesn’t affect the size of the file.
How to minify CSS
While writing the code the developers leave the white spaces and the unordered structure of the code. To reduce the size of the file, you can do many things.
If you have some knowledge of the CSS language then you can do it by doing these things:-
1. Remove the white spaces
2. Combine the CSS properties for a single element in the same line. Don’t increase the size by writing like this:-
color: #FFFFFF;
font-size: 16px;
background-color: #999999; }
You can write the above code in one line.
3. Use shorthand property wherever possible. Whether you are setting the margin, padding, or any other property. The shorthand property would reduce the size of the file.
If you don’t have any knowledge about this language then you can use some online tool to minify your CSS file. Just place the code in the minifying tool and you would get the minified code.
You can use CSS Minifier. It is a tool in which you enter the CSS code and it would provide the minified code which can be used at the same place of your old code.
How to minify Javascript
Nowadays most of the websites consist the Javascript to make them more dynamic. For the browser, loading the Javascript is the major problem. It takes so much time to upload the bigger files.
Do you know something about this language? Well, there is nothing to worry about. You can use the JavaScript Minifier tool to minify the code. It’s similar to CSS Minifier. You just have to put the code and it would show you the minified code.
It is recommended to keep the size of the Javascript as small as possible. Don’t create many Javascript files. Just combine them all.
How to minify HTML and XML files
Though it won’t be considered as the minifying process. It is the compression technique. You can reduce the size of the HTML and XML files of your website.
It can be done using the GZIP compression. The major difference between the minifying and the compression is the compressed code should be extracted before execution. But the minified code would run directly.
Minify Website Using The Tools
The tools or the websites mentioned above can help you to improve the speed of your website by minifying the larger codes. If the size of the files gets reduced then the page loading time would improve. Have you ever thought about the minifying process?
The size of the files consisting the CSS code, Javascript code, HTML code and the XML code can be minified. The size of the file would get reduced and the browser won’t take much time to open your website. The question “how to minify website” got an answer. If you still have any query then let me know.
4 comments
Leave a Reply
Hello, Ravi!
Just wow, mate!
I am really a noob at dealing the codes and always feel so shy touching them.
I am having good speed for my blog (I think) but the only thing I lack at improving is the JS and CSS files to be minified as lots of my plugins having an enormous list of the CSS and JS files.
I often am notified to fix them up to further improve my speed. And I think I got my answers now at last. ?
Thanks for the good share, buddy! It is so helpful!
And I will must share the results with you once I get my hands on it. ?
~ Adeel
Hey Adeel,
Whenever you install any plugin then the list of the Javascript increases because most of the plugins consist PHP and javascript. It’s necessary to reduce the size of the file.
If you are having different no. of files then try to combine those files. But if you ‘re not a pro then it would bet better to use the tools. I am sure the tools would be helpful.
Thanks for stopping by.
Enjoy the day.
~Ravi
Hi Ravi,
Great post brother!
Website’s speed matters a lot in the conversion. Slow website speed cause you, your audience.
The post will be helpful for those who are looking for way to improve their website’s speed.
Thanks for sharing.
– Umesh Singh
Hey Umesh,
The page loading time of your website plays an important role in providing the user’s experience. People don’t like to visit a website which takes a lot fo time in loading.
You can minify the CSS codes by removing the space and the comments. It would help the browser to load the page in no time.
Thanks for stopping by.
Enjoy the day.
~Ravi