提高網站性能的五種方式，但願你也知道

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://blog.bitsrc.io/5-common-mistakes-developers-do-that-affect-page-load-time-5a49b0e46f6b

 

若是您的網站在用戶訪問時的加載時間須要好久，那麼，這篇文章興許能爲您的優化工做帶來一些啓發。不過即使沒能幫您解決你的問題，您也能瞭解到影響了網站加載時間的幾種常見錯誤是什麼。

爲何頁面加載時間這個指標很重要？

頁面的加載時間直接影響到了用戶對網站性能的直觀感覺。有調研數據表示，

一旦頁面加載時長超過3秒，那麼將會有一半的訪問用戶在等待中而流失。

• 搜索引擎排名 — 頁面加載時間是搜索引擎在搜索結果中對你的網站進行排名的重要依據之一。所以，網頁的加載時間會影響用戶在Web上查找該網頁的難易程度。
• 轉化率 — 頁面加載越快，用戶的參與度就越高。網站速度慢，顯而易見地會致使轉化率降低。若是您的網頁加載時間太長，執行Call-To-Action(CTA) 將消耗大量的 時間，這段期間用戶的耐心和積極性會被消磨，最終關掉您的網站，而不購買您的產品或使用您提供的服務。
• 用戶體驗 — 網站加載時間越長，用戶就越滿意。所以，客戶的留存率和再次訪問比例會更高。

讓咱們看看幾個基於HubSpot所作研究的示例：

• 若是Yahoo將頁面加載時間減小0.4秒，流量可能會增長9%。
• 頁面慢1秒可能會使亞馬遜每一年損失16億美圓的銷售額。
• Bing搜索的2秒延遲將致使每位訪客的收入損失4.3%，點擊量減小3.75%，查詢量降低1.8%。

根據上面的數據，您能夠看出頁面加載時間對您的網站有多麼重要。

影響頁面加載時間的因素以及優化技巧

影響頁面加載時間的因素不少，在這些錯誤中，我列出了我在創建網站時遇到的比較有表明性的五大錯誤。

1.    大量的HTTP請求

每當瀏覽器須要從Web服務器獲取文件、頁面或圖像時，都會發出一次HTTP請求，以後您能夠經過Chrome「開發人員工具」中的「Network」選項卡去監測應用程序是發出了哪些網絡請求，哪些請求比較耗時等信息。

通常瀏覽器一般將同時發出的HTTP請求數限制在4-8個之間。所以，當併發請求數量較多時，會產生較長的等待延遲。Yahoo所作的研究代表，您的應用程序加載時間的80%依賴於HTTP請求。減小HTTP請求的數量會增長頁面加載時間。

您能夠經過下面的方式來減小Web應用的HTTP請求總量：

• 合併CSS/JS文件 — 您能夠嘗試將CSS文件和JS文件分別合併爲同一個文件，這樣減小了請求，也無需從服務器檢索多個文件。因爲全部CSS文件都是渲染分塊的，所以減小CSS文件將大大縮短頁面加載時間。
• 內容按需加載 — 不一次加載應用程序的全部圖像，而是隻在須要時加載它們。這種方法被稱爲延遲加載或按需加載。當用戶到達站點時，您能夠在用戶滾動到該特定位置時才加載圖像，而不是在點擊時就一股腦所有加載。
• 啓用瀏覽器緩存 — 容許緩存靜態圖片或網站的內容，這些內容不會常常變化。當用戶第二次訪問網站時，緩存能夠加載這些內容，而無需向服務器發送新的HTTP請求。這使得內容的加載速度更快。
• 服務器支持HTTP/2 — 使用HTTP/2，從瀏覽器到服務器只須要創建一個鏈接就能夠加載一個網站，而且容許同時多個請求。這比爲每一個資源建立新鏈接要高效得多。

2. 沒有使用CDN

若是您的網站沒有啓用CDN，則當用戶的物理位置遠離服務器時，加載時間會增長。這些延遲會隨着距離的增長而變得更明顯，而且會影響到對服務器的全部HTTP請求。使用CDN能夠縮短頁面加載時間。

CDN是什麼？

CDN的全稱是Content Delivery Network，即內容分發網絡。CDN是構建在網絡之上的內容分發網絡，依靠部署在各地的邊緣服務器，經過中心平臺的負載均衡、內容分發、調度等功能模塊，使用戶能夠就近獲取所需內容。

使用CDN將使用戶可以從距離其位置最近的服務器獲取網頁所需的資源。CDN中的服務器分佈在不一樣的地理位置。因此使用這種CDN是改善應用程序加載時間的有效方法之一。

例如，若是您的Web服務器位於加利福尼亞州，若是您部署了CDN，您的訪客訪問網絡拓補圖多是下面的樣子。

 

大多數CDN服務都擁有本身的網絡骨幹，與互聯網相比，它們能夠提供更高的服務質量，更少的數據包率及更快的加載速度等有點。缺點，就是貴。

3.文件大小和頁面大小

從Web服務器上加載大尺寸文件或加載頁面尺寸較大時將耗費大量時間，因此可能會在爲了獲取幾個這樣大的文件而使頁面加載時間變長。

 

 

 

經過啓用壓縮是減少HTTP請求文件大小、縮短頁面加載時間的經常使用方式。

常見的壓縮方式有兩種：

第一種方式是Gzip，Gzip能夠定位文件中的相似代碼，並暫時替換它們，使文件變小。目前，大多數Web服務器都支持Gzip壓縮。對HTML或CSS文件啓用壓縮一般能夠節省約50%或70%的文件大小，從而減小頁面加載時間和使用的帶寬。您能夠經過減少應用程序中使用的圖像的大小來進一步減小頁面加載時間。

另外一種壓縮方案稱爲Brotli，據官方介紹壓縮比較gzip要高20%~30%，而且執行效率更高效，具體的由於我這沒有測試，因此沒法佐證，您能夠根據您的實際狀況來考慮。

4.同時加載全部資源

同時加載全部HTML、CSS和JS文件將增長頁面加載時間，由於在加載全部這些資源以前，頁面渲染的流程將被阻止。

延遲JavaScript加載是一種在加載其餘元素以後加載大型JS文件的機制。此方法可確保加載頁面內容時不會因加載大型JS文件而受到影響。

若是您有一個HTML站點，則須要在</body>標記以前調用外部JS文件(defer.js)。

<script type="text/javascript">
   function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "defer.js";
      document.body.appendChild(element);
  }
  if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
  else 
    window.onload = downloadJSAtOnload;
</script>

上面的代碼是講，「等待整個文檔加載，而後再加載外部defer.js文件。」

5.大量的重定向

通常狀況下，咱們使用重定向來處理移動或刪除的頁面，以免用戶訪問時出現錯誤。可是，更多的重定向意味着更多的HTTP請求。這會極大地增長頁面加載時間。谷歌建議網站全部者取消重定向，以縮短加載時間，特別是在移動優先的網站上。

您可使用相似網站爬取工具來得到網站中的全部重定向請求。經過分析這一點，您能夠掌握並清除其中沒必要要的重定向。

通常，重定向分爲兩種類型：

• 服務器端重定向 — 快速且可緩存。
• 客戶端重定向 — 速度慢且不可緩存。

避免使用你的頁面使用客戶端重定向，同時將服務器端重定向保持在最低限度內，從而優化網頁加載時間。

結論

一個執行、加載速度快的站點相信對站長和用戶而言都是有益的，我但願這篇文章能讓您對頁面加載時間的重要性有足夠的信心。

若是您正在考慮提高您的網站性能，我有一些工具能夠分享給您，好比Google Pagespeed Insights，Pingdom，YSlow等。這些工具能夠提供完整的報告讓您深刻了解你的網站的短板。但願您的網站也能夠得到更好的用戶體驗。