Have you ever visited a website and it suddenly took a long time to load? Even though your internet connection is fine. That would be very annoying right? If you are not a patient person, then you will immediately leave the website and choose another similar alternative website.
For website developers, this is certainly very detrimental right? Just because the website performance is not fast enough, you end up losing visitors. For that, website developers will use the help of minify. What is minify?
Minify is commonly used for website needs and SEO (Search Engine Optimization). Minify affects the performance speed of a website. When our website is accessed, it loads fast, so visitors will be happy. In addition, search engines will also consider our website. This means that website speed affects SEO.
So, to find out more about the meaning of minify and how it affects website performance, check out this article!
What is Minification?
Minify is a technique or method commonly used to reduce the size of HTML, CSS, and Javascript files. That way, loading a website will be faster when accessed by visitors.
Minify itself means the process of removing or removing characters that are not needed in programming code. In other words, minify is the process of removing white space characters, newlines, comments, and delimiters from the created website script. These characters are no longer needed after the coding process.
Actually, these codes are not really needed when they are executed. So, if the code is removed it will not be a problem. Conversely, the performance of loading websites when accessed becomes faster. Well, the website scripts processed by minify are HTML, CSS, and Javascript.
Why Does Minify Affect Website Speed?
As mentioned above, when the coding process is complete, there are code characters that are no longer needed. For example, such as white space or space characters, newlines, comments, and so on. The code that will be removed by minify is no longer needed. So it's like throwing out unused objects from a cupboard. That way, the wardrobe will be looser.
Likewise on the website. Websites that have reduced the load of code that is no longer needed for this execution can lighten their performance. The website loading process is getting faster. Fast website performance will affect search engine algorithms in recommending your website to users.
This of course will also affect the number of visitors to your website. When your website is successful in performing on search engines, it will have the potential to be visited more. In addition, faster website performance also makes people who access it happier. Your website will be considered reliable and trustworthy.
Is minify necessary?
The following are the reasons why CSS, HTML & Javascript need to be minified, namely:
1. File size becomes small
These minified CSS & JavaScript files can be smaller in size. Almost all spaces, comments and documentation can be removed when carrying out the "minification" process. So the file is more compact. With minification, the Javascript size obtained can be around 48% smaller and CSS can be around 60% of the original size.
2. The website becomes faster to access
Because the file size becomes smaller, website loading can work faster. This is a process of one of the Front End Optimization (FEO) techniques. So, the impact obtained from the overall size of the website can also be smaller and lighter.
3. Save Bandwidth and Hosting/Server Space
Because the file size can be smaller, your hosting/server space can be freer. Bandwidth also becomes more efficient.
How to Minify CSS, HTML & Javascript
In simple terms, the minify process can remove character spaces that are no longer needed, for example newlines, comments and delimiters in your code. These characters are used to provide readability and visual purposes, but are no longer needed to execute code. The end result of the minify process can increase download speed, parsing and execution time.
1. Look for CSS, HTML, JavaScript files that have not been minified
In this step, you can use GTMetrix to get information on what assets need to be minified. In this case it is CSS, HTML and Javascript.
2. Replace files that have not been minified
Before you make any changes to your CSS, HTML or JavaScript files, make sure you have backed up your WordPress website. Apart from that, you can also backup the files you want to replace.
Once you know the files that need to be minified, you can follow these steps:
1. Change manually
The good thing about GTMetrix is that you can find out directly which version of CSS, JS and HTML has been optimized just by pressing the See optimized version button next to the file name. Then, files that have been optimized can be downloaded/opened in the browser. Then by using the FTP application, you can change the old file with the same file name as the previous name.
2. CMS Plugins
WordPress users can use plugins like Better WordPress Minify or W3 Total Cache to get the same results. You can follow this guide for more detailed instructions on how to install the W3 Total Cache plugin.
3. CloudFlare
CloudFlare has a free service that can speed up and protect your website. The way it works is by becoming a proxy between visitors and the hosting server. CloudFlare also provides protection against DDoS attacks and interestingly this service is free.
One of the features in the free package is a tool for minifying CSS, HTML and JS. You can enable resource minification using the Performance -> Auto-Minify menu:
It is also not recommended that you use the Auto-Minify feature on CloudFlare if you have used a minify plugin such as W3 Total Cache. Additionally, CloudFlare cannot minify scripts from 3rd parties and links (Facebook & Twitter).
3. Testing Changes
After replacing the files/code in the version that has been minified, the last thing that needs to be done is to carry out a test. You can do this by testing again with GTMetrix.
How to Easily Optimize Minify on Websites
There are three easy steps you can take to apply this minify technique, namely:
1. Perform website performance analysis with the help of GTMetrix
The first way you can do to optimize minify is with the GTMetrix service. All you have to do is enter the domain name in the GTMetrix search field. Then GTMetrix will scan your webtime and find which parts need optimization.
Actually there are many tools available on the internet and you can use them to optimize minify. But, to do it is usually quite complicated because you have to do it manually. Apart from that, you also need to back up files or websites first. The reason is, if one day you make edits to the script, it will be more difficult to do. This is because the script is intended for machines, not humans.
2. Carry out the minify process
The next step you can do is the minify process. There are three options that you can choose from, including:
a. Minify CSS and JavaScript through online tools
The tool you can use to do this is minifier.org. How to? First, you must first log in to cPanel hosting. You can do this by adding /cpanel after your website URL. After successfully logging in to cPanel, select Files then click File Manager.
Look for the CSS file that you want to minify according to the instructions from GTMetrix earlier. When finished, click the file and select the Download menu to back up the file.
Next, you can select the Edit menu to see the source code for the CSS file that you minified earlier. All source files will appear after you successfully enter the editor page. Visit the minifier.org page again, then paste the source code earlier into the column provided.
After success, click the CSS option then press the Minify button. Wait for the process a few moments. If successful, a series of minified CSS source code will appear. Copy the code and return to the editor page.
Delete the source code on the editor page and replace it with the source code that you copied earlier. Finally, click Save Changes to save changes. To minify JavaScript, repeat the steps above. If everything is done, it means that you have successfully used online tools to minify.
Even so, this option is not recommended. Because the process is manual, it will take a lot of time. Imagine if you have a lot of files that need to be minified. Of course it will drain time and energy right?
b. Minify CSS, HTML and JavaScript files via WordPress plugins
If you are a WordPress user, you can take advantage of this option. The process of minifying HTML, CSS, and JavaScript with this option is easier to do. You can use third party plugins like LiteSpeed Cache.
The first thing you have to do is login to your WordPress dashboard. After that, select the Plugins menu and click Add New. Type LiteSpeed Cache in the search field. After successfully appearing, click Install Now. Wait a few moments for the installation process. then click Activate.
So, when it's active, select LiteSpeed Cache and click Page Optimization in the available sidebar. On the CSS Settings menu, click the ON button in the Minify section. Do the same process on the JS Settings and HTML Settings menus.
The minify process with this second option has been completed. Easier and simpler than the previous option right? Apart from these two options, you can also try the third option.
c. Minify JavaScript, CSS, and HTML via Cloudflare
The next method you can try is through Cloudflare. You can do this by using a built-in feature called Auto Minify. Make sure you have configured Cloudflare first on your website. Next, login to the Cloudflare dashboard. Select Speed and click Optimization.
After successfully entering the Speed Optimization page, scroll down until you find the Auto Minify menu. Check the JavaScript, CSS, and HTML options. After a series of processes have been passed, you can successfully minify automatically using Cloudflare. It's even easier right?
3. Re-analyze after the minify process
After successfully minifying with one of the options above, you need to re-analyze the website. The goal is to check again whether the optimization you did was successful or not. How to?
Visit the GTMetrix page again. After that, do a performance analysis of your website. When GTMetrix shows a score of 100%, then the minify process that you did has succeeded in improving the performance of your website.
Conclusion
Minify is a term in programming that refers to the process of removing characters that are no longer needed to execute code. With the minify process, the file size becomes smaller, the website becomes faster to access, saving bandwidth and hosting/server space.
Apart from that, the minify process can reduce 10% – 95% of code size. This can certainly make the website run faster. As a result, the website can get a good Search Engine Optimization (SEO) score. This is also a technique for saving resources on the web server.
So, that's a complete explanation of what minify is and how to optimize it. There are three options that can be done to minify, namely by manually online tool, using the WordPress plugin, and via Cloudflare. You are free to choose to use the option you like.
But, usually the option of using an online tool manually is not recommended. The reason is, you have to minify one by one. This of course will consume a lot of energy and time. This minify process affects website performance because it helps remove code that is no longer used in the coding process. With a reduced load, the website will load faster.
When website performance is faster, visitors will consider your website more. In addition, search engines like Google will also recommend websites that have better performance to enter their algorithm. So, your website is easier to index. This certainly affects the traffic visits.