網(wǎng)站頁面加載慢的可能原因及解決方法(全)

點(diǎn)擊上方藍(lán)字關(guān)注我，學(xué)習(xí)更多知識

隨著人們生活節(jié)奏的加快，人們對等待的容忍度越來越低，就連上網(wǎng)打開頁面等待的時間也越來越短，從30秒逐漸縮短為3秒，如果一個頁面3秒內(nèi)沒有打開，那么這個用戶就很容易流失。

所以，不管作為產(chǎn)品經(jīng)理還是運(yùn)營人員，要提升產(chǎn)品的用戶體驗(yàn)首先需要提高產(chǎn)品頁面的加載速度。如果因頁面加載慢導(dǎo)致用戶離開，縱然你的產(chǎn)品功能再好用、視覺設(shè)計(jì)再震撼、文案內(nèi)容再精彩，用戶也不會知道了。

想要提高頁面加載速度，首先需要分析目前頁面加載慢的原因，下面列出頁面加載慢的6種常見原因及處理方法：（ps：以下都是純經(jīng)驗(yàn)干貨分享，建議先點(diǎn)贊收藏以免用時找不到）

1、 接收數(shù)據(jù)時間過長，如下載資源過大

解決方法：對HTTP傳輸進(jìn)行壓縮，即在js，css、圖片等資源已經(jīng)壓縮的基礎(chǔ)上，在HTTP傳輸過程中的再次壓縮。客戶端可以通過Accept-Encoding頭來聲明瀏覽器支持的壓縮方式，服務(wù)端通過Content-Encoding來啟用壓縮，配置壓縮的文件類型，壓縮方式。gzip使用無損壓縮，壓縮效果最佳，已經(jīng)成為使用最為普遍、支持的瀏覽器最多的數(shù)據(jù)壓縮格式。

2、JavaScript腳本過大，阻塞了頁面的加載

解決方法：將JavaScript腳本放在標(biāo)簽前。script沒有async和defer時，JS文件將在下載后立即執(zhí)行。這種情況下，script放在頂部會阻塞頁面呈現(xiàn)，在網(wǎng)速慢的情況下會導(dǎo)致“白屏”，直到腳本下載完畢才繼續(xù)呈現(xiàn)頁面。因此，script放在底部可以讓頁面盡快呈現(xiàn)。

3、 CSS、JavaScript、圖片等需要重復(fù)加載

解決方法：靜態(tài)資源統(tǒng)一放在一個靜態(tài)域名上，減輕重復(fù)下載靜態(tài)資源的負(fù)擔(dān)。

4、網(wǎng)頁資源過多

解決方法：使用CDN部署網(wǎng)絡(luò)以提高下載速度，可以先通過免費(fèi)的CDN供 應(yīng)商來分發(fā)網(wǎng)頁資源。

5、 cookie影響

解決方法：減小cookie的影響

（1）去除沒有必要的cookie，如果網(wǎng)頁不需要cookie就完全禁掉。

（2）將cookie的大小減到最小：減小HTTP請求報文的大小，提高響應(yīng)速度。

（3）設(shè)置合適的過期時間：cookie信息將存儲到硬盤上，即使瀏覽器退出cookie還會存在，

只要cookie未被清除且還在過期時間內(nèi)，該cookie就會在訪問對應(yīng)域名時發(fā)送給服務(wù)器。

（4）通過使用不同的domain減少cookie的使用：cookie在訪問對應(yīng)域名下的資源時都會通過HTTP請求發(fā)送到服務(wù)器，但在訪問一些資源，如js，css和圖片時，大多數(shù)情況下cookie 是多余的，可以使用不同的domain來存儲這些靜態(tài)資源，這樣訪問這些資源時就不會發(fā)送多余的cookie，從而提高響應(yīng)速度。

6、 后端代碼問題

后端代碼問題，主要有代碼冗余、數(shù)據(jù)庫發(fā)生鎖死、動態(tài)請求時間過長等。

解決方法：優(yōu)化冗余代碼，壓縮或精簡Javascript代碼和css代碼和減少HTTP請求數(shù)。其中減少HTTP請求數(shù)有3種方法：

（1）減少不必要的HTTP請求

例如用CSS圓角代替圓角圖片，盡量減少圖片的使用。

（2）合并文件

1）對于文本文件，可以直接合并內(nèi)容。例如將多個JS(JavaScript的簡稱)文件合并成一個，將多個CSS文件合并成一個。

2）圖片地圖：把多張圖片整合到一張圖片中，以位置定位超鏈接。

3）CSS Sprites合并圖片，通過指定CSS的backgroud-image和backgroud-position來顯示元素。

4）合并JS腳本和CSS樣式表。

5）使用外部JS和CSS文件。

（3）優(yōu)化緩存

對于沒有變化的網(wǎng)頁元素(如頁頭、頁尾等)，用戶再次訪問的時候沒有必要重新下載，直接從瀏覽器緩存里讀取就可以了。

END

歡迎大家關(guān)注微信公眾號：互聯(lián)網(wǎng)運(yùn)營資料館，到主頁可獲取更多的經(jīng)驗(yàn)分享、運(yùn)營方案、思維導(dǎo)圖、運(yùn)營工具和運(yùn)營相關(guān)電子書等。

（文章為原創(chuàng)，如轉(zhuǎn)載請注明出處，侵權(quán)必究！）