網站打開速度慢(màn)怎麽優化(huà)？教你怎麽提升網站打開速度

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

1、清除不必要的(de)資源，避免進行不必要的(de)下(xià)載

如果要以更快(kuài)速度完成首屏渲染，需要盡可(kě)能的(de)減少網頁上關鍵JS/CSS子資源的(de)數量，并清除這(zhè)些資源，減少下(xià)載量。

2、使用(yòng)代碼拆分(fēn)減少JS負載

長(cháng)時(shí)間運行的(de)JS可(kě)能會阻塞主線程，這(zhè)時(shí)可(kě)以考慮使用(yòng)requestAnimationFrame() 或 requestIdleCallback() 來(lái)進行優化(huà)。根據不同的(de)業務需求，可(kě)以将JS中首屏的(de)關鍵代碼拆分(fēn)出來(lái)，這(zhè)樣可(kě)以提前加載執行首屏中必需的(de)少量JS代碼，從而縮短頁面的(de)加載時(shí)間。其餘的(de)JS可(kě)以按需加載或者置後加載。同時(shí)建議(yì)将JS優先放在首屏渲染完成之後，放在body閉标簽前面。

3、優化(huà)阻塞渲染的(de)JS

爲了(le)實現更好的(de)性能，可(kě)以讓頁面的(de)JS進行異步執行，建議(yì)優先考慮使用(yòng)defer的(de)方式，其次是async方式，并去除關鍵渲染路徑中任何不必要的(de)JS。爲了(le)更大(dà)限度減少内核渲染網頁的(de)工作量，建議(yì)延遲所有非必需的(de)、對(duì)構建首屏渲染無關緊要的(de)JS腳本，将JS優先放在body閉标簽處。如果需要運行較長(cháng)的(de)初始化(huà)序列，請考慮将它們拆分(fēn)爲若幹個(gè)階段，以便浏覽内核可(kě)以間隔處理(lǐ)其它的(de)渲染任務。

4、優化(huà)阻塞渲染的(de)CSS

默認情況下(xià)，關鍵CSS子資源是會阻塞内核渲染的(de)，請務必精簡網頁的(de)CSS資源，同時(shí)需要将CSS盡快(kuài)地完成下(xià)載，關鍵CSS子資源優先放在head标簽内，以便縮短首屏渲染的(de)時(shí)間。一個(gè)樣式表可(kě)以使用(yòng)CSS import指令從另一個(gè)樣式表文件導入規則。不過應避免使用(yòng)這(zhè)些指令，因爲它們會在關鍵路徑中增加往返次數從而影(yǐng)響首屏渲染性能。

5、優化(huà)和(hé)壓縮資源，減小總下(xià)載文件大(dà)小

優化(huà)和(hé)壓縮資源來(lái)減小總下(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、頁面存在額外跳轉

從用(yòng)戶點擊到打開頁面的(de)過程中，有些網站内可(kě)能經過額外跳轉才會将最終的(de)頁面展現給用(yòng)戶，所以建議(yì)去除額外的(de)跳轉。

百度搜索對(duì)用(yòng)戶行爲的(de)研究表明(míng)，頁面首屏的(de)加載時(shí)間在1秒以内的(de)頁面，會帶給用(yòng)戶流暢快(kuài)捷的(de)極速體驗。所以建議(yì)大(dà)家定期對(duì)網站進行自檢，可(kě)以根據以上方法提升網站頁面性能。