速度殺手：如何審核和提高網站的速度和性能
已發表: 2017-10-17所以你已經在你的 WordPress 網站上完成了所有這些搜索引擎優化和轉換優化。
你獲得了反向鏈接，你的內容很棒，你的頁面得到了優化，你正在吸引評論，你有一個引人注目的 CTA，並且你有很多準確的商業列表。 你的網站很漂亮。 一件藝術品，真的！
……但是針沒有動。 為什麼？ 解釋可能比您想像的更直接。 您的網站可能很慢。
網站速度不佳實際上非常普遍。 甚至 Vendasta 的團隊也親身經歷過這個問題。 一段時間以來，我們一直在與我們的網站速度問題作鬥爭，我們已經取得了進展……但我稍後會詳細介紹。
我一直在營銷人員和營銷機構中看到這個問題。 我們是那些應該“明白”的人，並且是網站頁面速度優化等最佳實踐的早期採用者。 然而，Google 的 PageSpeed Insights 工具卻對我們許多華麗的、SEO 優化的、內容豐富的網站提出了不同的看法。
我們都需要做得更好。
這就是您現在閱讀本文的原因，讓我們開始吧！
目錄
什麼是頁面速度？
如何確定您的頁面速度和分數
為什麼頁面速度很重要？
1. 速度扼殺用戶體驗
2. 速度殺死 SEO
3. 速度扼殺轉化
如何使您的網站加載速度更快？ 8戰術
4 個站點速度案例研究
如何進行審核和站點速度優化
1. 獲取圖表結果的基線
2. 完成 8 個步驟
3. 需要時尋求幫助
4. 繼續致力於提高網站速度
如何利用網站速度來增加銷售額
什麼是頁面速度？
頁面速度是網站頁面上的內容完全加載所需的時間。 在一個人們開始期待立竿見影的世界裡，越快越好。
事實上，根據 Akamai 和 Gomez.com 所做的調查，將近一半的網絡用戶希望網站在 2 秒或更短時間內加載，如果網站未在 3 秒內加載，他們往往會放棄。
相關閱讀： 58 個令人毛骨悚然的網站統計數據
所以 3 秒是一般訪問者可以容忍的最低速度。 典型的網站能勝任這項任務嗎？ Pingdom 使用他們自己的客戶作為數據源，發現對他們來說，答案是否定的。
在 Pingdom 的客戶端中，3Mb 網頁的平均加載時間為 5 秒。 太慢了。
許多用於頁面加載時間的標準來自 Geoff Kenyon 進行的一項研究，他將網站速度與網絡的其餘部分進行了比較：
- 如果您的站點在 5 秒內加載，則它比 web 的大約 25% 快
- 如果您的站點在 2.9 秒內加載，則它比大約 50% 的網絡速度更快
- 如果您的網站在 1.7 秒內加載，則它比大約 75% 的網站快
- 如果您的站點在 0.8 秒內加載，則它比大約 94% 的 Web
那麼，您如何確定您的網站的排名呢？
如何確定您的頁面速度和分數
以下是衡量您的網站如何與我們上面討論的當前用戶期望相提並論的方法：
- 進入您網站的 Google Analytics 網站速度報告。 這將使您了解您的網站在不同時間段內的表現，以及每個頁面的加載速度。
- 在 Google 的 PageSpeed Insights 工具中輸入您網站的 URL。 這將為您提供一份關於您的網站在移動設備和台式機上的速度性能的成績單。 該報告附帶了一些建議操作，您可以採取這些操作來提高網站速度。
- 檢查 Pingdom 的網站速度測試，找出比 Pingdom 測試網站的平均速度、排名和百分比更快
- GTMetrix 將全面了解您網站的速度優化狀態。
注意：當您在 Pingdom 和 Gtmetrix 中看到不同的速度時序時，不要迷惑自己。 Pingdom 會向您顯示加載時間（顯示您網站的第一個結果所需的時間 - 這就是谷歌計算的時間，您也應該這樣做），而 GTmetrix 會向您顯示完整加載時間（顯示完整頁面所需的時間）功能運行）。 為了進一步理解，從這兩種工具中看到速度瀑布總是好的。
作為網站速度審核的一部分（我將在下面詳細介紹），您將使用這些工具來跟踪您的優化進度。
相關閱讀：如何加速您的 WordPress 移動網站
為什麼頁面速度很重要？
彌合用戶期望（2 秒）和平均網站加載時間（5 秒）之間的差距是頁面速度優化的目標和我們稍後將概述的策略。 但是為什麼頁面速度很重要呢？ 歸結為 3 個相互關聯的主要原因：
1. 速度扼殺用戶體驗
用戶體驗可能是您應該關心網站速度的最重要原因，所以我們將從這裡開始。
人們不再對加載緩慢的網站有耐心了。 一開始，僅僅連接到互聯網就需要一種已經不存在的寬容。
你夠大了還記得這甜美的聲音嗎？
今天，人們經常在線，您最多有 3 秒的時間來顯示您的頁面，否則他們就會消失。 超過 3 秒會造成糟糕的用戶體驗，而且未來的門檻只會越來越高。
在他關於“成功 Web 應用程序的 10 條黃金原則”的演講中，企業家和博主 Fred Wilson 指出，
“速度是最重要的特徵。 如果你的應用程序很慢，人們就不會使用它。 與高級用戶相比，我在主流用戶身上看到的更多。 我認為高級用戶有時對構建真正快速的網絡應用程序的挑戰有一點同情的眼光，也許他們願意忍受它，但當我看著我的妻子和孩子時，他們是我的主流觀點世界。 如果事情很慢，他們就走了。”
考慮這一點的最簡單方法是您瀏覽網站的方式以及您對大多數網站的期望。 你坐在那裡容忍緩慢的加載時間嗎？ 您對需要很長時間才能加載的網站有何印象？
相關閱讀：創建小型企業網站的新手友好型 10 步指南
2. 速度殺死 SEO
用戶體驗實際上是網站速度對 SEO 影響背後的驅動力。
Yoast 的 Edwin Toonen 解釋說，
“Google 的最新研究表明，當頁面加載時間從 1 秒增加到 3 秒時，跳出的機率增加 32%。 1 秒到 5 秒會將機會增加到 90%，如果您的網站加載時間長達 10 秒，跳出的機會會增加到 123%。 這是令人難以置信的。 對於搜索引擎而言，更好的結果和性能是網站健康、取悅客戶的標誌，因此應該獲得更高的排名。”
雖然谷歌遲遲沒有正式透露速度慢的網站是否會導致排名下降，但那些日子似乎即將到來。 您需要確保您的網站和您管理的網站已準備就緒。
3. 速度扼殺轉化
您的網站速度對轉化的影響應該真正引起您的注意。 如果每一步都需要很長時間，你怎麼能讓人們通過你的漏斗？ 您的超級粉絲會這樣做，但那些容易對購買者感到後悔的猶豫不決的新人會反彈。
例如，SOASTA 最近對他們的一個 mPulse 客戶進行了一項研究，該客戶是一家領先的在線零售商，擁有大量（450 萬個會話）移動流量。
以下是他們的主要發現：
- 在轉換方面，性能最佳點為 2.4 秒
- 僅快一秒的頁面轉化率提高了 27%
- 在 4.2 秒時，平均轉化率下降到 1% 以下
- 到 6 秒時，移動轉化率開始趨於平穩
圖片來源： SOASTA
其含義非常清楚。 緩慢的頁面加載時間會影響轉化率。 因此，夏洛克式的演繹推理表明，專注於提高網站速度應該會提高轉化率！
讓我們看看我們是否能做到這一點。
如何使您的網站加載速度更快？ 8戰術
加速您的網站並不一定是一件輕而易舉的事。 如果你有一個小而輕的網站，你可能只需要嘗試這個列表中的幾個策略。
但是，具有大量代碼和內容的大型舊站點可能需要一些持久性並實施以下列表中的幾種策略。
從這裡開始：
1.利用瀏覽器緩存：
當您訪問網站時，您的瀏覽器通常會緩存網站上的頁面以加快加載時間。
當用戶訪問網頁時，瀏覽器緩存會將網頁資源文件存儲在本地計算機上，因此利用瀏覽器緩存就是您指示瀏覽器應如何處理其資源。
如果您的服務器的響應不包含緩存標頭，或者如果資源被指定為僅緩存很短的時間，則速度可能會變慢。
利用緩存將為重複訪問者更快地加載您的頁面，共享這些相同資源的其他頁面也是如此。
注意： SEO 內容策略師 Maddy Osman 指出“W3 Total Cache對此非常有用，但某些主機（如 GoDaddy）被禁止使用。 它需要專家來配置，這樣你就不會破壞你的網站。”
這是怎麼做的
2.優化圖片：
如果圖像加載速度更快，您的網站加載速度也會更快。 谷歌指出“......圖像通常佔頁面上下載字節的大部分。 因此，優化圖像通常可以最大程度地節省字節並提高性能。”
這意味著當頁面上的圖像可以優化以減小文件大小而不顯著影響其視覺質量時，您可以獲得一些重大改進。
這是怎麼做的
3. 壓縮 HTML、CSS 和 JavaScript：
縮小會刪除代碼執行不需要的任何不必要的字符。
您可以刪除的冗餘數據源包括代碼註釋和格式、刪除未使用的代碼、使用較短的變量和函數名稱等。
這是怎麼做的
4.啟用gzip壓縮：
當有人訪問您的網站時，Gzip 壓縮會大大減少從您的服務器發送的文件的大小。 這將大大加快速度。
根據 GTMetrix，
“gzip 在 Web 環境中運行良好的原因是 CSS 文件和 HTML 文件使用了大量重複的文本並且有大量的空白。 由於 gzip 壓縮了常見的字符串，這可以將頁面和样式表的大小減少多達 70%！”
這是怎麼做的
5.減少服務器響應時間：
服務器響應時間是 Web 服務器響應瀏覽器請求所花費的時間。 這是一個需要解決的關鍵問題，因為如果您的服務器響應時間很慢，那麼無論您的頁面速度如何優化，您的頁面都會顯示得很慢。
Google 表示您應該將服務器響應時間減少到 200 毫秒以下。 那麼你如何做到這一點？
這是怎麼做的
6.避免著陸頁重定向：
當您有多個從給定 URL 到最終登陸頁面的重定向時，您的網站速度真的會變慢。 這會引發需要時間處理的重定向循環。
以下是一些可以減慢速度的重定向示例：
example.com → m.example.com/home - 移動用戶的多次往返懲罰。
example.com → www.example.com → m.example.com - 非常慢的移動體驗。
這是怎麼做的
7.優先顯示內容：
當需要額外的網絡往返來呈現頁面的首屏內容時，這就是您將從 Google 的 PageSpeed 工具獲得的確切消息。
這種“首屏”內容是您訪問頁面時在桌面或設備上看到的內容。 因此，對可見內容進行優先排序是建議您對事物進行優先排序，以便首先（并快速）為用戶加載頁面上的基本元素，並推遲次要頁面元素，如社交共享插件、分析 javascript 等。
這是怎麼做的
8. 消除首屏內容中的渲染阻塞 JavaScript 和 CSS：
JavaScript 和 CSS 資源通常會阻止您的頁面在完全加載之前顯示。 這通常是個好主意，因為過早顯示首屏內容可能看起來很奇怪。
然而，這是您從 Google 收到的關於站點速度的常見消息，處理它確實可以使您的頁面速度提高幾個檔次。
這是怎麼做的
注意：對於大多數人來說，這是最難解決的問題。 有一些 wordpress 插件可以做到這一點，但它們可以讓您的網站在每次加載時看起來都像弗蘭肯斯坦。
案例研究：加速 Vendasta 的博客
所以我正在寫這篇關於網站速度的文章，即使 Vendasta 的移動速度為 44/100（更新：三個月後我們的速度為 77/100！），桌面速度為 60/100。
相信我，我知道這裡可能存在關於街頭信譽的問題。 然而，我們的故事遠不止 Google 的洞察工具所能告訴您的。
在 Vendasta，我們在網站速度方面投入了大量工作，但顯然我們仍未達到預期目標。 我們實際上已經做了很多改進，但我們的網站很大，內容很多，所以我們還沒有達到移動和桌面 80/100 的目標。
然而，我們並不是唯一在網站速度方面苦苦掙扎的人！ 許多知名網站與我們面臨同樣的挑戰。 事實上，根據 Google 的 PageSpeed Insights 工具，即使是 HubSpot 也需要改進其網站的性能：
這不是 HubSpot 的“射擊”標註（尊重！），我只是用它們作為示例來說明提高網站速度可能是一個挑戰，即使對於專業人士來說也是如此，我們都需要改進滿足下一代互聯網用戶的需求。 通過該工具運行一些您最喜歡的網站，您就會明白我的意思！
正如我上面提到的，我們為加快速度所做的每一項改進都會產生指數級的結果。
Vendasta 營銷技術專家 Adam Bissonnette 指出，
“對我們來說最大的變化是服務器端的東西——我們在 AppEngine 中運行我們的 wordpress 網站處於一個獨特的位置（沒有人這樣做）並且巨大的性能提升是從 AppEngine Standard 切換到處於 Beta 階段的 AppEngine Flex。我們也改變了我們的 php 版本從 5 到 7 這也有很大幫助。更新 php 帶來了一系列問題，其中某些插件不再工作，我們不得不處理一兩個月的後果，但速度比丟失的功能更有價值”
您可以從中得到的是，為您的特定情況找到最佳解決方案是關鍵。 您可能會發現我們在這裡甚至沒有提到的可以為您的網站帶來積極影響的策略！
看看我們的博客在 2016 年 5 月開始提高網站速度後的增長情況：
這些改進為隨後的所有 Vendasta 內容計劃奠定了基礎。 從那時起，我們就專注於製作大量有深度、高質量的內容。 如果沒有我們同步的網站速度改進，您不太可能看到分析屏幕截圖顯示的流量激增。
隨著我們不斷優化我們的網站速度和改善我們的用戶體驗，性能只會提高！
要點：您無需獲得 100/100 的分數即可體驗網站的增長。
如果您是 40/100，請在時間允許的情況下進行一些改進，然後爭取達到 60/100。 不要立即為 100/100 射擊而筋疲力盡！
案例研究：iHeartRaves
iHeartRaves 是節日時尚的世界領導者，其使命是激發個人創造力並增強自我表達能力。 結合他們的另外兩個姐妹品牌，他們的 Shopify 商店每年的總收入為 2000 萬美元，並且他們已經連續四年入選 Inc. 5000。
作為電子商務網站，iHeartRaves 清楚地意識到網站速度和性能不佳的財務後果。
iHeartRaves 的數字營銷策略師 Brandon Chopp 告訴我，
“作為電子商務品牌，我們意識到網站速度是巨大的！ 當我考慮轉化時，我在考慮通過號召性用語讓用戶點擊某些內容的最佳方式。 事情的真相是，更快的網站將永遠獲勝。 您的網站越快，用戶轉換的可能性就越大。”
布蘭登知道他必須提高站點速度才能幫助企業實現收入增長目標。 他使用以下策略解決了 iHeartRaves 的速度增強問題：
- 優化圖片：為了確保我們的移動網站快速加載，我們使用名為 Crush.pics 的 Shopify 應用程序。 這確保了我們所有的圖像都針對站點速度進行了優化，同時仍保持圖像質量。
- 縮減代碼：我們還採取措施縮減所有流式代碼和優化腳本加載順序，同時減少被調用腳本的總數。
- 清理頁面資產：刪除某些頁面上不必要的資產，同時減少其他頁面上的圖像資產，也有助於減少網站加載時間。 我們試圖在速度和內容之間取得平衡，因為我們是一個電子商務網站。 確保我們的圖像質量達到我們的標準，同時為我們的客戶保持良好的用戶體驗對我們來說非常重要。
通過這些更新，頁面加載速度和跳出率結果確實得到改善：“自從進行更改後，我們的網站速度同比從 10.25 秒減少到 6.86 秒（減少 65%），我們的跳出率也減少了 6%，”Brandon 解釋說. “它最初是 40.34%，現在下降到 34%。”
這些改進也已轉化為 iHeartRaves 的切實財務成果。 “我們從 Google 擁有一個快速的移動網站而受益，因為我們的轉化率逐年增加，這在很大程度上要歸功於我們網站速度的下降。 通過將客戶的用戶體驗放在首位，我們能夠留住我們的客戶，並讓各地的購物體驗更加輕鬆。”
要點：重要的是要記住速度和用戶體驗是相輔相成的。
結合起來，這兩者可以導致統領它們的一個指標的改進：轉化！
案例研究：Jubaer 的 6 秒 40 點改進
Vendasta 自己的 SEO 專家 Jubaer Prodhan 分享了一個實例，他在自己的網站上使用了 Google 的 Pagespeed Insight Tool，並取得了一些不錯的結果。
Jubaer 指出，“就我而言，我有一個 wordpress 網站，加載時間超過 8 秒，GPI（Google PageSpeed Insight）得分為 43。我做了以下事情來提高網站速度。”：
- 圖像優化：如果操作正確，則可以大大減小頁面大小和速度。 在我的例子中，頁面大小從 3MB 下降到 1.6mb。 使用的插件：ShortPixel Image Optimizer（也可以用這個工具優化圖片）
- 代碼壓縮：我們經常使用多個 wordpress 插件來滿足我們的各種需求。 我們沒有意識到的是，他們中的大多數會向您的站點添加額外的 CSS/HTML/Javascript。 這會增加加載時間和瀏覽器請求。 縮小（刪除額外的行和代碼）是一個簡單的解決方案。 使用的插件：自動優化
- 瀏覽器緩存：大多數主要工具都推薦使用瀏覽器緩存。 它還減少了帶寬、回訪者的加載時間以及許多其他有用的東西。 使用的插件：WP Fastest Cache
Jubaer 的網站現在加載時間為 1.9 秒，GPI 得分為 83！ 與 8 秒和 43 分的 GPI 相比，這是一個很大的進步。
要點：較小的網站只需進行一些關鍵更改即可顯著提高速度。
嘗試通過 Jubaer 的列表開始工作，看看在繼續下一個策略之前會得到什麼結果。
相關閱讀： 7 個 WordPress SEO 插件：您的新本地堆棧
案例研究：一家公司如何在 Google 的 PageSpeed 工具上達到 100/100
獲得 100/100 表明您的網站已盡可能優化速度。 這是最終目標，與我交談過的一家公司解釋了一些幫助他們實現目標的內部策略。
Bret Bonnet，Quality Logo Products 的共同所有者/創始人，這是一家位於伊利諾伊州芝加哥的價值 4000 萬美元的促銷產品分銷商。 解釋說，
“頁面速度是我們組織的主要關注點。 儘管它很小，但它仍然是一個排名信號。 研究表明，頁面速度會對轉換性能產生巨大影響。 改善網站加載時間的最有效方法是使用資產加載，允許“首屏”內容在加載 CSS/JS 之前完全顯示。 不優化“首屏”內容的加載可能會導致 Google Page Speed Insights 整體得分減去 10 分。”
[clickToTweet tweet="不優化首屏內容的加載會導致 Google #PageSpeed Insights 整體得分減去 10 分。" quote="不優化首屏內容的加載會導致 Google #PageSpeed Insights 整體得分減去 10 分。"]
這 10 分的扣分顯示了 Google 認為優化首屏內容的重要性。 布雷特接下來的解釋是令人吃驚和自相矛盾的：
“除了資產管理之外，任何在其源代碼中包含 Google AdWords 或 Google Analytics 等通用跟踪代碼的網站都無法獲得滿分。 這些 JS 文件直接由谷歌提供——無論出於何種原因，谷歌不遵循他們自己的質量指南——並且未壓縮地傳輸到瀏覽器。 這種糟糕的優化——這又是你無法控制的——完全在谷歌這邊，可能會讓你損失多達 5 分。”
Quality Logo Products 能夠使用以下策略加快速度並實現 100/100：
“為了克服這個問題，我們記錄了谷歌抓取的 IP 和這些工具的源 IP，並讓我們的服務器有意為我們頁面的谷歌版本提供服務，而沒有安裝跟踪代碼。 這有點奇怪，但 Google 正在損害我們自己的 Google Page Speed Insight 得分。 因此，為了克服它，我們有意不向 Google 提供其自己未優化的代碼，從而使我們的頁面速度得分平均提高了 5 分。”
要點： 100/100 分是可以達到的！
令人困惑的是，谷歌自己的產品將速度放慢到如此程度，但本案例研究中的解決方法應該有所幫助。
如何進行審核和站點速度優化
1. 獲取圖表結果的基線
審核和優化過程的第一步應該是了解您的網站目前代表幾個指標的基線。
如果您記錄您的起點，您將能夠更好地跟踪您的優化工作是否成功。 任何時候您以任何方式優化您的網站以提高速度，請確保您根據這些相同的指標記錄您的進度。
以下是您應該跟踪的一些事項：
- 網站加載時間：轉到您的 Google 分析報告菜單→行為→網站速度→概述（和頁面計時以查看各個頁面）。 記錄平均網站頁面加載時間和您要跟踪的任何關鍵頁面。 您還可以使用上面提到的 Pingdom 和 GTMetrix 工具。
- 您網站的 Google PageSpeed 分數：只需單擊此處並輸入您網站的 URL 並檢查您的移動和桌面分數。 記錄這些。
- 跳出率：看看您的跳出率是否有所提高，這表明在僅查看一個頁面後離開網站的人數減少了。 您可以在許多地方查看它，例如行為 → 概覽。
- 轉化率：改進後訪問者的轉化率是否更高？ 跟踪很重要！ 前往轉化 → 目標 → 概覽以查看和記錄您當前的轉化率。
在電子表格中記錄您的進度，並確保通過為每次更新創建註釋來在 Google Analytics 中記錄網站的更改。
2. 完成 8 個步驟
開始審核的最佳起點是 Google 的 PageSpeed Insights 工具提供的建議。 如果您還沒有達到 100/100，您會看到來自 Google 的一些關於從哪裡開始的提示。
正如我所提到的，通過我們強調的 8 個步驟來提高網站速度需要一些時間和堅持。
Yoast 的 SEO 專家 Meike Hendriks 指出，
“加速您的網站並不難。很多網站的圖像太大，可以輕鬆優化。此外，擁有來自世界各地的訪問者的網站絕對應該使用 CDN 來確保圖像作為每個人都盡可能快！在 .htaccess 文件中添加一些代碼行，可以輕鬆加快您的網站速度。例如，您可以為較小的文件啟用瀏覽器緩存和 gzip 壓縮，這些文件可以更快地加載到訪問者的計算機上。”
你必須設定一些現實的目標和期望。 當您擁有像我們 Vendasta 和 Hubspot 那樣包含大量（很棒！）內容的大型多方面網站時，將需要更多時間才能實現與頁面較少的小型靈活網站相同的目標。
3. 需要時尋求幫助
嘿，我們不都是開發人員和設計師。 如果您的 DIY 開發工作破壞了您的網站或即將進行治療，您可能需要尋求專家幫助。
我們都知道並羨慕技術奇才。 讓他們為您做這件事！
Digitimatic 的 Pius Boachie 告訴我，全棧開發人員是幫助解決站點速度問題的關鍵：
“當談到擊敗谷歌頁面速度洞察工具時，開發人員通過保持代碼清潔、優先考慮內容來完成繁重的工作。根據經驗，在為客戶設計時，我們設計速度，所以我們選擇像 Duda 這樣的網站建設者（快速產品）或建立在 CMS 上或從頭開始（昂貴），與經驗豐富的全棧開發人員一起投資良好的 CDN 和託管（非常重要）。”
您已經設置了基準指標，因此很容易跟踪您的進展和未來的成功。 如果您在多個站點上為客戶工作，您將希望能夠複製您的成功並停止任何不起作用的東西。
推薦閱讀：無需開發人員：為什麼需要白標網站生成器
4. 繼續致力於提高網站速度
您可能會敲出一些容易實現的成果，例如圖像優化、代碼縮小和瀏覽器緩存，並立即看到一些不錯的結果。 然而，要實現您的目標，您可能需要付出更持久的努力，逐步消除我強調的 8 種策略。
不要試圖一次完成所有操作！ 為避免精疲力盡，請制定一個逐漸減少的計劃，同時監控您的努力結果。
以下是如何利用網站速度來增加銷售額
最後的想法
獲得真實世界的網站速度改進總是比它在博客文章中出現的更混亂。 在此過程中，您將面臨一些挑戰，但請專注於結果，因為從長遠來看，它們將改善用戶體驗、SEO 和轉化率。
這才是最重要的； 為在線瀏覽的快速未來做準備。
如果您需要幫助，請致電您的技術朋友或告訴我們如何提供幫助！
如果您有任何經驗或建議要分享，請隨時在這篇文章的評論部分發表意見......