使用這 8 個行之有效的策略來確保您的 Webflow 站點性能保持一流。
你有沒有註意到兩年後你的電腦變慢了？所有網站都會發生同樣的事情。當您添加更多自定義腳本、字體、動畫和一般“膨脹”時，甚至 Webflow 站點也會變慢。
網站速度會影響很多事情，包括用戶體驗、轉化率，甚至您網站的 Google 排名。例如，2022 年的一項研究發現，轉化率最高的電子商務網站的加載時間在 0 到 2 秒之間——加載時間每增加一秒，轉化率就會穩步下降。
此外，Google 的 2021 年Core Web Vitals算法更新將網站速度列為排名因素之一，這意味著較慢的加載時間可能會使您的內容在搜索結果中進一步下降。
可靠的站點性能至關重要，您選擇構建的平台可以使保持該性能更容易或更難。作為一名行銷人員、網頁設計師、開發人員和企業家，我在無數平台上建立了無數網站。在嘗試了不同的選項之後，我發現 Webflow 是提供（和維護）出色網站性能的最佳解決方案。
如果您已經熟悉 Webflow 的站點性能優勢，請向前跳至增強性能的技巧。
Webflow 如何提供最佳站點性能
我們一直在尋找一個 CMS 平台，它可以讓我的生活更輕鬆，並避免我花費數百小時處理過時的主題和插件、惡意軟件、安全性和服務器問題。
Webflow 吸引我的地方在於，它能夠通過使用CMS 集合導入 Google 表格，一鍵創建數百個登陸頁面，使用Designer的易用性，自動備份，當然，還有廣泛的免費模板集合可克隆的展示櫃。
由於 Webflow 超快的託管和賣點，Webflow 也是唯一考慮到速度的選項之一，例如：
- 沒有代碼膨脹。Webflow 的代碼非常乾淨且經過優化。
- 沒有過多的附加組件。Webflow 不提供向網站添加數百行代碼的插件。無需擔心長 CSS 樣式表或任何阻塞渲染的 JavaScript。如果您在空白的 Webflow 網頁上運行速度測試，您每次都會獲得 100% 的分數。這是非常了不起的，因為即使是競爭平台上的空白頁面也很難超過 85%。
- 渦輪增壓服務器。Webflow 使用第 1 層內容交付網絡處理所有託管：Amazon Cloudfront 和快速。這消除了管理和維護您自己的服務器、停機時間或高服務器成本方面的任何問題和麻煩。
這些元素結合起來提供了一個網站構建器，它不僅由開發人員創建，而且還考慮了最終用戶體驗。Webflow 的 Web 構建方法很有前途，到目前為止，該平台確實已經交付。
如何隨著網站的發展保持最佳網站性能
為了持續提供最快、最有效的用戶體驗，需要進行大量的 A/B 測試和實踐研究。幸運的是，我們已經花了數百個小時來解決這個問題，我們在這里分享所有內容。
1.避免第三方腳本
任何第三方腳本、聊天機器人和跟踪腳本都會對您的性能得分產生重大影響；LCP和FID都隨著渲染阻止腳本而顯著增加。防止這種情況發生的關鍵是防止立即加載所有腳本。
這使您可以在不影響用戶體驗的情況下加快頁面加載速度以進行速度測試。在幾秒鐘內，他們將與您網站上的任何聊天機器人或第三方腳本互動，他們將被完全加載。
2. 使用 Google 跟踪代碼管理器延遲腳本
如果您不熟悉Google 跟踪代碼管理器，絕對值得一學。它允許您出於多種目的從網絡上傳和管理標籤，包括：
- 轉化事件跟踪
- 網站分析
- 再營銷
您可以根據您確定的規則實施這些標記。例如，您可以將其設置為僅在結帳或確認頁面上加載轉換腳本。
Google Tag Manager 可用於在初始頁面加載後將您網站上所有標籤的加載時間批量延遲最多 6 秒（請參閱說明），或者如果您想給標籤，您可以單獨延遲每個標籤不同的加載時間。
有時，有一些變通方法可以在您的網站上獲得所需的功能，而無需加載第三方腳本。總是在谷歌上搜索你正在加載的腳本，看看是否有一種速度友好的方法來繞過它。
高級提示：您還可以延遲所有腳本而不是使用async。
3. 在移動設備和桌面設備上使用選擇性加載
由於移動網站一開始通常比桌面網站慢，因此最好只在網站的桌面版本上加載某些腳本。Google 還會根據您網站的移動版本對您進行排名。
根據經驗，在您的網站上使用盡可能少的腳本或花哨的效果，無論是移動版還是桌面版。
4. 優化和壓縮你的圖片
您網站上的圖像可以在您網站的性能中發揮重要作用，尤其是隨著時間的推移添加越來越多的圖像。通過實施一些圖像優化步驟，您將能夠使您的網站獲得長期成功。：
請務必使用您選擇的圖像壓縮平台壓縮所有圖像（我們喜歡用於 PNG 和 JPG的圖像壓縮器）。較小的圖像尺寸對於網站性能非常好，因為它們比較大的圖像加載速度更快。請注意圖像質量——您不想將尺寸縮小太多以至於圖像看起來有顆粒感。
此外，您還可以將圖像轉換為WebP——這是一種更小、更緊湊的圖像文件格式，可讓您提供高質量圖像。Webflow 甚至允許您通過其WebP 轉換工具將 Webflow 中的任何現有圖像直接轉換為 WebP 。
5.延遲加載圖像
延遲加載是當查看者滾動到圖像而不是立即將圖像加載到您的網站上的過程。就像我之前討論的腳本延遲黑客攻擊一樣，這可以讓您的網站加載速度更快，而不會影響用戶界面或體驗。
延遲加載的好處之一是它允許您針對視網膜顯示器優化圖像，在不影響網站速度的情況下製作更大的圖像。
截至 2020 年 8 月，Webflow 已將所有新圖片默認設置為延遲加載。您可以檢查圖像是否延遲加載，方法是單擊圖像，轉到右側的“元素設置”面板，並確保“加載”設置為“延遲”。
6. 使用 SVG
盡可能使用 SVG 圖像而不是 JPG 或 PNG。SVG 的文件大小通常要小得多，並且具有盡可能高的質量。不要忘記：
- 通過使它們都具有相同的大小（例如，72×72）來優化您的 SVG。這減少了調整它們的大小所需的組合類的數量，減少了層疊樣式表 (CSS) 中的代碼行。
- 通過 SVG 壓縮器運行所有 SVG 圖像，就像這個一樣。
高級獎勵提示：如果您網站的主標題上有許多 SVG 圖片，它們通常會立即加載，因為查看者需要看到它們（而不是延遲加載）。
解決方法是：
- 在要放置圖像的位置添加嵌入代碼。
- 將 SVG 代碼添加到嵌入中。
- 如果是圖標，請使用 currentColor 在 SVG 代碼中設置顏色。為您的圖標創建色樣並選擇該顏色。現在，任何時候您想更改整個站點上的所有圖標顏色，只需更改色板的顏色即可。
7.減少或刪除你的字體
避免在每個頁面上加載許多不同的字體。每個字體和粗細都是另一個服務器請求，不可避免地會減慢其他一切。這是一個包含許多字體甚至重複字體的站點示例，它向服務器發出了 12 次請求：
如果頁面速度是您的最終目標，請刪除所有字體並僅使用“system-UI”作為您的字體。這根本不會加載任何字體，它只是加載查看您網站的設備的默認字體。例如，適用於 Windows 的 Segoe UI、適用於 Android 手機的 Roboto、適用於 Mac 的 San Francisco 或 Blink，以及作為默認後備字體的 Helvetica Neue。
這樣做很簡單：在 Webflow 中登錄到您的設計器，單擊左側的“導航器”圖標，選擇頂部的“主體”，在主體樣式的右上角，選擇一個類並選擇主體（所有頁面）。然後將右側的字體（在排版下）更改為 system-ui。
這是一個主要的節省時間。例如，如果您使用的是 Google 字體，則更改為系統 UI 字體將為您節省一些對 Google 服務器的請求。
因為系統 UI 字體不需要字體加載和渲染，它還確保文本立即加載到您的頁面上，為您節省關鍵的幾秒鐘時間。這有助於最大化您 Google Core Web Vitals 的 FID 和 CLS 分數。
8.避免預加載
預加載是瀏覽器的幕後指令，告訴它在用戶點擊之前加載另一個頁面。例如，如果 90% 的訪問者從您的主頁轉到您的定價頁面，您可以預加載它以便立即加載。這會影響網站速度，因為它必須加載 2 個頁面：您所在的頁面和下一頁。如果您當前正在使用預加載，您可能需要考慮將其關閉以獲得最佳性能。
注意：默認情況下，Webflow 中的所有鏈接都禁用預加載。
測試，測試，測試
在增強您的 Webflow 網站性能時，最重要的事情是在進行任何更改之前和之後測試您網站的性能。如果您懷疑某些東西可以幫助您的網站加載得更快，請添加它並進行測試。如果您懷疑某些東西使您的網站變慢，請將其刪除並重新測試。
要開始測試您的頁面速度，請查看以下工具：
測試是確保您所做的更改對您的網站產生積極影響的唯一萬無一失的方法。它使您能夠儘早發現潛在問題，將其消滅在萌芽狀態，並實施有益的改變以提高您的績效。
