一，html,css，js的壓縮，這個後期靠打包構建工具來實現

二，圖片的優化

1，jpg

優點：很高的壓縮比，但是可以很好儲存畫質
應用：大圖片如首屏輪播圖等
缺點：邊緣鋸齒

2，png

1,優點:背景透明，線條紋理，邊緣的處理很好
2,應用：logo和小圖片的使用
3，缺點：體積較大

3，WebP

png同樣的質量，但是壓縮比例更大。但是瀏覽器的相容還不是很好。

三，圖片載入的優化

上面講的是單個圖片如果過大的處理方式，可以選擇合適的圖片格式或者採取圖片壓縮的手段。
但是如果圖片的大小不是很大，可是數量很多呢？這時候就可以考慮圖片的載入優化。

1，圖片的懶載入（lazy loading）

第一種方式是原生的懶載入方式：在html的圖片標籤上增加屬性：loading=“lazy”
可以參考這篇部落格：

https://blog.csdn.net/VhWfR2u02Q/article/details/100644180

第二種方式是利用第三方外掛的形式：如verlok/lazyload,yall.js,Blazy

2，漸進式圖片

第二種方式是漸進式圖片：

從低畫素到高畫素。但是得讓美工儲存成漸進式圖片的格式。

3，響應式圖片

讓美工生成不同尺寸的圖片

然後，不同的裝置寬度時使用不同的圖片。