Enable compression
Note that gzipping is only beneficial for larger resources. Due to the overhead and latency of compression and decompression, you should only gzip files above acertain size threshold; we recommend a minimum range between 150 and 1000 bytes. Gzipping files below 150bytes can actually make them larger.
1.Write your web page content to make compression most effective.
2.Don't use gzip for image or other binary files.
Remove unused CSS
- Remove any inline style blocks containing CSS that is not used by the current page.
- If your site uses external CSS files shared among multiple pages, consider splitting them into smaller files containing rules for specific pages.
- If a page references style rules that are not needed right at startup, put them in a separate .css file and defer loading of the file until the onload event is fired.
- If you use JavaScript to generate styles, be sure that those functions aren't called from pages that don't use those styles. This may require some refactoring of JS code.
Minify JavaScript
Minify CSS
Minify HTML
Defer loading of JavaScript
For any file containing more than 25 uncalled functions, move all of those functions to a separate, external JS file. This may require some refactoring of your code to work around dependencies between files. (For files containing fewer than 25 uncalled functions, it's not worth the effort of refactoring.)
<scripttype="text/javascript">
// Add a scriptelement as a child of the body
functiondownloadJSAtOnload() {
var element =document.createElement("script");
element.src ="deferredfunctions.js";
document.body.appendChild(element);
}
// Check for browser support ofevent handling capability
if(window.addEventListener)
window.addEventListener("load",downloadJSAtOnload, false);
else if(window.attachEvent)
window.attachEvent("onload",downloadJSAtOnload);
elsewindow.onload = downloadJSAtOnload;
</script>
Optimize images
1.Choosean appropriate image file format.
The type of an image can have a drastic impact on the file size. Use these guidelines:
- PNGs are almost always superior to GIFs and are usually the best choice. IE 4.0b1+, Mac IE 5.0+, Opera 3.51+ and Netscape 4.04+ as well as all versions of Safari and Firefox fully support PNG, including transparency. IE versions 4 to 6 don't support alpha channel transparency (partial transparency) but they support 256-color-or-less PNGs with 1-bit transparency (the same that is supported for GIFs). IE 7 and 8 support alpha transparent PNGs except when an alpha opacity filter is applied to the element. You can generate or convert suitable PNGs with GIMP by using "Indexed" rather than "RGB" mode. If you must maintain compatibility with 3.x-level browsers, serve an alternate GIF to those browsers.
- Use GIFs for very small or simple graphics (e.g. less than 10x10 pixels, or a color palette of less than 3 colors) and for images which contain animation. If you think an image might compress better as a GIF, try it as a PNG and a GIF and pick the smaller.
- Use JPGs for all photographic-style images.
- Do not use BMPs or TIFFs.
2.Use an image compressor.
Serve scaled images
Serve resources from a consistent URL
1.Serve shared resources from a consistent URL across all pages in a site.