影響頁面載入時間的5個常見錯誤

如果您的網站在使用者造訪時的載入時間需要很久，那麼，這篇文章興許能為您的最佳化工作帶來一些啟發。不過即便沒能幫您解決你的問題，您也能了解到影響了網站載入時間的幾種常見錯誤是什麼。

為什麼頁面載入時間這個指標很重要？

頁面的載入時間直接影響了使用者對網站效能的直覺感受。有研究數據表示，

一旦頁面載入時間超過3秒，那麼將會有一半的訪客在等待中流失。

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

讓我們來看看幾個基於HubSpot所做研究的範例：

• 如果Yahoo將頁面載入時間減少0.4秒，流量可能會增加9%。
• 頁面慢1秒可能會使亞馬遜每年損失16億美元的銷售額。
• Bing搜尋的2秒延遲將導致每位訪客的收入損失4.3%，點擊量減少3.75%，查詢量下降1.8%。

根據上面的數據，您可以看出頁面載入時間對您的網站有多重要。

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

影響頁面載入時間的因素很多，在這些錯誤中，我列出了我在建立網站時遇到的比較有代表性的五大錯誤。

1.大量的HTTP請求

每當瀏覽器需要從網路伺服器取得檔案、頁面或映像時，都會發出一次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是改善應用程式載入時間的有效方法之一。

例如，如果您的網路伺服器位於加州，如果您部署了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站點，則需要在標記之前呼叫外部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 <br>    window.onload = downloadJSAtOnload;
</script>

上面的程式碼是說，「等待整個文件加載，然後再加載外部defer.js檔案。」

5.大量的重定向

一般情況下，我們使用重定向來處理移動或刪除的頁面，以避免用戶造訪時發生錯誤。但是，更多的重定向意味著更多的HTTP請求。這會大大增加頁面載入時間。谷歌建議網站所有者取消重定向，以縮短載入時間，特別是在行動優先的網站上。

您可以使用類似網站爬取工具來獲得網站中的所有重定向請求。透過分析這一點，您可以掌握並清除其中不必要的重定向。

一般，重定向分為兩種：

• 伺服器端重定向 — 快速且可快取。
• 客戶端重定向 — 速度慢且無法快取。

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

結論

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

如果您正在考慮提升您的網站效能，我有一些工具可以分享給您，例如Google Pagespeed Insights，Pingdom，YSlow等。這些工具可以提供完整的報告讓您深入了解您的網站的短板。希望您的網站也可以獲得更好的使用者體驗。

原文出處：https://blog.bitsrc.io/5-common-mistakes-developers-do-that-affect-page-load-time-5a49b0e46f6b

#更多程式相關知識，請造訪：程式設計入門！ ！

以上是影響頁面載入時間的5個常見錯誤的詳細內容。更多資訊請關注PHP中文網其他相關文章！