#fasterweb

One of the most important considerations of building websites is to make sure they load quickly. Before you begin to optimize your site(s), it´s important to see how well they are functioning, first. One way to do this is to make use of the Make the Web Faster tools, by Google. Two other options you can use are Pingdom and YSlow. Each of these tools will help you to establish a baseline of performance.

Minify HTML, CSS and JavaScript: To do so, remove all unnecessary comments, white space and code. This will improve performance because the file size will be reduced. To minify HTML, check out HTML Compress. For JavaScript, use YUI Compressor, and for CSS, test out CSS Compressor. A fourth option is to make use of the PageSpeedInsights Chrome Extension to create an optimized version of your HTML code. The PageSpeed Insights page also lists other programs you can use.

Make CSS and JavaScript External: Using external files will generally make the pages load faster because JavaScript and CSS files are cached by the browser.

Alternatively, if you use CSS in a web page, place the CSS in the HEAD element. This makes the page appear load faster and it can do so progressively. With JavaScript, move the scripts to the bottom of the page.

Eliminate Duplicate Scripts in a Web Page: This issue might seem strange but it is actually quite common. Duplicate JavaScript and CSS files degrade performance by creating unnecessary HTTP requests and wasted JavaScript execution. It´s also important to check and see if scripts have been duplicated in external files, as well. To avoid this problem is to use a script management module with your templates.

Optimize Images: Reduce image sizes using either GIF, PNG-8. orJPEG as the file formats. Make sure the size matches your usage and set the size for each page with the height and width. Do not make use of scaling, especially from larger to smaller images. The image result might look fine on screen but the file size will be the same. To truly take advantage of the smaller dimensions, use an image editing program and scale the image accordingly. The resulting file size will be smaller. It´s also important to experiment with compression for with all of these file formats. At some point you will obtain an acceptable compression with a minimum loss of quality. Experimentation is key.

Avoid CSS Expressions: CSS expressions (introduced in IE5) allow you to set CSS properties dynamically. The down side is that the expressions are evaluated whenever the page is rendered, resized, scrolled and when the user moves the mouse over the page. These ongoing (and frequent) evaluations erode the user experience.

Add Expires Headers: Due to web page complexity, many HTTP requests could be required to load all of the components. When you use Expires headers those components can be cached and this avoids unnecessary HTTP requests on successive page views. While Expires headers are most commonly associated with images, they can also be used for scripts, style sheets, and Flash.