Loading speed of your web pages is one of your biggest priorities when it comes to providing quality to people (and clients). When it comes to any optimization or customization of your files and code, it is great idea to make copies of those files and save them on some safe place just in case that something might not end as it should. One version will be the normal – readable – and the second one will be the minified one. This will make it easier to make any changes to code in the future. Sure, you can find many online tools that will prettify your code again (add white space, indentation and etc.) but keeping original files on safe place is good habit. So before doing anything backup everything. Let’s take a look how can we speed up our page a bit.
Optimization of HTML.
When it comes to HTML code, there is not so much to do to optimize it. It’s more about ensuring that the code is valid and by latest standards so browsers will have no troubles with rendering the content. Still, you can improve the speed a bit by removing unnecessary comments from the code. While it is good for readability to comment the structure of code, for files that will be on the server it is just waste of space. If you like to divide your code into section with comments, write notes or whatever keep them in your back up files. Every comment that is no life or death case is not needed. Simply remove them. It will make the final size of your html file smaller and faster to load by browsers.
Optimization of CSS and JavaScript.
First thing to do is same as with HTML – making sure that your stylesheets and scripts are written in valid way and without any typos. One typo can cause serious troubles (ask any programer) so pay attention to them. Another step you can make is to minify the code. Since browsers doesn’t care about white space, by minifying the css files you can easily trim all white space, indentation and returns. The final code will be pretty hard to read for human being but for browsers it will still be easy job to read it and render appropriately. Don’t forget to have back ups of your files. After you are done with minifying your css and js files you can load them on the server.
Optimization of page assets.
When you are done with main files of your pages, you might think that there is nothing more to do. Not so fast. You can take a look at your images and optimize them as well. There are great tools like JPEGMini (PC, MAC), PNGoo (PC) and many more which can reduce these files size sometimes for more than fifty percent. These tools will not damage your image in any way or lower the quality. They just use advanced algorithms to deal with every single pixel of particular image and encoding it in the best way possible. Trust me, you will not see any difference in quality (but the difference in size will be significant).
Compressing
If you are more skilled and know something about customizing the settings of your hosting, or have someone who have this abilities, you can also use the power of compression. With this you can compress your files into even smaller size and make the page load faster. It’s similar to zipping files on your computer into archives for saving some space. If you are interesting in compression, take a look at Gzip and similar tools you can use to deal with transferring your files from servers to end users.
After all that being sad, it’s easy to over do it and go to far. While it’s bad idea to suffer dramatic speed issues (have you heard about flash?) for some fancy visual tricks, it is also bad idea to cut the page to bones for the sake of speed. You should always aim for the golden road right in the middle of optimization and visual aesthetics of your page.
Online tools:
http://htmlcompressor.com/
http://cssminifier.com/
https://jscompress.com/
http://refresh-sf.com/yui/
http://gpbmike.github.io/refresh-sf/
Images:
http://www.jpegmini.com/
http://pngquant.org/
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
