Friday, May 02, 2014

How to Reduce Load Time and Make Fast Loading Web Pages

These are some tips and best practices for quick reference to reduce load time and have fast loading web pages.

  1. Content/Client side:
    1. Optimize image size.
      1. Use GIF format for images with few colors like logos.
      2. Use JPEG format for images with lots of colors and details such as photographs.
      3. Use PNG format for high quality transparent images.
      4. Use text in image only if it is really required.
      5. Specify image dimensions to avoid reflow once the images are downloaded. But, do not scale Down images as original file size will still download, even if the image is shown in smaller dimensions on the screen.
    2. Make Fewer HTTP Requests.
      1. Use CSS sprites to reduce the number of image requests.
      2. Use image maps instead of multiple images for interactive content.
      3. Use inline images (data: URL scheme) to embed the image data in CSS file.
      4. Combine scripts and stylesheets.
      5. You may embed JavaScript and CSS in the HTML document to further reduce the number of requests.
    3. Use a CDN (Content Delivery Network) for open source libraries such as jQuery etc.
    4. Minify JavaScript and CSS files.
    5. Put stylesheets in the HEAD tag to allow the page render progressively.
    6. Put Scripts at the bottom just before the closing body tag. This makes the page appear faster by avoiding the problem caused by blcoking parallel downloads.
    7. Avoid CSS expressions or 
      1. Reduce the number of evaluations by using one time calculations.
      2.  Use event handlers instead of CSS expressions.
    8. Make JavaScript and CSS external and that should get picked from cache next time in most of the cases. However, it may not be helpful if the server does not allow cache at all. 
    9. Reduce the number of DNS lookups by reducing the number of unique website names. However, this will also  reduce number of parallel downloads resulting in increased response time. So, you need to find a balance here. 2-4 domains should be a good balance between DNS lookup and parallel downloads.
    10. Minimize redirects.
    11. Remove duplicate scripts.
    12. Preload components while the browser is idle.
    13. Make AJAX cacheable.
    14. Reduce the number of DOM elements.
    15. Minimize the number of iframes as it blocks page onload.
    16. Use GET only if you are retrieving data. If you are only sending data, use POST.
    17. Use event delegation to attach event to the wrapper div.
    18. Use CSS instead of tables.
    19. Remove query strings from static content. A link cannot be cached with a "?" in its URL even if a Cache-control: public header is present. It acts same as Ctrl+F5.
    20. Specify a character set to speed up browser rendering.
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    21. Avoid multiple tracking scripts.
  2. Server:
    1. Use a CDN (Content Delivery Network)
    2. Add Expires or Cache Control Header.
    3. Configure the server to return Gzipped files/components.
    4. Configure ETags  or remove the ETag to make use of Last-Modified header validation based on the component's timestamp.
    5. Flush the Buffer Early. Such as for php
      </head>
      <?php flush(); ?>
      <body>
    6. Use GET only if you are retrieving data. If you are only sending data, use POST.
    7. Reduce cookie size.
    8. Update CMS software if you are using one.
    9. Switch off the plugins that you do not use.

No comments: