Faster Loading Websites
LeonDoesCode (271)

Minification?

You may have used HTML, CSS and/or JS files that have .min. in their name. While putting this in your files name doesn't make it faster, it does allow people looking at the file to know that it is a minified version. But what is minification?

Minification, with HTML, CSS and JS, is talking out unnecessary data, such as comments and white space. This will cut the file size down, which will in turn make the web page load faster. For the most efficient version of your web page, you will want to:

  • Minify your HTML files,
  • Minify your CSS files,
  • Minify your JS files and
  • Compress your Image files.

HTML, CSS and JS

There are two main ways to go about minifying your code. You may decide to:

  • do it by hand, so that you have full control over what is happening. However, you may end up missing out parts, or not making it as minimal as possible. This is also a very time consuming task when you start making large files. But you have the added benefit of changing code as you minify it, making it work a bit better and faster than before.

  • Or use a tool, so that it is done fast. Tools to do this can be found all over the place, but the amount that these tools do will vary. It's always best to have a look at the file produced after, to see if you can change anymore of it. Remember that tools do as they are told, so they are most likely not going to look for better solutions than what you have in your code.

When you look for the tools to do this, make sure that you choose the right ones for your HTML, CSS and JS files. There are differences between how they are laid out, so using the wrong one may case problems with the code that make it not work.

Images

What about your Image files? Well, you will have to choose whether you do or don't mind loosing some detail in them. If you don't want to loose some of the data in your Image files, then go for a Lossless Image file Compressor. Otherwise, you will can use a Lossy Image file Compressor.

If you decide to use a Lossless Compressor, then your file sizes won't change much. These are likely to remove unnecessary metadata in the Image files, and optimise the Image files data, but they are not likely to do much else.

Lossy Compressors can change the file size drastically, depending on what settings you choose. You don't have to go crazy, but try and bring the file size down, whilst keeping the image looking good.

Once again, you can find these tools everywhere, just make sure that you use the right one for the right file type.

If you can, try to use Vector Images over Bitmap Images. Vectors Images use math to decide what they look like, so they will:

  • Always look sharp, no matter what size you stretch them too
  • and have smaller file sizes, because they don't store information for every single pixel like Bitmap Images.

Conclusion

When you minify your files, keep a backup of the unminified ones which you can continue to edit. Otherwise, you will end up having troubles when trying to change parts of the code. I hope you found this useful.

Hope you have a great day!

P.S
If you have any suggestions for tutorials, leave them in the comments and I'll be sure to have a look. If you like one in the comments, then give it an up vote to show that you want to see it. It makes my life so much more easier. Thanks in advance!

You are viewing a single comment. View All
PDanielY (279)

If you put .min. in your file name it is automatically minified?

LeonDoesCode (271)

@PDanielY No. You have to do it yourself, but having .min in the file name shows people looking at the sources that it has been minified.

PDanielY (279)

@LeonDoesCode Then you should probably add that in the tutorial

LeonDoesCode (271)

@PDanielY

You may have used HTML, CSS and/or JS files that have .min. in their name. While putting this in your files name doesn't make it faster, it does allow people looking at the file to know that it is a minified version. But what is minification?

Under the title "Minification?"