避免 CMS 災難:如何提高網站性能

已發表: 2022-04-15

沒有人喜歡……等待……等待……。 等等……

擁有一個表現得像數字超級英雄的網站是一項業務需求,尤其是當您對正在研究您的組織的潛在客戶留下第一印象時。

以下網站性能統計數據應該讓每個網站開發人員和工程師感到恐懼,更不用說您的品牌營銷團隊了:

  • 如果加載時間超過四秒,二分之一的用戶會放棄網站。 資料來源:英國廣播公司。
  • 一秒鐘的延遲會導致用戶滿意度下降 16%。 資料來源:LoadStorm。
  • 如果頁面加載時間超過 3 秒,則 53% 的移動網站訪問會被放棄。 資料來源:谷歌。

當您檢查 Google 的 Core Web Vitals 性能指標時,您可能已經註意到網站性能不佳,但不確定如何補救?

當您的業務上線時,您無法負擔將新業務發送到其他地方並通過讓您的內容管理系統 (CMS) 提供糟糕的數字體驗來玷污您的品牌。

下面我們診斷出五個常見的減速罪魁禍首,以及如何使用像 WordPress VIP 這樣的敏捷 CMS 來提高網站性能。

首先,當您加載 Web 應用程序時實際發生了什麼?

對於任何瀏覽器來說,這是一個很大的要求,它必須立即進入高速檔,在幾毫秒內執行一系列動作。 這是Mozilla的禮貌:

  1. 瀏覽器轉到 DNS 服務器,並找到網站所在服務器的真實地址。
  2. 瀏覽器向服務器發送一條 HTTP 請求消息,要求它向客戶端發送網站的副本。 此消息以及客戶端和服務器之間發送的所有其他數據都使用 TCP/IP 通過您的 Internet 連接發送。
  3. 如果服務器批准了客戶端的請求,服務器會向客戶端發送“200 OK”消息,意思是“你當然可以看那個網站! 這裡是。” 然後它開始將網站的文件作為一系列稱為數據包的小塊發送到瀏覽器。
  4. 瀏覽器將這些小塊組合成一個完整的網頁並將其顯示給您。

注意:當然,這並不像這一切那麼容易。 每個步驟之間都有許多較小的步驟。 現在,讓我們深入探討“緩慢”發生的五個關鍵原因,以及我們的 WordPress VIP CMS 如何緩解它們。

那麼,是什麼導致瀏覽體驗緩慢呢?

罪魁禍首 1. 缺乏 PoP 和 CDN

您的業務很可能是全球性的。 這增加了確保在各種設備上以各種連接類型為用戶提供快速、一致、穩定連接的後勤挑戰。

那麼這對您的應用程序意味著什麼?

當從上述步驟 2 發起網絡請求時,該請求會經過多個網絡躍點。 躍點是計算機網絡術語,指的是數據包從源到目的地經過的路由器數量。

由於這些從用戶的地理位置到您的服務器的躍點,您的用戶在加載期間可能會經歷更多的時間。 這可以通過內容交付網絡 (CDN) 和入網點 (PoP) 向訪問者提供更靠近訪問者的內容來緩解。

WordPress VIP 答案

WordPress VIP 的 CDN 是一個由邊緣和源 PoP 組成的全球網絡,可以盡可能快速、高效和可靠地為全球客戶提供您的站點。 一旦我們的邊緣服務器收到來自您的應用程序的新內容通知,這種本地化可用性就會自動發生。 這意味著您的團隊無需處理額外的配置,從而使他們能夠專注於其他任務。

罪魁禍首 2. 未優化的媒體

今天大家用最新的移動設備拍攝的那些高質量的圖像非常漂亮! 也就是說,直到它們被用作您主頁上的縮略圖。

添加 4K 圖像並將其限制為 100×100 像素的容器意味著您的用戶必須加載整個 4K 圖像。 一張圖片沒什麼好擔心的,但是對於大規模發佈內容的企業來說,頁面加載很容易隨著索引頁面中的文章數量呈指數級增長。

WordPress VIP 答案

WordPress VIP 上的應用程序自動獲得邊緣緩存圖像的所有好處,並自動調整上傳圖像的圖像大小。 此外,圖像可以動態調整大小。

罪魁禍首 3. 未優化的 Javascript 和 CSS

加載大文件時,每一位和每一個請求都很重要。 如果您已經優化了下載文件所需的網絡跳數,則文件到達所需的最大時間是請求的打開和關閉。

為了解決這個問題,現代 Javascript 和 CSS 開發經常使用縮小和連接。

縮小是指刪除文件中所有不必要的字符,通常是所有不必要的空格。 這裡的目的是減少正在傳輸的比特總數。
連接是將多個文件粘合在一起以產生一個更大的文件的行為。 這裡的目的是減少網絡請求的數量。

WordPress VIP 答案

WordPress VIP 自動連接 JavaScript 和 CSS 文件,以減少單個頁面加載時發生的請求數量。 CSS 文件被縮小和連接。 歸功於我們選擇的開源插件。

然後將縮小和連接的文件緩存 15 天,或直到檢測到更改。

罪魁禍首4.緩存利用率低

緩存是一種特殊的臨時存儲來加快速度。 它們加速的速度取決於緩存的類型。

如果您沒有使用某種形式的緩存,那麼當您的應用程序處於負載狀態時,您可能會嚴重影響頁面響應速度。

WordPress VIP 答案

WordPress VIP 使用了幾種不同類型的緩存:

  • 對象緩存——用於存儲應用級數據。 這有助於在不影響數據庫的情況下快速有效地檢索數據。 簡而言之,對象緩存可防止大量計算和/或查詢佔用寶貴的連接時間。
  • 查詢緩存——數據庫查詢的輕量級內存緩存。 在 WordPress 中,任何使用 WP_Query API 的帖子查詢都極大地受益於這種形式的緩存。
  • 頁面緩存——完全繪製頁面的存儲,存儲在每個邊緣 PoP 位置。 這是大多數訪問您的應用程序的用戶遇到的第一級緩存。 頁面緩存使我們的 CDN 能夠在您的應用程序無需運行任何代碼的情況下提供本地化內容。

所有這些協調工作以減少請求響應時間。

問題五、數據庫連接飽和

當您的應用程序的內容和用戶群增長時,那些最初執行良好的舊數據庫查詢現在會降低性能。

當查詢需要時間來執行時,這會在數據庫中佔據一個席位,直到查詢完成。 有時這些席位會很快填滿,從而阻止執行更多查詢。 這通常表現為應用程序性能下降,直到數據庫提供 500 個響應。

連接飽和可以快速且隨機地發生,使得根本原因難以診斷。

WordPress VIP 答案

作為 WordPress VIP 服務包的一部分,我們提供對 New Relic 的訪問,這有助​​於主動診斷和監控上述潛在問題。 這可以節省您的團隊時間、成本以及在數秒內保護其他工具和資源的麻煩。

綜上所述

從網絡跳數和缺乏點的存在到數據庫內容飽和,解決網站性能不佳的根本原因應該是任何具有前瞻性的組織及其內容管理系統的 P0 優先事項。 畢竟,給觀眾留下良好的第一印像是數字時代的一切。 因為速度確實會殺人。

在此處了解有關 WordPress VIP 的更多信息。

作者

Michael Chan,高級軟件工程師,WordPress VIP