1. Use the CDN

    The full name of CDN is Content Delivery Network.

    By relying on the edge servers deployed in various places, users can obtain the required content nearby through the load balancing, content distribution, scheduling and other functional modules of the central platform, thus reducing network congestion and improving user access response speed and hit ratio. The key technologies of CDN mainly include content storage and distribution.

    80-90% of a website’s response time is spent downloading resources, and reducing resource download time is the golden rule of performance optimization. Compared with the complexity and huge investment of distributed architecture, static content delivery network (CDN) can effectively improve the loading speed with lower investment.

  2. Use the cache-control

    Cache-control :max-age response header, which sets the interval for requesting the same URL. No request is sent within the interval and local data is directly used, that is, 200 cache

  3. Taking advantage

    The Etag response header is matched with the if-no-match request header to compare whether the MD5 of the data has changed. If there is no modification, 304 not Modified is returned. No response entity uses local data, i.e. 304 cache

  4. Using Gzip

    GZIP was first created by Jean-Loup Gailly and Mark Adler for file compression in THE UN ⅸ system. Nowadays, it has become a very popular data compression format, or file format, used on the Internet.

    Front-end engineers can find ways to significantly reduce the time it takes to send HTTP requests and responses over the network. Of course, the bandwidth speed of the end user, the isp, the distance of the peer exchange point, etc., are all beyond the control of the development team. But there are other factors that can affect response time. Compression can reduce response time by reducing the size of HTTP responses.

    Gzip compression can typically reduce response size by up to 70% and possibly as much as 90% for some files, making it more efficient than Deflate. Major Web servers have modules, and most browsers support GZIP decoding. Therefore, compression should be enabled for text-type content such as HTML, CSS, JS, XML, JSON, etc.

    Attention!!!!!! Do not use gzip for images and PDF files. They are already compressed, so using gzip compression not only wastes CPU resources, but can also increase file size.

  5. Merge files (CSS, JS, images)

    Merging files reduces the number of HTTP requests

  6. Adjust CSS and JS positions

    Placing CSS in the <head> tag allows the page to render progressively, giving visual feedback as early as possible. If the style sheet is placed at the bottom of the page, some browsers will render the page after the CSS is loaded to reduce redrawing.

    The JS script is placed at the bottom of the page. When the browser downloads the script, other resources, even those from different domain names, are blocked. Therefore, it is best to place scripts at the bottom to speed up page loading.

    For special scenarios where scripts cannot be placed at the bottom of the page, consider the following attributes of <script> : defer; HTML5 new async property.

  7. Compressed image tool

    Try converting GIF to PNG to see if you can save space. Run PngCrush (or any other PNG optimization tool) on all PNG images.

    Use a small, cacheable favicon.ico

  8. Add a domain name to download resources in parallel

    Divide content into different domain names

    Browsers generally limit the number of parallel threads per domain (typically 6 or less), and use different domains to maximize download threads, but keep them within 2-4 domains to avoid DNS query wastage.

    For example, dynamic content is on csspod.com and static resources are on static.csspod.com. This can also disable cookies in static resource domains to reduce data transfer, as shown in Cookie optimization.