網站性能和健康監控：提示和最佳實踐

已發表: 2022-11-01

設置和運行網站或電子商務項目非常棒 - 但是，一旦您的網站啟動並運行，您的工作還遠未完成。

如果沒有適當的健康和性能監控，您的網站將遭受後果 - 這可能遠遠大於簡單的加載速度緩慢。

讓我們把注意力轉向一個假設的、理想的場景，在這個場景中，世界上所有的網站都在正常運行。 您是否知道，除了提升用戶滿意度之外，我們還將為更好的環境做出貢獻？

表現不佳的網站不僅會影響創建或使用它們的任何人，還會留下更大的碳足跡。

根據網站碳計算器，網站有碳足跡，平均網站頁面每次瀏覽會排放 0.5 克二氧化碳。 這只是中位數。

當查看平均值時，也考慮到高污染網站，這個數字上升到 0.9 克。

除了全球範圍內的問題外，一個不健康、性能不佳的網站會花費您的時間、金錢和收入。 網站健康與我們自己的相似：容易忽視，難以改善。

您需要了解構成網站運行狀況的主要組件，以進行適當的監控實踐以幫助節省處理時間。

隨著快速簡便的網站建設者的出現，每個人都可以訪問製作網站。 您需要做的就是註冊、選擇一個域、選擇您的模板，然後瞧！ 您在幾秒鐘內就有了一個網站。

然而，許多網站所有者否認網站創建只是第一步的事實。 適當的性能維護和健康監控也至關重要。

在這方面，讓我們看一些基本的網站健康和性能指標：它們是什麼，如何監控它們，以及如何進行改進。

監控高網站健康評分的方面

核心網絡生命力

通過 Core Web Vitals 獲得高網站健康評分 圖片來自作者，2022 年 10 月

谷歌 PageSpeed 見解

在進行性能測試時，您應該考慮的第一個指標是您的 Core Web Vitals。 這些性能指標顯示速度、穩定性和響應能力，幫助您了解網站用戶體驗的質量。

有幾種工具可以跟踪您的核心網絡指標，但許多網站所有者傾向於使用一個簡單的工具：Google PageSpeed Insights。

在工具中輸入您的 URL 後，您將看到一份報告，顯示您是否通過了 Core Web Vitals 測試以及您需要關注的任何其他方面。 以下是您將看到的三個關鍵指標：

最大含量塗料 (LCP)

以2.5 秒或更少的分數為目標。

如果您的分數超過 2.5 秒，這可能表明以下情況：您的服務器滯後、資源加載時間未達到標準、您有大量的渲染阻塞 JavaScript 和 CSS，或者客戶端渲染速度很慢。

首次輸入延遲 (FID)

爭取100 毫秒或更短的分數。

如果您的分數超過該時間，您可能需要減少第三方代碼影響、減少 JavaScript 執行時間、最小化主線程工作、保持較小的傳輸大小以及減少請求計數。

累積版式偏移 (CLS)

以0.1 或更低的分數為目標。

如果您的分數超過此值，您可以通過在視覺和視頻內容中包含大小屬性來避免隨機佈局變化（或使用 CSS 縱橫比框保留空間）。 避免重疊您的內容，並在動畫過渡時注意。

頁面速度攔截器

有幾個因素會影響您的網站加載速度。 但是，如果您有時間預算並且想首先關注主要罪魁禍首，請密切注意以下因素：

  • 未使用的 JavaScript 和 CSS 代碼。
  • 呈現阻塞的 JavaScript 和 CSS 代碼。
  • 未縮小的 JavaScript 和 CSS 代碼。
  • 大圖像文件大小（更多內容見下文）。
  • 重定向鏈太多。

為了提高 JavaScript 和 CSS 文件的負載，考慮預加載它們。

另一種選擇是啟用早期提示，它在 HTTP 服務器響應中告訴瀏覽器應該利用“服務器思考時間”開始下載哪些資源，從而加快頁面加載速度。

要測試您的網站：

  1. 導航到 https://pagespeed.web.dev/
  2. 輸入您要掃描的頁面的 URL。

我建議先選擇你的主頁。

另一個方便的工具是 WebPageTest.org，它還顯示了您的核心 Web Vitals 和其他可以幫助您大幅提高網站性能和健康狀況的指標。 而且，它是免費的！

只需將頁面 URL 粘貼到網站上顯示的搜索框中，它將從默認位置進行完整測試。

您還可以註冊為用戶並從位置列表中進行選擇，以從不同的國家、設備和瀏覽器測試您的網站。

WebPageTest 將通過由四個關鍵部分組成的性能摘要向您準確顯示您的網站在性能方面的位置，以及可能減慢它的速度：機會和實驗、觀察到的指標、真實用戶測量和個人運行。

觀察到的指標 圖片來自作者，2022 年 10 月

在 UCRAFT，我們使用了 PageSpeed Insights、Chrome 開發工具、WebPageTest 等工具的組合，以清楚地了解我們在網站性能方面需要做什麼——尤其是因為 SaaS 行業是已經很有競爭力了。

設計元素

設計元素 作者截圖，2022 年 10 月

當我們考慮網站性能和健康監控時，我們通常將這些留給技術團隊來處理。

但是如果我告訴你你是如何設計你的網站的，你選擇的元素可以成就或破壞你的表現呢？

沒錯——是時候讓設計團隊參與進來了。

圖像優化

圖片很棒，但如果尺寸不合適，它們可能會減慢您的網站速度。 確保調整圖像大小，並避免在它們不會完整顯示時上傳大文件。

同樣，壓縮您的圖像並嘗試不同的文件類型，如 WebP、JPEG 2000 和 JPEG XR，而不是選擇較重的 JPEG 或 PNG 文件。

考慮實現本機延遲加載以確保在用戶查看圖像時加載圖像，而不是一次加載所有圖像。

幾乎所有的瀏覽器，包括 Chrome、Safari 和 Firefox，都支持 <img> 或 <iframe> 上的 loading=”lazy” 屬性，它告訴瀏覽器在用戶滾動靠近它們時加載它們。

確保不要延遲加載首屏圖像，因為它會降低頁面的 LCP 分數，Google 建議對首屏圖像使用 fetchpriority=”high” 屬性來提高 LCP。

如果您使用該屬性，則無需預加載圖像。 您應該在首屏圖像上預加載或設置“fetchpriority”屬性。

此外，利用“srcset”屬性的響應性來根據屏幕尺寸加載適當大小的圖像，並避免在小屏幕上加載冗餘的大圖像。 這將極大地有助於提高 LCP 分數。

字體

對於沒有 20/20 視力的用戶來說，奢侈的自定義字體通常難以閱讀，但它們也會大大降低您的網站速度。

切換外部託管字體以獲得更多網絡安全字體，並嘗試使用 Google 字體——只要它們是通過 Google 的 CDN 託管的。

此外，考慮將可變字體納入您網站的整體美感，因為此字體規範可以顯著減少字體文件的大小。

確保預加載字體。

動畫/附加功能

不用說：不要過度使用動畫、視頻、特殊效果、滑塊或其他花哨的元素。

在這里和那裡包含一些交互元素很好，但是用太多移動的“東西”使您的網站飽和可能會讓用戶和您的服務器感到沮喪。

不要使用非合成動畫，因為它們會導致頁面重新繪製，這會增加主線程的工作量——並且網頁在加載​​時可能會出現視覺上的不穩定。

移動優化的 PWA 解決方案

為什麼不走整個適合移動設備的路線，將您的移動網站變成一個漸進式 Web 應用程序 (PWA)？

由於 PWA 是使用服務人員構建的，因此它們以更快的速度加載緩存的內容。 不僅如此，PWA 還類似於原生移動應用程序，這對性能和 UX 非常有用。

其他技術性能指標

正常運行時間

正常運行時間顯示您的網站運行狀況如何。

如果您的網站經常崩潰或宕機，將會損害您的用戶體驗、谷歌排名，進而影響您的收入。

如果可能，目標是擁有 99.999% 的正常運行時間並從不同位置測試您的網站。

正常運行時間監控工具：

  • 狀態蛋糕。
  • Pingdom。
  • 更好的正常運行時間。
  • 正常運行時間機器人。

數據庫性能

如果您檢查了基礎知識並且您的網站仍然響應緩慢，則可能是由於數據庫性能不佳。

您可以通過監視查詢的響應時間並查明佔用時間最多的數據庫查詢來檢查這一點。

完成後，開始優化！ 您可以使用 Blackfire.io 等工具來幫助您輕鬆識別瓶頸並根據準確的數據找到解決方案。

Web 服務器的硬件

如果您的磁盤空間塞滿了日誌文件、圖像、視頻和數據庫條目，您的網站可能會滯後。 確保定期監控您的中央處理器 (CPU) 負載，尤其是在您實施更新或設計更改之後。

New Relic 等工具可以幫助您通過有效的監控和調試來改進整個堆棧。

搜索可見性

上面討論的許多指標已經對搜索可見性產生了重大影響。

因此，當您通過 Google PageSpeed Insights 運行您的網站頁面並對其進行優化時，您也在為您的 SEO 做重要的事情。

您還可以選擇網站抓取工具，例如 Semrush 或 Sitechecker.pro、Screaming Frog、DeepCrawl，或任何其他最適合您需求的工具。

網站爬蟲有助於發現所有類型的問題，例如：

  • 斷開的鏈接。
  • 破碎的圖像。
  • 監控核心網絡重要指標。
  • 重定向鏈。
  • 結構化數據錯誤。
  • 無索引頁面。
  • 缺少標題和元描述。
  • 混合內容。

當涉及到以下幾點時，請確保您已準備就緒：

  • XML 站點地圖– 確保您的站點地圖格式正確，並檢查是否有必要進行任何更新並通過 Google Search Console 重新提交您的站點地圖。
  • Robots.txt – 確保為您的網頁使用 robots.txt 文件（HTML、PDF 或任何其他搜索引擎可以讀取的非媒體格式）以更好地管理抓取流量，尤其是當您懷疑您的服務器可能被以下內容淹沒時來自 Google 抓取工具的請求。

網站安全和緩存

獲取您的 SSL 證書！

一個健康的網站是一個安全的網站。

即使您的網站在完美的時間加載並獲得 100/100 的分數，如果它不以 https:// 開頭，用戶（或搜索引擎）也不會信任您的網站。

SSL 證書本質上是您服務器上的代碼，用於建立加密連接，確保用戶數據保持安全。

獲取 SSL 證書並不是一個特別困難的過程，但手動完成可能會很漫長。

但是，如果您使用的是成熟的託管服務提供商，例如 BlueHost，通常情況下，您的提供商將能夠為您的域頒發免費的 SSL。

考慮使用 CDN

內容交付網絡 (CDN) 是協同工作以交付快速互聯網內容的分佈式服務器。

換句話說，CDN 是一種工具，它通過將其內容保存在靠近用戶的服務器上來提高您網站的性能，而不管地理位置如何。 這也稱為緩存。

如果您的業務遍及全球，CDN 是必須的！ 它將提高您的頁面加載速度，降低您的帶寬成本，分散您的流量（減少您的網站崩潰的機會），並通過 DDoS 緩解等功能提高安全性。

該行業的頂級參與者包括 Cloudflare、Amazon Cloudfront 和 Google Cloud CDN。 但是，還有許多其他選擇，因此請根據您的網站和業務需求進行研究並選擇最佳 CDN。

設置 Web 應用程序防火牆

Web 應用程序防火牆 (WAF) 通過過濾掉可疑的 HTTP 流量來保護 Web 應用程序。 它旨在防止應用程序受到以下攻擊：

  • 跨站偽造。
  • 跨站點腳本 (XSS)。
  • 文件包含。
  • SQL注入。

以下是最流行和最受信任的 Web 應用程序防火牆列表：

  • Cloudflare WAF。
  • GoDaddy 防火牆。
  • 微軟天青。

或者，如果您使用 WordPress，則可以考慮安裝插件，例如：

  • 字柵欄。
  • 蘇庫裡。
  • 多合一安全性 (AIOS)。

判決

這是一個包裝！ 如您所知，網站性能和健康狀況取決於各個方面。

如果您的網站滯後，第一個合乎邏輯的步驟是檢查您的 Core Web Vitals 並查看您可以改進的地方。 您還可以查看其他技術指標並對其進行改進。

SEO 對您網站的健康也很重要，因此請檢查您的搜索可見性、鏈接和潛在的負載攔截器，看看您可以改進哪些方面。

並且不要忘記您的 SSL 證書和緩存。

您的網站設計也會影響您的加載速度和性能，特別是如果您或您的設計師喜歡使用重量級的設計元素。

請記住優化您的圖像，避免使用大字體，並適度使用動畫。

更多資源：

  • 如何使用 Chrome 用戶體驗報告來提高您的網站性能
  • 增強 Google 展示廣告網絡性能的 6 個技巧
  • 高級技術 SEO：完整指南

特色圖片：JulsIst/Shutterstock