A significant amount of optimization can be accomplished by focusing on the code and content used to create the user interface. By optimizing the content of JavaScript, CSS, and even HTML files, you can reduce file size, save bandwidth, and reduce loading times for visitors.
Here are some key strategies that will help you to optimize various types of code:
• Keep your code clean! – Eliminate unnecessary comments and superflous markup. Focus on clean, well-written code and you will have a strong foundation for optimizing your pages.
• Keep HTTP requests to a minimum - One of the best ways to improve the loading times for your pages is to reduce the number of HTTP requests to the server. Every JavaScript file, CSS file, and image requires its own HTTP request and thus slows down loading time. By consolidating multiple CSS and JavaScript files and implementing “sprite” techniques, you can reduce the number of HTTP requests and increase the performance of your site.
• Use sprites for images - Put simply, sprites are multiple images consolidated into a single image. By strategically placing different images in a single image file, we decrease latency in visual display while also reducing the overall number of HTTP requests. Sprites are commonly used together with CSS to create stunning and effective rollover effects, background imagery, and more. • Include your stylesheets at the top of your pages – When including external stylesheets in your pages, be sure and include them at the top of the page in the <head> section. This will enable browsers to render your pages progressively, which makes them appear to load much faster than they would otherwise.
• Include JavaScript at the bottom of your pages - When including external JavaScript files, placing them at the bottom of the page, just before the closing <html> element, ensures that your clients’ browsers are able to download the maximum number of components, decreasing load times and improving performance.
• Validate your code! - One of the best ways to ensure that you are adhering to the principles of modern web design and web standards is to check your code with an online validator. After checking your page, the validator will return a report telling you either that your code has passed with flying colors, failed miserably, or anything in-between. If there are problems with your code, the validator will explain each issue and provide suggestions for fixing them.
There are many different validators available depending on code type, however, the W3C (World Wide Web Consortium) provides just about everything you need right under one roof. Here are some URLs for two of their free code-validation services:
• W3C (X)HTML Validator – http://validator.w3.org/
• W3C CSS Validator – http://jigsaw.w3.org/css-validator/
Pingback: How to Optimize CSS and JavaScript of Your Wordpress Blog … | CSS Guru How to CSS