Best Practices for making web pages fast

posted in: General | 0

Summary:

The Exceptional Performance team has identified a number of best practices for making web pages fast.

Minimize HTTP Requests : 

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, style sheets, scripts, flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single style sheet.

CSS Sprites are the preferred method for reducing the number of image requests.

Image maps combine multiple images into a single image

Use a Content Delivery Network : 

Deploying your content across multiple, geographically dispersed servers will make your pages load faster from the user’s perspective.

A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users.

Add an Expires or a Cache-Control Header :

There are two aspects to this rule:

For static components: implement “Never expire” policy by setting far future Expires header

For dynamic components: use an appropriate Cache-Control header to help the browser with conditional requests

Gzip Components : 

The time it takes to transfer an HTTP request and response across the network can be significantly reduced by decisions made by front-end engineers. It’s true that the end-user’s bandwidth speed, Internet service provider, proximity to peering exchange points, etc. are beyond the control of the development team. But there are other variables that affect response times. Compression reduces response times by reducing the size of the HTTP response.

Put Stylesheets at the Top : 

While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively.

Put Scripts at the Bottom : 

The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.

Make JavaScript and CSS External  :

Using external files in the real world generally produces faster pages because the JavaScript and CSS files are cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is requested. This reduces the number of HTTP requests that are needed, but increases the size of the HTML document. On the other hand, if the JavaScript and CSS are in external files cached by the browser, the size of the HTML document is reduced without increasing the number of HTTP requests.

Minify JavaScript and CSS :

Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times. When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced.

Remove Duplicate Scripts : 

It hurts performance to include the same JavaScript file twice in one page. Duplicate scripts hurt performance by creating unnecessary HTTP requests and wasted JavaScript execution.

Configure ETags : 

Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser’s cache matches the one on the origin server. (An “entity” is another word a “component”: images, scripts, stylesheets, etc.) ETags were added to provide a mechanism for validating entities that is more flexible than the last-modified date. An ETag is a string that uniquely identifies a specific version of a component

Make Ajax Cacheable : 

To improve performance, it’s important to optimize these Ajax responses. The most important way to improve the performance of Ajax is to make the responses cacheable.

Use GET for AJAX Requests : 

When using XMLHttpRequest, POST is implemented in the browsers as a two-step process: sending the headers first, then sending data. So it’s best to use GET, which only takes one TCP packet to send (unless you have a lot of cookies). The maximum URL length in IE is 2K, so if you send more than 2K data you might not be able to use GET.

Split Components Across Domains : 

Splitting components allows you to maximize parallel downloads. Make sure you’re using not more than 2-4 domains because of the DNS lookup penalty.

Optimize Images : 

Try converting GIFs to PNGs and see if there is a saving. More often than not, there is. Developers often hesitate to use PNGs due to the limited support in browsers, but this is now a thing of the past. The only real problem is alpha-transparency in true color PNGs, but then again, GIFs are not true color and don’t support variable transparency either. So anything a GIF can do, a palette PNG (PNG8) can do too (except for animations). This simple imagemagick command results in totally safe-to-use PNGs:
convert image.gif image.png

Optimize CSS Sprites : 

Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size.

Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.

“Be mobile-friendly” and don’t leave big gaps between the images in a sprite.

Don’t Scale Images in HTML : 

Don’t use a bigger image than you need just because you can set the width and height in HTML. If you need
<img width=”100″ height=”100″ src=”mycat.jpg” alt=”My Cat” />
then your image (mycat.jpg) should be 100x100px rather than a scaled down 500x500px image

Make favicon.ico Small and Cacheable : 

The favicon.ico is an image that stays in the root of your server. It’s a necessary evil because even if you don’t care about it the browser will still request it, so it’s better not to respond with a 404 Not Found. Also since it’s on the same server, cookies are sent every time it’s requested. This image also interferes with the download sequence, for example in IE when you request extra components in the onload, the favicon will be downloaded before these extra components.

Avoid Empty Image src : 

Image with empty string src attribute occurs more than one will expect. It appears in two form:

straight HTML <img src=””>

Reference Site: http://developer.yahoo.com/performance/rules.html

Previous Post
Next Post

Leave a Reply