Web Performance

Yahoo Developer Network Best Practices for Speeding Up Your Website

These are YDN's rules for improving web performance. Be very aware of which apply to your situation.

  1. Minimize HTTP requests: perhaps combine all scripts into a single file, and maybe combine stylesheets. One request for a big script file is faster than many for many.
  2. Use a Content Delivery Network (CDN): Disperse static content (images, scripts, stylesheets, etc) across the world so users can be closer to them.
  3. Avoid empty src or href
  4. Add an Expires or a Cache-Control header: Use a "Never expire" policy for Expires header static components. Set an appropriate Cache-Control header for dynamic components.
  5. Gzip components
  6. Put stylesheets at the top: This allows a page to load progressively, giving the appearance that it's loading faster.
  7. Put scripts at the bottom: Scripts block parallel downloads.
  8. Avoid CSS expressions: You probably don't know what these are, so you likely don't need to worry. Don't use them if you do.
  9. Make JavaScript and CSS external: Don't use inline styles or scripts. Separate files can be cached, and small HTML files load faster.
  10. Reduce DNS lookups
  11. Minify JavaScript and CSS
  12. Avoid redirects
  13. Remove duplicate scripts
  14. Configure ETags: ETags allow for a fast freshness check of the request
  15. Make AJAX cacheable: Similar to rule #4
  16. Flush the buffer early: For pages with little JS and when backend gets lots of traffic. You can send HTML to the browser before its done to allow it to start fetching components early. You usually want to do it right after the <head> tags.
  17. Use GET for AJAX requests: This may or may not be a good idea. The idea is to use GET instead of POST and provide your data in the URL. It's probably better to just use GET and POST as they're intended.
  18. Post-load components: Be aware of what is needed on initial loading of a page. If something requires user interaction, it can wait and be loaded later. Everything that determines how the page looks should be loaded immediately.
  19. Preload components: Load components that you'll likely need later while the browser is idle.
  20. Reduce the number of DOM elements
  21. Split components across domains: Maximizes parallel downloads, but don't use more than 2-4 domains.
  22. Minimize number of iframes: Iframes allow an HTML document to be inserted into a parent document, but they're costly and block page onload.
  23. No 404s: They waste server resources.
  24. Reduce cookie size
  25. Use cookie-free domains for components: Reduces web traffic when cookies aren't used.
  26. Minimize DOM access: Avoid changing the DOM with JS.
  27. Develop smart event handlers: Use JS event handlers wisely.
  28. Choose <link> over @import: @link is an IE thing. Avoid it.
  29. Avoid filters: Another IE thing for CSS. Avoid it.
  30. Optimize Images
  31. Optimize CSS sprites: Arrange sprites horizontally, combine similar colors, and don't leave big gaps between images.
  32. Do not scale images in HTML: Don't have a big image that's scaled down in HTML. Use an appropriate size image.
  33. Make favicon.ico small and cacheable
  34. Keep components under 25K: A restriction for iPhone caching (may be out of date).
  35. Pack components into a multipart documents: Helps cut back on HTTP requests. Not available for every user agent.
  36. Avoid empty image src

results matching ""

    No results matching ""