Several small point performance optimization

image

do you know? When loading a webpage, an average of more than 60% of traffic to load images.

1. Simple graphics, you can use css direct, instead of using pictures
2. CDN server provides multiple sizes of pictures, the screen width and pixel density to request the corresponding picture (detailed look at me another blog post )
3. Inset with base64
4. FIG synthesis of a plurality of small Sprite FIG.
5. Select the correct image format (webp can use as much as possible, it can not, with a small map png, big picture with jpg)

Pre-request ( pre- parsed DNS, pre-rendered pages, pre-loaded)

<link rel="dns-prefetch" href="//yuchengkai.cn">
<link rel="preload" href="http://example.com" as="xxx">
<link rel="prerender" href="http://example.com"> 

To shake, choke

　　Avoid issuing multiple requests within a short time

Lazy execution, lazy loading

 　 The first screen does not need to delay the execution of logic, is not the first delay loading of images

CDN

　  Distribution room as cache data in various places