14 Rules for performance improvement (i)

rules to reduce HTTP requests
The golden rule of performance reveals that only 10%-20% of the end-user response time is spent on receiving the requested HTML document. The rest of the 80%0-90% time is spent on HTTP requests for all the components referenced by the HTML document (pictures, scripts, stylesheets, Flash, and so on). Therefore, the simplest way to improve response time is to reduce the number of components and thereby reduce the number of HTTP requests.
In a simple reduction, the hyperlink has some text and is associated to the destination URL. A more beautiful choice is to associate a hyperlink to a picture, such as in a navigation bar or a button. If you are associating multiple pictures with hyperlinks in this form, using a picture map can reduce HTTP requests without changing the look and feel of the page. Picture maps allow you to associate multiple URLs on a single image. The selection of the destination URL depends on where the user clicked on the picture.
There are two types of picture maps. Server-side picture map submits all clicks to the same destination URL, passing them the x, y coordinates of the user's click. The Web application maps the x, Y coordinates to the appropriate operation without requiring a back-end application to send the request. The mapping is implemented by the MPA tag of the HTML.
There are also drawbacks to using picture maps. When defining the area coordinates on a picture map, it is difficult and error-prone to take a manual approach, and it is almost impossible to define other shapes except rectangles. Picture maps created with DHTML do not work in Internet Explorer.
If you're using multiple images in the navigation bar or other hyperlinks, converting them to a picture map is the easiest way to speed up your page.
CSS Sprites
Like image maps, CSS Sprites can also incorporate images, but are more flexible. This concept is like the use of "Ouija Board", the Ouija board constantly moving, stay on different letters. To use CSS Sprites, you need to combine multiple pictures with a separate picture.
A Ouija board is any HTML element that supports a back-static picture, such as a span or div. Using the Background-position property of CSS, you can place HTML elements into the. The desired position in the background element.
inline picture
By using Data:url mode, you can include pictures in a Web page without any additional HTTP requests. Although Internet Explorer does not currently support this approach, it is worth paying attention to the savings that it can bring to other browsers.
We are all familiar with URLs that contain http: schemas. Other similar patterns include ftp:, FILR:, and mailto:. But there are many other models.
merging scripts and style sheets
The front-end engineer must choose whether to "inline" the JavaScript and CSS (that is, to embed it in an HTML document) or to place it in an external script style sheet file. In general, using external scripts and style sheets is more beneficial for performance. However, the ability to separate code into multiple small files in a way that is recommended by software engineers and in a modular manner can degrade performance because each file causes additional HTTP requests.

14 Rules for performance improvement (i)