Limit the number of HTTP requests
A page’s download time client-side directly correlates to the number and size of files the browser has to download.
For each file, the browser sends a GET HTTP to the server. It waits for the response, and then downloads the resource as soon as it is available. Depending on the type of web server you use, the more requests per page there are, the fewer pages the server can handle. Reducing the number of requests per page is key to reducing the number of HTTP severs needed to run the website, and consequently its environmental impact.
There are several ways to reduce the number of requests per page: - Combine static files e.g. CSS and JavaScript libraries (see best practice #81) - Use a CSS sprite (see best practice #23) to group the interface’s images - Favor glyphs over images (see best practice #18) and, in general, vectors over bitmaps. - Fill the browser cache as much as possible.
Make DOM elements invisible during modification
When several properties of a DOM (Document Object Model) element must be modified, each style or content change will generate a repaint or a reflow. It is therefore usually more economical to:
- make the element invisible (set display to none) (1 reflow)
- modify the element properties and then make it visible again (1 reflow)
Thus resulting in a maximum of 2 reflows.
