HTML: Optimizing Page Weight and Load Speed

  1. Turn on gzipping for js and css – this will make a huge difference
  2. Minify and concatenate
    • Minify all css and js files: this reduces file size.
    • Concatenate: this reduces http requests making the page load faster
    • Move all css to the head if possible
    • Place all js files at the bottom of the page; just before the closing </body> tag – to prevent them blocking downloading of resources
  3. Use conditional loading of scripts if necessary
  4. Use CDN’s for loading publicly available scripts such as jquery:
    • // this loads from the CDN// this loads from the CDN
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    • // this loads from local if the CDN is inaccessible
      <script>!window.jQuery && document.write(unescape('%3Cscript src="local/path/to/js/jquery-1.6.1.min.js"%3E%3C/script%3E'))</script>
  5. You can losslessly compress images using pngout or something similar to reduce image sizes further
  6. Use expires-headers and set them to at least a week in the future for files that are not going to change very often so they can be cached efficiently

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA