Web page optimizer

How to go from 15kb to a file of 11kb without even changing one single line in a CSS file? Without ruining the looks and comments of our page. How to keep them intact for editing and highly parsed, optimized for speed and compressed but only for the visitors? How to do that without the stress of updating something when you change your code (you know the old one...take the code-> compress it-> create new css file and use that instead of the original)? That's a lot of questions and I wrote them without thinking at other possible ones.

Let's get starting. Supposing you have a 900 lines CSS file that you use in your pages to define styles. It's kinda a big because, you added and added new things that needed a style, you like to impress your visitors with some visual effects and there you have it. A huge file. The main problem is that you don't use all the styles on every page so I will ask you to identify those classes and split the original 900 lines file into more files. Write down where and what you use and we have a good start. To take every page and include file B and file A and then on another page include file B without file A but file C would result in a total mess. Maybe not at the start but it will as you will start to update your pages and forget to include something. You will discover forgotten pages that your visitors use every day as being way behind of your actual configurations. Not to mention the number of HTTP requests that will have an effect on the load speed and also not to mention the big bad, ugly header of out page that uses so many requests to files. You get the idea.

In this article I will teach you hot to go from a huge header full of styles and js files, a big number of requests that the browser has to do, a massive amount of data that needs to be readed (and this contains white spaces, coding comments and other stuff like that)

more...