提升網站效能的五種方式，希望你也知道

葡萄城技術團隊發表於2020-12-18
網站

轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：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等。這些工具可以提供完整的報告讓您深入瞭解你的網站的短板。希望您的網站也可以獲得更好的使用者體驗。

 

相關文章