㈠ 前端網站常規優化方案
1、減少請求次數
2、減小資源大小
3、提高響應和載入速度
4、優化資源載入時機
5、優化載入方式
1、合並、壓縮、混淆html/css/js文件(webpack實現,減小資源大小)
2、Nginx開啟Gzip,進一步壓縮資源(減小資源大小)
3、圖片資源使用CDN加速(提高載入速度)
4、符合條件的圖標做base64處理(減小資源大小)
5、樣式表放首部,JS放尾部(JS單線程,會阻塞頁面;資源載入方式)
6、設置緩存(強緩存和協商緩存,提高載入速度)
7、link或者src添加rel屬性,設置prefetch或preload可預載入資源。(載入時機)
8、如果使用了UI組件庫,採用按需載入(減小資源大小)
9、SPA項目,通過import或者require做路由按需(減小資源大小)載入
10、服務端渲染SSR,加快首屏渲染,利於SEO
11、頁面使用骨架屏,提高首頁載入速度(提高載入速度)
12、使用 JPEG 2000, JPEG XR, and WebP 的圖片格式來代替現有的jpeg和png,當頁面圖片較多時,這點作用非常明顯
13、使用圖片懶載入-lazyload
㈡ 前端開發中,對圖片的優化技巧有哪些
階段一、圖片從PS中出來的時候:
1、大圖jpg,保存為連續模式。可以有模糊漸顯的效果。普通的是掃描列印效果。
2、小圖icon,http1.x伺服器的話整在一起導出。http2.0伺服器就無所謂了,可單個保存。
3、部分不適合與2切在一起的小圖片,使用base64編碼字元串代替。
階段二、圖片在代碼中使用的時候:
1、圖片保存在額外CDN伺服器。可節省代碼伺服器空間,加快圖片訪問。
2.1、在圖片即將進入到視野范圍內時再載入,可節省流量,加快首屏展示。
2.2、在網路空閑的時候預載入後續的圖片可以讓用戶等待時間更少。
3、考慮SEO的話,非內容的圖片使用背景代替?
4、好的圖片CDN自帶圖像處理功能,諸如裁剪壓縮之類的功能,可以上傳一張大圖,使用帶有不同參數的url來在不同的場景中使用圖片。
階段三、項目上線
1、盡量不要讓圖片鏈接失效好了