Website Performance Optimization Finishing

1. Minimize the number of requests

Extract common CSS, modular, other merges. JavaScript is the same (you can avoid page loading blocking).

Reduce the number of requests by merging small icons, backgrounds, and other images on the page.

2. Reduce page volume

Compression JS

Reconstruction of 3.css&html

CSS selectors cannot be too long to use ID selectors and!important

4. Lazy Loading

Usually used in the picture more pages, if a page picture more, and the page height or width of several screens, the first time the page load, only show the visual area of the picture, when the page scrolling, the picture into the visual area and then load, which can significantly improve the page loading speed, Fewer images concurrent requests can also relieve the pressure on the server. If users only stay on the first screen, you can also save traffic. If you have more pictures in the tab, you can also apply it to the tab, and then load the picture when the tab is triggered.

Principle: Replace the image with a 1*1 placeholder image (if the placeholder image can be set to the width of the real picture is the best) the real address is cached in a custom attribute (LAZY-SRC),

When you enter the visible area (or a range of visible areas), replace the src of the placeholder image, and the real picture begins to load.

Optimization direction	Optimization method
Number of requests	Merging scripts and style sheets, CSS Sprites, splitting and initializing loads, dividing the primary domain
Request Bandwidth	Unlock gzip, streamline JavaScript, remove duplicate scripts, optimize images
Cache utilization	Use CDN, use external JavaScript and CSS, add Expires header, reduce DNS lookups, configure ETag, make Ajax cacheable
Page structure	Put the style sheet at the top, place the script at the bottom, and refresh the document's output as early as possible
Code Validation	Avoid CSS expressions and avoid redirects

Website Performance Optimization Finishing