Posted on May 21, 2009 - by ruby

Website Optimization Best Practices, speed up your website load

Once i have performance issue in a website project i am working at, and i have wasted hours of my time to fix it up both in the server-side and client-side, for future checklist i searched on web and found great list of best practices to speed up our web page load at yahoo developer network.

Below are the summary:

1. Minimize HTTP Requests, this can be done with the following practices:
   • Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script
   • CSS Sprites, combined your background image into a single image and use CSS property to control the position of image segment
   • Image maps combine multiple images into a single image
   • Inline images use the data: URL scheme to embed the image data in the actual page
2. Use a Content Delivery Network
3. Add an Expires or a Cache-Control Header:
   • 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
4. Compress HTTP text response with Gzip Components (text, html, json, xml)
5. Put CSS/stylesheets declarations at the Top
6. Put client side scripts at the bottom, some scripts can be placed at the bottom but some may not, so use it as neccessary
7. Avoid CSS Expressions, since it is evaluated more than we expect: on load, resize, scrolled, and even on mousemove
8. Make JavaScript and CSS External, take the benefit of browser caching mechanism
9. Reduce DNS Lookups in server’s settings
10. Minify JavaScript and CSS, you can use JSMin and YUI Compressor to achieve this goal
11. Avoid Redirects, one of the common mistaken is missing a trailing slash (/) from a URL, i.e: http://www.domain.tld/directory will be 301 redirected to http://www.domain.tld/directory/
12. Avoid scripts duplication
13. 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.
14. Make Ajax Response Cacheable, some rules should apply also to ajax are: Add an Expires or a Cache-Control Header, Compress HTTP reponse with Gzip component, Reduce DNS Lookups, Minify JavaScript, Avoid Redirects, Configure ETags
15. Flush the Response Buffer Early, in php there is flush(), and response.flush in asp
16. Use GET for AJAX Requests, because POST method is implemented in the browsers as a two-step process: sending the headers first, then sending data.
17. Post-load Components, Load page element only when it is neccessary or after the top priority elements is loaded. Have a l ook at YUI Image Loader, YUI Get Utility, or jQuery Lazy Load
18. Preload Components
    • Unconditional preload – as soon as onload fires, you go ahead and fetch some extra components.
    • Conditional preload – based on a user action you make an educated guess where the user is headed next and preload accordingly.
    • Anticipated preload – preload in advance before launching a redesign.
19. Reduce the Number of DOM Elements, means you need to optimize your markup, do not use new element if you can solve the issue in different ways
20. Split Components Across Domains, Splitting components allows you to maximize parallel downloads.
21. Avoid using iframes (and frames either)
22. No 404s, because the HTTP request is expensive
23. Reduce Cookie Size, It’s important to keep the size of cookies as low as possible to minimize the impact on the user’s response time
24. Use Cookie-free Domains for Components, You should make sure static components are requested with cookie-free requests. Create a subdomain and host all your static components there.
25. Minimize DOM Access:
    • Cache references to accessed elements
    • Update nodes “offline” and then add them to the tree
    • Avoid fixing layout with JavaScript
26. Develop Smart Event Handlers, attach event handler via parent elemnt wherever possible
27. Choose
    over @import for stylesheets
28. Avoid Filters, mostly comes when dealing with IE6, YDN recommended using PNG8 which working fine in IE, but for me better shoot the IE6 with a machine gun (a lot headache cos of IE6 already)
29. Optimize Images: Try converting GIFs to PNGs, Run pngcrush (or any other PNG optimizer tool) on all your PNGs, Run jpegtran on all your JPEGs
30. Optimize CSS Sprites:
    • Arranging the images in the sprite horizontally as opposed to vertically
    • Combining similar colors in a sprite helps you keep the color count low
    • “Be mobile-friendly” and don’t leave big gaps between the images in a sprite.
31. Don’t Scale Images in HTML
32. Make favicon.ico Small and Cacheable
33. Keep Components under 25K
34. Pack Components into a Multipart Document

Check out the original article at YDN