Website performance optimization and finishing_html/css_WEB-ITnose

1. Minimize the number of requests

Extract common CSS, modularize, and merge others. The same goes for Javascript (which can avoid page loading blocking).

Merge small icons, backgrounds and other images on the page to reduce the number of requests.

2. Reduce page size

Compress JS

3. Reconstruction of CSS & HTML

CSS The selector cannot be too long, and the use of ID selectors and !important

4. Lazy loading

is usually applied to web pages with many pictures. If a page has more pictures than There are many, and the page height or width is several screens. When the page is first loaded, only the pictures in the visible area are displayed. When the page is scrolled, the pictures enter the visible area and then are loaded. This can significantly improve the loading speed of the page. , fewer concurrent image requests can also reduce the pressure on the server. If users only stay on the first screen, they can also save data. If there are many pictures in TAB, it can also be applied to TAB, and then the pictures will be loaded when TAB is triggered.

Principle: Replace the image with a 1*1 placeholder image (it would be best if the placeholder image can be set to the width and height of the real image). The real address is cached in a custom attribute ( lazy-src),

wait until it enters the visible area (or a certain distance from the visible area), replace the src of the placeholder image, and the real image starts loading.