Minify

No matter how a particular website gets built, it uses various types of code to make it show up online how you want it to. These consists mainly of HTML, CSS, and JavaScript. When someone navigates to a website, all of those things are read by the server so they show up correctly for the person who wants to read an article, shop at an e-commerce site, or post on social media. They also all take time.

Minify

Minification of all the code and scripts that make up a website represents an intelligent way to speed up load times. That way, the end-user can do what they want as soon as possible, and they are not tempted to move on to the next site. This is one of the more effective ways to reduce load times. A popular tool for manual minification is https://www.minifier.org/. For WordPress users, use plugins Autoptimize, Fast Velocity Minify, Merge + Minify + Refresh or others, to do the job.

If you want to minify the CSS, HTML, and JavaScript, you have to get directly into the code and remove all the extra stuff that does not need to be there. Some of these things include extra spaces, comments, new lines, and excessively long variable names. From a load time perspective, the minification reduces the number of steps the process takes to transform the code into the visual and functional parts of a live website. The final minified files function exactly the same way as the originals.

Although the process seems quite simple, it can take a while to minify existing code. If a web developer pays attention to best practices from the start, the website will load quickly for every visitor.

Here is an example for minification –

This JS code –

var array = [];
for (var i = 0; i < 20; i++) {
  array[i] = i;
}

will be minified into –

for(var a=[i=0];i<20;a[i]=i++);

And this CSS code –

.elementor-menu-toggle{
	color:#fff;
	font-family:Helvetica, sans-serif;
	font-size:14px;
	font-weight:600;
}

will be minified into –

.elementor-menu-toggle{color:#fff;font-family:Helvetica,sans-serif;font-size:14px;font-weight:600}