網站速度提升小貼士 | 如何提升網站速度

Web 效能是一個包羅萬象的詞語，表示網站使用者體驗的可測量和感知品質，特別看重頁面的速度和可靠性。

開發人員和網站擁有者可以採取多種措施來提高網站的效能。這些措施包括最佳化 Web 設計因素，例如影像大小、程式碼格式和外部指令碼使用，以及選擇良好的託管、內容快取和負載平衡提供者。

當網頁載入速度更快、更可靠時，不僅可以提供更好的使用者體驗，而且可以在自然搜尋結果中獲得更高的排名，對潛在訪客更可見，並且通常會獲得更高的轉換率。

如何測試網站效能

提高網站效能關鍵的第一步是衡量其當前效能。多種因素決定了使用者（和其他方）對網站速度和可靠性的感知，衡量這些因素是瞭解哪些措施將帶來最大改進的唯一方法。

有許多用於衡量效能的免費工具，包括Google Lighthouse （可在 Google Chrome Web 瀏覽器的 DevTools 套件中使用）和 Cloudflare Observatory（任何 Cloudflare 使用者均可在其儀表板中使用）。

網站擁有者應該使用這些工具來評估什麼？一個好的起點是 Core Web Vitals，這是一組指標，包含三項內容，用於衡量重要的 Web 效能方面：

• 最大內容繪製衡量頁面上最大元素載入的速度
• 首次輸入延遲衡量頁面回應使用者輸入的速度
• 累積版面配置轉移衡量頁面元素的視覺穩定性

除了提供有價值的使用者體驗訊號之外，改善頁面的 Core Web Vitals 還可以提高其在自然 Google 搜尋結果中的排名。

其他需要評估的重要指標包括第一個位元組接收時間（頁面開始載入的速度）、DNS 查閱速度（頁面的網域名稱服務將網域名稱轉換為 IP 位址的速度）和互動時間（使用者可以多快地與頁面互動）。

要瞭解衡量這些指標如何轉化為行動，請考慮以下範例：

• 最大內容繪製速度較慢的網頁需要很長時間才能向使用者展示其最大的元件。網頁擁有者可以調查是否在該元件之前載入了任何不必要的程式碼，並考慮是否移除所述程式碼。
• 第一個位元組接收時間較慢的網頁擷取網站所需的時間過長
來自其來源伺服器的資源。網頁擁有者可以調查其 DNS 提供者和網站主機的回應時間，並專注於重新設定或取代一項或兩項服務。

如何提高網站效能

雖然沒有保證強大 Web 效能的藍圖，但網站擁有者可以使用以下最佳做法來幫助提高網站速度和可靠性：

最佳化影像

由於影像檔案的大小往往比 HTML 和 CSS 檔案大，因此影像在網站上的載入時間通常最長。幸運的是，可以透過影像最佳化來減少影像載入時間，這通常涉及降低其解析度和尺寸，以及壓縮影像檔案本身。

限制 HTTP 請求的數量

大多數網頁需要瀏覽器針對頁面上的各種資產（包括影像、指令碼和 CSS 檔案）發出多個 HTTP 請求。實際上，許多網頁都需要幾十個這樣的請求。針對每個請求，都需要與託管相應資源的伺服器來回傳輸資訊，這可能會增加網頁的總載入時間。

由於存在這些潛在問題，因此應盡量減少每個頁面需要載入的資產總數。速度測試有助於確定哪些 HTTP 請求花費的時間最多。

使用瀏覽器 HTTP 快取

瀏覽器快取是一個臨時儲存位置，瀏覽器將靜態檔案的複本儲存在其中，以便能更快載入最近造訪的網頁。開發人員可以指示瀏覽器快取不會經常變更的網頁元素。瀏覽器快取的指示位於託管伺服器的 HTTP 回應的標頭中。這大大減少了伺服器需要傳輸到瀏覽器的資料量，從而縮短了經常造訪某些頁面的使用者所需的載入時間。

移除不必要的渲染阻塞 JavaScript

網頁可能在載入更重要的頁面內容之前載入不必要的程式碼，從而減慢整體載入時間。這在大型網站上尤其常見，許多擁有者獨立新增程式碼和內容。網頁擁有者可以使用 Web 效能工具來識別效能不佳的頁面上不必要的程式碼。

限制使用外部指令碼

從其他地方載入的任何指令碼式網頁元素（例如外部評論系統、CTA 按鈕、CMS 外掛程式或銷售線索產生快顯視窗）都需要在每次載入頁面時載入。

根據指令碼的大小，這些可能會使網頁速度變慢，或導致網頁無法一次全部載入（這稱為「內容跳轉」或「版面配置轉移」，對於行動使用者來說尤其令人沮喪，因為他們經常需要捲動才能查看整個網頁）。

限制使用重新導向

重新導向是指存取一個網頁的訪客被轉到另一個頁面。重新導向會使頁面載入時間增加幾分之一秒，有時甚至是整秒或數秒。建立效能最佳化的網站時，每一秒都很重要。重新導向有時是不可避免的，但它們可能會被過度使用——並且可能會隨著時間的推移而在擁有多個擁有者的大型網站上累積。網站擁有者應制定明確的重新導向使用指南，並定期掃描重要網頁以查找不必要的重新導向。

縮製 CSS 和 JavaScript 檔案

縮製代碼意味著移除電腦理解和執行代碼時不需要的內容，包括代碼註解、空格和不必要的分號。這樣可以使 CSS 和 JavaScript 檔案略小，從而使它們在瀏覽器中的載入速度更快，佔用的頻寬更少。儘管縮製通常只能帶來少量的效能改進，但它仍然是一個重要的最佳做法。

使用有效的第三方服務來實現重要的網站功能

• 託管：如果來源伺服器對請求回應緩慢，即使是擁有最佳設計的網站也會載入緩慢。網站擁有者應選擇平均回應時間低於 200 毫秒且具有良好可靠性記錄的伺服器。
• DNS：DNS 是一個將網域（例如 example.com）轉換為 IP 位址的系統，這是頁面載入過程的重要組成部分。網站擁有者應選擇能夠快速可靠地提供結果（「解析」）的 DNS 服務，而不是依賴其 Web 主機的 DNS。
• 快取：網站內容距離請求者越近，他們接收內容的速度就越快。網站擁有者應該使用內容傳遞網路 (CDN) 在世界各地的許多位置快取 Web 內容，這樣使用者請求就不必長途跋涉數百或數千英里（並跨越許多自治網路）到達網站的來源伺服器。
• 網路安全：DDoS 攻擊、惡意傀儡程式和其他網路攻擊可能會降低網站的效能。這個主題太廣泛，無法在此處詳細介紹，但網站擁有者應該選擇一個可以篩選掉惡意流量而不會減慢合法流量速度的 Web 應用程式安全提供者。

Cloudflare 如何協助改善 Web 效能

Cloudflare 是一個全球網際網路安全和效能平台。該平台連線到一個覆蓋 330 座城市的全球網路，可幫助任何規模和複雜程度的網站提高其效能。

對於個人網站和小型企業，Cloudflare 提供免費和低成本的方案，可在幾分鐘內啟用並自動包含重要的網站效能增強功能：

• 高效能 DNS 服務
• CDN
• 影像最佳化
• 行動最佳化
• 防禦 DDoS 攻擊和常見惡意傀儡程式

對於大型企業，Cloudflare 還提供可與任何類型的 Web 應用程式或基礎架構配合使用的企業級效能服務。