subject: Css And Javascript Optimization For A Speedy Website [print this page] If you can do something in CSS then its the best option.
CSS is one of the most powerful web designing tool, its highly dynamic and versatile nature makes it the best option for designing websites. In fact if you want your website to perform better and load in a browser faster, give first preference to implement any aspect of design in CSS rather than photoshop or any other application. Also its easier to make quick mock ups in CSS3. So I would say exploit it !
Minify let CSS and JavaScript do it for you.
The minification code is one of the most easiest way to speeden your site.Though the difference is in milliseconds, it gives quite a pronounced effect particularly when you are using jQuery library. If your wondering whether you would have to edit every plugin for JavaScript/CSS , you can easily download the minified version. Some example of these tools are Code Minifier for Mac, Minify for Windows, and JSCompress/CSSCompressor for platform solutions.
Never use in-line CSS or JavaScript
As per standard practices using in-line CSS or JavaScript is considered to be a bad practice. An HTML => CSSwould work perfectly instead of a lengthy in-line code. In line code not only creates legacy issues it also takes up a lot of the server load time as it becomes complicated to decipher. In some cases it can also lead to detriment of web applications. So always make it a point to extract your code.
JavaScript in the same page as HTML? Move it down for better performance.
When your coding and you find it absolutely necessary to put your JavaScript in the same page as your HTML, then itss best to keep it at the bottom of the HTML document.This helps speed up the site load time as it will go through the HTML part which is essential to load the site and then proceed to the functions and other JavaScript elements after the page has loaded. Another benefit of doing so is, that you dont have worry about any bug affecting the performance of the entire site.
DOM Optimization.
This is important, lets consider that you are requires to use a lot of jQuery and they point to various DOM elements or they end up reading through all the DOM to find something, it would slow down your site significantly. So you need to research and find out ways to overcome this. For example using div in HTML because its the only way you know to deal with it is not a good idea. Find out other ways to implement the same. You can definitely use div tags for CSS, but I would suggest optimal usage for better results.
