1 - Minimize HTTP-requests:
-In the HTTP request environment
On accessing a page by a user most of the page load time gets spent on uploading a variety of page components: HTML structure of the page, JS scripts, CSS, images, flash, etc.
Given the number of components is being reduced, HTTP-requests quantity gets decreased several-fold, thus the former will strongly factor into speeding up the page load time.
Combine Javascript into one file, and CSS files into one CSS.
The presented calculation is quite simple: 10 JS-files = 10 HTTP , 1 JS-file = 1 request - on the assumtion that the majority of browsers postpone uploading the page until the moment each JS file has been loaded and processed.
Using СSS-sprites helps decrease the number of instances of the background image retrieval.
2 - Using compression:
Gzip seems to be a most popular method of compression.
Normally, compression is applied to HTML, CSS, JS. As for Gzip it is less appropriate, though, to apply it to images and PDF-files, as the latter have yet been packed and it hurts by trying up to pack them again with Gzip as it may expand the file too much. Drupal makes use of CSS Gzip and Javascript Aggregator modules.
3 - Minimizing JavaScript and CSS:
In fact, removing unnecessary characters from the code seems to be one of the practices that reduce its size and thus improve page load time. To minify a code all comments are being 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 has been reduced. JSMin and YUI Compressor are two most popular tools for resizing JavaScript code. The YUI compressor can minify CSS, too. Javascript Aggregator may be used in Drupal, too. CSS minifying is launched authomatically in Drupal 7 when css compression gets turned on.
4 - Improving the way styles and scripts are included into a document:
Metatags and <title> should go first in <head> tag of page to be followed by stylesheets. It explains why many browsers, Internet Explorer included, block rendering routine to avoid redrawing the elements after their styles have changed. The user is being stuck viewing a blank white page until styles have been downloaded.
Write JS scripts after all <head> elements. The problem with the scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers can download no more that two components in parallel per hostname. While the script is being downloaded, the browser won't start any other downloads, even on different hostnames. That's the reason for moving as many scripts as possible to the bottom of the page.
5 - Avoiding CSS Expressions:
CSS expressions are a powerful and risky way of setting CSS properties dinamically, and they are supported in Internet Explorer versions 5 through 7. The problem with expressions is that they are evaluated more frequently than most people would expect. Not only they are evaluated when the page is rendered and resized, but also when the page is scrolled and even when the user moves the mouse across the page. Adding a counter to the CSS expression allows keeping track of when and how often CSS expression is evaluated. Moving the mouse around the page can easily generate more than 10,000 evaluations, hence if you still need to use CSS expression, remember that it affects productivity of your page.
The problem with AlphaImageLoader filter (fixing problem with semitransparent PNG in IE version <7) is that it blocks rendering and "freezes" browser's window when the image is being downloaded. This also increases memory consumption affecting each element (and not the image only) thus contributing to the problem. Staying away from AlphaImageLoader and replacing it with PNG8 instead seems to be a better option in keeping aflote productivity in IE. In the cases when AlphaImageLoader filter is the only option, the hack with underline _filter can well be used, so as to keep our IE7+ users happy (if you have separate file for all IE) or else, you can use JavaScript, as a better option.
6 - Using external JavaScript and CSS:
Using external files speeds up page download times as JavaScript and CSS files are being cached by the browser. JavaScript and CSS that are inlined in HTML documents get downloaded every time the HTML document is accessed. The only exception where inlining is preferable is with home pages that have a few (perheps only one) page views per session, then you may find that inlining JavaScript and CSS may result in faster end-user response times.
7 - Removing duplicate scripts:
It also hurts by including JavaScript file twice in one page. This isn't as unusual as one might think. Yahoo! reports that in two out of ten top U.S. sites duplicated script was found. In Internet Explorer, if an external script is included twice and is not cacheable, it generates two HTTP requests during page loading. Even if the script is cacheable, extra HTTP requests occur when the user reloads the page.