How to optimize website performance

• content

  1. Reduce HTTP requests: merge files, CSS sprites, inline images
  2. Reduce DNS lookups: The browser cannot download any files from this host until the DNS lookup is complete. Approaches: DNS caching, distributing resources to the right number of hostnames, balancing parallel downloads and DNS queries
  3. Avoid redirects: redundant intermediate visits
  4. Make Ajax cacheable
  5. Lazy loading of optional components
  6. Preloading of future required components
  7. Reduce the number of DOM elements
  8. Put resources into different domains: The number of resources that browsers can download from a domain at the same time is limited, and increasing domains can increase the amount of parallel downloads
  9. Reduce the number of iframes
  10. don't 404

• Server side

  1. Use a CDN
  2. Add Expires or Cache-Control response headers
  3. Use Gzip compression for components
  4. Configure ETag
  5. Flush Buffer Early
  6. Ajax requests using GET
  7. Avoid img tags with empty src

• Cookies

  1. Reduce cookie size
  2. The domain name of the imported resource should not contain cookies

• css aspect

  1. Put the style sheet at the top of the page
  2. Do not use CSS expressions
  3. Use without @import
  4. Do not use IE's Filter

• Javascript side

  1. Put the script at the bottom of the page
  2. Import javascript and css from outside
  3. Compress javascript and css
  4. remove unnecessary scripts
  5. Reduce DOM access
  6. Reasonable design of event listeners

• Pictures

  1. Optimize pictures: choose color depth and compression according to actual color needs
  2. Optimize css sprites
  3. Don't stretch images in HTML
  4. Keep favicon.ico small and cacheable

• mobile

  1. Guaranteed components less than 25k
  2. Pack Components into a Multipart Document