Web Performance Optimization

In fact, the purpose of optimization is only one: that is to make the web page faster to the user. Front-end optimization can be answered in terms of compressed code, concurrent requests, and so on

Waiting (TTFB) Waiting (TTFB) Waiting (TTFB) Waiting (TTFB) How to configure domain name optimization CSS such as duplicate CSS selectors or properties

Common tips for Web performance optimization

  1. The use of CSS Sprite (CSS Sprite/CSS image wizard) technology, some small images merged into a large picture, when using the background image positioning, positioning to a specific small picture on the use of Sprite image compression small, small image volume, small downloads.
  2. Image lazy loading, route lazy loading such as listening for changes in the page to load images
  3. Convert some images to icon tags to reduce HTTP requests.
  4. Place the CSS at the top of the file and the JavaScript file at the bottom
  5. Deploy some static resources on the CDN. Like on the CDN. Let’s say a page is loaded with a lot of downloads from Aliyun
  6. Webpack use the Commons – the chunk, happy – hack

Front-end optimization page experience is smooth, page display is fast, resource download is fast