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.

优化方向	优化手段
请求数量	合并脚本和样式表，CSS Sprites，拆分初始化负载，划分主域
请求带宽	开启GZip，精简JavaScript，移除重复脚本，图像优化
缓存利用	使用CDN，使用外部JavaScript和CSS，添加Expires头，减少DNS查找，配置ETag，使AjaX可缓存
页面结构	将样式表放在顶部，将脚本放在底部，尽早刷新文档的输出
代码校验	避免CSS表达式，避免重定向

Optimization direction

Optimization means

Number of requests

Merge scripts and style sheets, CSS Sprites, split initialization load, divide main domain

Request bandwidth

Enable GZip, streamline JavaScript, remove duplicate scripts, image optimization

Cache exploit

Use CDN, use external JavaScript and CSS, add Expires header, reduce DNS lookups, configure ETag, make AjaX cacheable

Page structure

Put stylesheets at the top and scripts at the bottom to refresh the output of the document as early as possible

Code verification

Avoid CSS expressions, avoid redirects