頁面加載秒打開,留住用戶快人一步(官方推薦頁面優化方案)

百度搜索對用戶行爲的研究代表，用戶對於網站頁面的打開加載速度要求愈來愈高，首屏的加載時間過長會加速用戶的流失。

經過調研，小編髮現部分網站站點和智能小程序頁面加載速度慢的主要緣由分別是頁面關鍵子資源耗時嚴重和圖片體積過大。爲了方便開發者進行頁面加載性能優化，小編特意邀請技術同窗總結了頁面加載速度的優化方法給你們參考。

【站點頁面關鍵子資源耗時嚴重的優化方案】

1.清除沒必要要的資源及阻塞渲染的JS/CSS

頁面中每每會包含一些冗餘資源，影響性能的同時還沒法給用戶帶來價值，因此站點應當按期檢查並清除頁面上沒必要要的資源，避免資源下載帶來性能上的消耗。

若是要以最快的速度完成首屏的渲染，開發者還須要最大限度地減小頁面上關鍵JS/CSS子資源的數量，並儘量清除這些資源，最大限度地減小下載量。

2.經過代碼拆分減小JS負載

開發者能夠根據不一樣的業務需求，將JS中首屏的關鍵代碼拆分出來，以便於提早加載首屏中必要的少許JS代碼，從而縮短頁面的加載時間。其他的JS代碼能夠按需加載或者置後加載，同時建議開發者將JS優先放在首屏渲染完成以後，body閉標籤以前。

3.優化阻塞渲染的JS及JS的使用方式

JS容許咱們修改頁面的同時也會阻止DOM構建，阻塞頁面渲染。開發者能夠優先考慮使用defer的方式，其次是async方式讓頁面的JS進行異步執行，並去除關鍵渲染路徑中任何沒必要要的JS。

在默認狀況下，JS資源會阻塞解析，強制等待CSSOM並暫停DOM的構建從而大大增長首屏渲染的時間。異步JS資源則不會阻塞文檔解析器，開發者能夠考慮在首屏渲染後異步加載腳本。

4.優化阻塞渲染的CSS及CSS的使用方式

默認狀況下，關鍵CSS子資源會阻塞內核的渲染，建議開發者精簡頁面中的CSS資源，儘快將CSS完成下載，並把關鍵CSS子資源優先放在head標籤內，以便縮短首屏渲染的時間。

CSS是構建渲染樹的必備元素，首次構建頁面時，開發者應確保將任何非必需的CSS資源都標記爲非關鍵資源（好比print），並儘量減小關鍵CSS子資源的數量。

【百度智能小程序圖片體積過大的優化方案】

1.控制圖片大小

（1）針對本地圖片

本地圖片過大會致使小程序包體積過大，加載時間變長，所以開發者需儘量地壓縮圖片大小：

● 對於不須要透明格式的圖片，推薦採用 jpeg 格式來代替 png 格式

● 安卓端建議使用webp的圖片格式。webp格式在有損壓縮的狀況下，肉眼不易察覺出壓縮先後的變化，可是圖片體積卻會大大減少（注意：iOS 百度 App 版本 < 11.22 時不支持webp格式）

● 確保小程序包內沒有冗餘和無用的圖片資源

● 延遲加載不重要的圖片，並在關鍵圖片渲染完成後再加載後續內容

● 使用工具對圖片進行壓縮

（2）針對網絡圖片

在智能小程序中，對於部署到 CDN 上的網絡圖片，也須要進行壓縮：

● 經過CDN 靜態資源服務器獲取圖片資源，並添加圖片壓縮規則

● 使用圖片壓縮工具對圖片進行壓縮後，再上傳至 CDN

2.開啓圖片懶加載

智能小程序的image組件提供了lazy-load屬性，開發者能夠開啓圖片的懶加載功能進行優化：

<image lazy-load="true"/>

3.謹慎使用耗費性能的屬性

image組件mode屬性提供了 13 種模式，widthFix模式是其中一種。因爲widthFix模式須要動態計算圖片的寬度，致使頁面重繪，所以應謹慎使用mode屬性的widthFix模式。

4.使用漸進式 JPEG 來優化用戶體驗

打開漸進式 JPEG 時頁面會先展現整個圖片的模糊輪廓，隨着掃描次數的增長，圖片變得愈來愈清晰。這種格式的主要優勢是在網絡較慢的狀況下，能夠預覽到圖片的輪廓，必定程度上能夠提高用戶體驗。

以上即是百度搜索資源平臺爲你們整理的有關網站站點和百度智能小程序頁面加載速度的優化方法啦，你學會了嗎～

原文做者：百度搜索資源團隊&認真的胡小魚

原文連接：https://www.kuaigrowth.com/article/20.html