近期很多朋友用網(wǎng)站體檢工具發(fā)現(xiàn)自己網(wǎng)站打開速度都超過了1秒，有的地區(qū)3~5秒，甚至更多。這樣不僅影響用戶體驗(yàn)，而且還會(huì)導(dǎo)致展現(xiàn)變少，流量下滑。今天遠(yuǎn)策科技建站團(tuán)隊(duì)總結(jié)了網(wǎng)站打開速度慢的常見原因以及提升網(wǎng)站打開速度的優(yōu)化方法給大家進(jìn)行參考。

1、清除不必要的資源，避免進(jìn)行不必要的下載

如果要以更快速度完成首屏渲染，需要盡可能的減少網(wǎng)頁上關(guān)鍵JS/CSS子資源的數(shù)量，并清除這些資源，減少下載量。

2、使用代碼拆分減少JS負(fù)載

長時(shí)間運(yùn)行的JS可能會(huì)阻塞主線程，這時(shí)可以考慮使用requestAnimationFrame() 或 requestIdleCallback() 來進(jìn)行優(yōu)化。根據(jù)不同的業(yè)務(wù)需求，可以將JS中首屏的關(guān)鍵代碼拆分出來，這樣可以提前加載執(zhí)行首屏中必需的少量JS代碼，從而縮短頁面的加載時(shí)間。其余的JS可以按需加載或者置后加載。同時(shí)建議將JS優(yōu)先放在首屏渲染完成之后，放在body閉標(biāo)簽前面。

3、優(yōu)化阻塞渲染的JS

為了實(shí)現(xiàn)更好的性能，可以讓頁面的JS進(jìn)行異步執(zhí)行，建議優(yōu)先考慮使用defer的方式，其次是async方式，并去除關(guān)鍵渲染路徑中任何不必要的JS。為了更大限度減少內(nèi)核渲染網(wǎng)頁的工作量，建議延遲所有非必需的、對(duì)構(gòu)建首屏渲染無關(guān)緊要的JS腳本，將JS優(yōu)先放在body閉標(biāo)簽處。如果需要運(yùn)行較長的初始化序列，請(qǐng)考慮將它們拆分為若干個(gè)階段，以便瀏覽內(nèi)核可以間隔處理其它的渲染任務(wù)。

4、優(yōu)化阻塞渲染的CSS

默認(rèn)情況下，關(guān)鍵CSS子資源是會(huì)阻塞內(nèi)核渲染的，請(qǐng)務(wù)必精簡網(wǎng)頁的CSS資源，同時(shí)需要將CSS盡快地完成下載，關(guān)鍵CSS子資源優(yōu)先放在head標(biāo)簽內(nèi)，以便縮短首屏渲染的時(shí)間。一個(gè)樣式表可以使用CSS import指令從另一個(gè)樣式表文件導(dǎo)入規(guī)則。不過應(yīng)避免使用這些指令，因?yàn)樗鼈儠?huì)在關(guān)鍵路徑中增加往返次數(shù)從而影響首屏渲染性能。

5、優(yōu)化和壓縮資源，減小總下載文件大小

優(yōu)化和壓縮資源來減小總下載大小，來提高網(wǎng)頁加載速度。可以考慮通過簡化編碼來優(yōu)化主文檔大小，同時(shí)可以采用chunk編碼，服務(wù)器分chunk輸出，以及通過GZIP來壓縮主文檔資源。

6、頁面存在額外跳轉(zhuǎn)

從用戶點(diǎn)擊到打開頁面的過程中，有些網(wǎng)站內(nèi)可能經(jīng)過額外跳轉(zhuǎn)才會(huì)將最終的頁面展現(xiàn)給用戶，所以建議去除額外的跳轉(zhuǎn)。

百度搜索對(duì)用戶行為的研究表明，頁面首屏的加載時(shí)間在1秒以內(nèi)的頁面，會(huì)帶給用戶流暢快捷的極速體驗(yàn)。所以建議大家定期對(duì)網(wǎng)站進(jìn)行自檢，可以根據(jù)以上方法提升網(wǎng)站頁面性能。