目前如何更好的(de)提升用(yòng)戶的(de)浏覽體驗已成爲搜索引擎和(hé)站長(cháng)共同重視的(de)問題,百度在移動落地頁體驗白皮書(shū)4.0中規定頁面的(de)首屏内容應在1.5秒内加載完成。百度搜索對(duì)用(yòng)戶行爲的(de)研究表明(míng),頁面首屏的(de)加載時(shí)間在1.5秒以内的(de)頁面,會帶給用(yòng)戶流暢快(kuài)捷的(de)極速體驗。
一般造成網站打開速度慢(màn)的(de)原因有關鍵子資源耗時(shí)較嚴重、頁面存在額外跳轉、主文檔耗時(shí)較爲嚴重。如果你的(de)站點頁面首屏打開速度多(duō)于1.5秒,可(kě)以嘗試以下(xià)辦法進行
網站優化(huà)。
1、清除不必要的(de)資源,避免進行不必要的(de)下(xià)載
網頁中往往會包含一些冗餘資源,影(yǐng)響網頁性能的(de)同時(shí)還(hái)無法給網頁帶來(lái)價值,可(kě)以考慮清除不必要的(de)資源,避免不必要的(de)資源下(xià)載帶來(lái)性能上的(de)消耗。減少網頁上關鍵JS/CSS子資源的(de)數量,并盡可(kě)能清除這(zhè)些資源,減少下(xià)載量。
2、使用(yòng)代碼拆分(fēn)減少JS負載
根據不同的(de)業務需求,開發者可(kě)以将JS中首屏的(de)關鍵代碼拆分(fēn)出來(lái),這(zhè)樣可(kě)以提前加載執行首屏中必需的(de)少量JS代碼,從而縮短頁面的(de)加載時(shí)間,其餘的(de)可(kě)以按需加載或者置後加載,同時(shí)建議(yì)開發者将JS優先放在首屏渲染完成之後,放在body閉标簽前面。
3、優化(huà)阻塞渲染的(de)JS
可(kě)以讓頁面的(de)JS進行異步執行,建議(yì)優先考慮使用(yòng)defer的(de)方式,其次是async方式,并去除關鍵渲染路徑中任何不必要的(de)JS。優化(huà)JS的(de)使用(yòng)方式,優先使用(yòng)異步JS資源。延遲所有非必需的(de)、對(duì)構建首屏渲染無關緊要的(de)JS腳本,将JS優先放在body閉标簽處。
4、優化(huà)阻塞渲染的(de)CSS
精簡網頁的(de)CSS資源,關鍵CSS子資源優先放在head标簽内,以便縮短首屏渲染的(de)時(shí)間。避免使用(yòng)CSS import指令,因爲它們會在關鍵路徑中增加往返次數從而影(yǐng)響首屏渲染性能。
5、優化(huà)和(hé)壓縮資源,減小總下(xià)載文件大(dà)小
優化(huà)和(hé)壓縮資源來(lái)最大(dà)限度地減小總下(xià)載大(dà)小,來(lái)提高(gāo)網頁加載速度。可(kě)以考慮通(tōng)過簡化(huà)編碼來(lái)優化(huà)主文檔大(dà)小,同時(shí)可(kě)以采用(yòng)chunk編碼,服務器分(fēn)chunk輸出,以及通(tōng)過GZIP來(lái)壓縮主文檔資源。
6、去除頁面的(de)額外跳轉
單次額外跳轉會使性能退化(huà)約600毫秒,這(zhè)就可(kě)能給關鍵渲染路徑增加600毫秒的(de)延遲體驗,所以建議(yì)去除額外的(de)跳轉。