"Minifying" css, html and JavaScript file sizes

Lesson Details:

Video Transcription: Now let's talk about minifying your JavaScript CSS and HTML this video is brought to you by Appy Pie’s Academy. you can see that as these three options and essentially when I expand these they're gonna show them to you and you know like it's for a smaller site you see the size is not that big as your site gets bigger you see you can we can take a look at the CSS and you can see that it's also not a lot of size here and then we're gonna look and look at the HTML and it's also not tremendous here right you can see the size and the size you know reductions and all that so it's it's you you you win a little bit and that's fantastic so every little win is great your site will load faster with every single little win and it's ultimately up to you how much time you want to spend on this if you don't care about like extra mooey mooey mooey seconds you really just have to identify the biggest problem areas in this list and take care of them and so that will optimize basically you're not you gonna spend the least amount of time for the most amount of effort but long term generally you wanna make sure that every single detail that every single done as you can get you should take if you can get it and so for that reason it's not a bad idea to go through this and optimize this now there are a number of like HTML minifiers and HTML CSS and JavaScript minifiers i'll show you kind of how they work here's an example of an HTML mini fire.

It's you can see the URL here kangh axe that github that io slash HTML - mini fire and what you'll see on the right side is all the options for it and basically the way these things work and essentially the way they work for HTML and CSS and javascript is that they'll get rid of you see this is the before I entered a page this page of mine from before and this is the after okay and what really happened is that it took all my code and it took out a lot of white space because you can see there's like collapse whitespace you see that that's one of the options I chose and you can read through it this is relatively advanced mini fire and there's a whole bunch of other options that it gives you something you can take somebody you can neglect but the biggest savings is giving up this getting rid of the space because look on the top part look how much space I was using and it's essentially you know like there's a lot of white space to get rid of so that's what I ended up doing and it shows you the savings so original size was this and you know I reduced the size by almost 50% which is pretty good and you can do this for all of your JavaScript HTML and CSS now here's the thing the HTML above that's how my code looks like when I edit it and it's very easy to edit now granted of course that you know how to edit code now the problem with this stuff on the bottom here is that this is an almost unreadable and almost uneditable by a human so how do you resolve this like how do you actually use it so what really happens is all the editing and testing and everything will be with code like this in your code base once you're done editing and once you're done testing you should have a final folder some code like the build folder where you're going to have the final versions of your HTML your CSS and they're gonna look like the bottom area they're gonna save you space they're gonna be the code functions the same but it's just not readable by humans so your server will just appreciate this because it's easier for it to process will be faster but for you you'll be always editing this and essentially as far as your computer is concerned they're identical but as far as you're concerned of course it's easier for you to read and edit the top one so you're always going to be reading it at the top one but the thing that's gonna get served up on your website is gonna be the bottom one and it's always gonna be a little faster and it's easy to manage as long as you keep a built folder for your finalized versions of your pages and that's the easy way to mitigate both the editing the readability in the load speed of this code.