如何衡量和提高電子商務網站速度（11 條提示）以及為什麼它對轉化率優化至關重要

加載緩慢的網站排名不佳，帶來的收入減少，運行成本更高。 無論您從事什麼業務，如果您有在線業務，提高網站速度是降低跳出率和提高電子商務轉化率的最有益方法之一。

如果您在電子商務領域，則更需要投入時間和資源來實現盡可能快的網站速度。 研究表明，網站速度直接且顯著地影響產品排名、轉化率和每位訪問者的價值。

但許多零售商不願意做出重大改變。 網站速度優化看起來很複雜。 有許多不同的領域需要關注，其中許多領域需要大多數人不具備的特定編碼技能。

如果你有同樣的感覺，那就別擔心。 在本指南中，我們將涵蓋您需要了解的所有內容——從圖像壓縮到 CDN，再到服務器端數據庫優化等等。 一旦您掌握了基礎知識，您就會感到足夠自信和知識淵博，可以將您的網站速度直接提升到平流層。 即使您沒有任何技術開發或優化知識。

這是您可以在這篇文章中找到的內容：

什麼是網站速度？
為什麼網站速度很重要？
如何檢查您當前的網站速度：Google PageSpeed Insights 結果說明
用於提高頁面速度的頂級數據支持方法
1.檢查並提高您的託管服務提供商的速度
2. 優化圖片
3. 啟用瀏覽器緩存
4. 縮小 HTML、JavaScript 和 CSS
5. 利用 AMP（加速移動頁面）和 PWA（漸進式 Web 應用程序）
6. 殺死性能不佳的 WordPress 插件
7. 使用內容分發網絡
8. 優化您的服務器響應時間
9. 盡可能使用壓縮
10. 盡可能異步加載文件
11. 減少重定向
幫助提高網站速度的工具
準備好提高您的電子商務網站速度了嗎？

聽起來不錯？ 那我們就來挖吧！

什麼是網站速度？

在網站速度方面，有很多常見的誤解。 在我們深入探討這篇文章的內容之前，讓我們先定義幾個關鍵術語。

首先，區分“頁面速度”和“站點速度”很重要。 頁面速度是在您的網站上加載單個特定頁面所需的時間。 網站速度是您網站上的網頁樣本的平均速度。

在許多方面，這種區分是任意的，但值得理解以避免任何混淆。 這篇文章旨在為您提供特定頁面和站點範圍的優化技巧。 通過實施最佳頁面實踐（這將告知您如何設計所有頁面），您將提高整體網站速度，這是關鍵指標。

網站速度可以根據頁面加載時間（頁面完全呈現所需的時間）或第一個字節的時間（瀏覽器從服務器接收第一個字節數據所需的時間）來衡量。 一般來說，頁面加載時間（和類似的變體）是更準確和常用的度量，儘管在某些情況下第一個字節的時間也是一個有用的數字。

為什麼網站速度很重要？

網站速度以許多與搜索排名、參與度、轉化率等相關的關鍵方式影響您的網站。 但是許多網站管理員，其中包括電子商務零售商，都忽略了他們網站的這一重要方面。

緩慢的加載時間對您的底線有直接影響。 來源

提高網站速度是獲得競爭優勢的最可靠方法之一。 讓我們快速看看為什麼它如此重要：

網站速度影響搜索排名

網站速度是谷歌的主要排名因素。 谷歌本身已多次重申這一點。 大量獨立分析證實，在 SEO 方面，網站速度是最重要的優化領域之一。

正如為 Yoast 撰稿的 Edwin Toonen 所說：“您甚至不必非常仔細地聽，因為 SEO 人員在屋頂上大喊：網站速度就是一切。 每天都有一篇新文章、白皮書、Google 代表或 SEO 專家告訴我們優化速度是您現在可以做的最重要的事情之一。 他們是對的，當然！”

網站速度影響跳出率

如果加載時間較長，人們更有可能離開您的網站。 此活動不僅對 Google 是一個負面信號（表明客戶參與度低），而且還會直接影響您的轉化率。

如果客戶因為你的網站加載時間太長而沒有留下來，他們就沒有機會看到你的精彩的、轉化優化的頁面和優秀的產品。

網站速度影響客戶價值

研究表明，每頁瀏覽量的價值隨著網站速度的增加而增加。 我們不只是在這裡談論幾個百分點。 將您的網站加載時間縮短到一秒可以將您的每網頁瀏覽價值提高多達 100%。

將您的網站速度降低到 1% 以下可以將每次瀏覽量的價值提高多達 100%。 來源

體驗低網站速度會產生負面心理影響

加載緩慢的網站會讓客戶感到沮喪，並表明您缺乏專業精神。

當頁面加載時間過長時，人們會感到有形壓力。 一旦潛在客戶將您的品牌與這種負面體驗聯繫起來，他們將來就更有可能對它持悲觀態度。

相反，快速加載的網站為客戶提供積極的用戶體驗（查看這 11 個 UX 提示！）並傳達您商店的專業性和質量。

如何檢查您當前的網站速度：Google PageSpeed Insights 結果說明

有許多工具可用於測試您的網站速度。 一些專注於特定領域——比如你的 DNS 提供商速度或你的第一個字節的時間 (TTFB)——而另一些則更全面。 作為起點，沒有比 Google PageSpeed Insights 更好的選擇了。

以下是如何為您的網站提供完整的醫療信息以及結果的含義：

1. 前往 Google PageSpeed Insights 並在文本欄中輸入您的 URL。 點擊“分析”以獲得您的結果。 在本演練中，我們將使用 Zappos 作為示例。 Google PageInsights 可以說是測試網站速度的最佳工具，它是完全免費且非常全面的。

2. 除了頁面頂部包含的整體結果（將您的頁面排名為慢速、平均或中等）之外，您還將獲得三組針對移動設備和桌面設備的結果：

• 現場數據——這是基於歷史數據，並從谷歌跟踪的用戶樣本中得出。 它很有用，因為它允許您查看過去可能出現的持續性問題，而不僅僅是在一個特定的測試案例中。 下面的彩色條顯示您的頁面與 Chrome 用戶體驗報告中的其他頁面（Google 保存數據的所有頁面）的比較情況。
• 源摘要（不自動顯示） – 源摘要，您需要單擊以展開，顯示整個站點（而不是單個頁面）的平均數據。 “Origin”是指基本 URL。
• 實驗室數據- 這些是基於您單擊“分析”時網頁的性能的即時結果。 這些是從瞬時性能得出的當前結果，沒有考慮任何其他數據。 您在頁面頂部的整體網站速度得分基於此實驗室數據。

“實驗室數據”部分對站點速度指標進行了最詳細的深入分析。

3. 不要忘記有兩個選項卡（標題中的藍色菜單）——一個用於移動設備，一個用於桌面設備——顯示不同的數據。 您通常需要單獨應用與每個相關的優化建議。

4. 在每個部分中，有兩個關鍵速度測量（FCP 和 FID）以及“實驗室數據”部分中的五個獨立測量：

• First Contentful Paint FCP – 在 Web 性能上下文中，術語“首次繪製”是指瀏覽器用戶可見的第一個 Web 元素。 “第一個內容豐富的繪畫”是第一個有凝聚力的內容出現的時候。 這裡“內容”的定義是在文檔對像模型中離散定義的任何東西——本質上是一個單獨的、獨立的元素，構成頁面層次結構的一部分，如圖像或文本塊。 內容是網絡用戶可以“消費”的任何東西。 通過這種方式，它與“第一次繪製”不同，“第一次繪製”可以是簡單的背景變化或單個像素。
• 首次輸入延遲 (FID) –首次輸入延遲是衡量您的網站響應速度的指標。 當訪問者通過單擊鏈接、放大圖像、選擇產品選項等方式與您的站點進行交互時，由於後台瀏覽器進程有效地“禁用”了交互式站點元素，因此可能需要一些額外的時間來接收響應。 FID 基於 Google 收集的實際用戶數據，因此不包含在實驗室數據中。
• 第一次有意義的繪畫——本質上是衡量觀眾何時可以真正開始消費內容的指標。 當主要的首屏內容和網絡字體都加載時，第一次有意義的繪製就發生了。 谷歌表示，這是他們衡量網站速度的主要用戶體驗指標。
• 速度指數 –從視覺上看，您的頁面完全加載所需的時間。 它基於逐幀比較中瀏覽器渲染停止更改的時間。
• 第一個 CPU 空閒 –第一個 CPU 空閒表示網站至少在某種程度上具有交互性的時間。 並非所有的交互元素都準備好了，但有幾個會準備好。
• 互動時間 –網站完全加載並完全互動所需的時間，準備好響應任何訪問者的操作。
• Max Potential First Input Delay –如果要測試的最高可能 FID 的預測數字。 這個數字是基於實驗室數據，而不是真實數據。

5. 在這三個部分下面是一個標題為“機會”的部分，以及它們可以降低您網站速度的時間。 這是測試的真正內容——提高網站速度的實用建議。 您可以展開每個建議以獲取實施說明。

讓我們看一下下面屏幕截圖中的幾個示例（我們將在下面的部分中更詳細地介紹其中的大部分）：

“機會”部分為您提供了提高網站速度的具體建議。

• 縮小JavaScript –縮小是壓縮包含代碼（HTML、CSS、JavaScript 等）的文件的過程，以便它們可以更快地從服務器傳輸到瀏覽器。
• 推遲離屏圖像——推遲離屏圖像涉及延遲非首屏圖像的加載時間，減少第一個服務器請求的大小並提供更快的整體初始加載時間。 加載完所有首屏圖像後，將呈現頁面的其餘圖像。
• 刪除未使用的 CSS – .css 樣式表包含大量多餘的代碼是很常見的。 刪除此代碼可以減小 CSS 文件大小。 將所有 CSS 包含在一個文件中還可以減少瀏覽器解釋數據所需的時間。
• 以下一代格式提供圖像– JPEG 2000、JPEG XR 和 WebP（以及其他一些格式）等圖像格式提供了比替代品更好的壓縮，而不會犧牲質量。
• 減少服務器響應時間 (TTFB) –可以通過多種方式加快服務器響應時間，包括優化您的 CMS 和選擇更快的託管服務提供商。
• 啟用文本壓縮 –當您在服務器上啟用 gzip 功能時，文件中的文本將被壓縮，從而減小其大小並加快傳輸速度。 然後，瀏覽器可以處理壓縮文件。

6. 最後，“機會”部分下方是“診斷”和“通過的審核”部分。 根據您通過的最佳網絡實踐和標準，這些（分別）涵蓋了進一步的加速機會。

在隨後的部分中，您可以看到更多關於提高站點速度的建議，以及您已通過的審核（非常適合檢查更改是否已正確實施）。

Google PageSpeed Insights 有關於其所有功能和建議的指導性和清晰的文檔，如果您有任何進一步的不確定性，它是一個很好的資源。

想要更多這樣的見解？

每週獲取電子商務技巧、策略和領先的行業知識。直接發送到您的收件箱。

在我已經閱讀隱私政策，我接受的通訊條款和條件。

請選中此復選框以繼續

嗚呼！ 你剛剛註冊。 檢查您的收件箱以確認訂閱。

其他工具呢？

PageSpeed Insights 的所有功能都不是完美無缺的。

它絆倒的一個領域與地理區域有關。 測試服務器的位置未知，因此結果可能不一致。 例如，如果您的服務器位於英國，而測試服務器位於美國西海岸，那麼對於在前國家/地區訪問您網站的人來說，結果會更快。

使用 Pingdom 和 GTmetrix，兩者都可以讓您設置測試服務器的位置，以補充 PageSpeed Insights 提供的圖片。

用於提高頁面速度的頂級數據支持方法

好的，讓我們深入研究一些實用技巧。

以下是您可以採取的十大步驟，以確保您的網站在眨眼間加載：

1.檢查並提高您的託管服務提供商的速度

簡短版本：雖然您可以對服務器進行積極的更改，並且從共享計劃轉向專用計劃可能會有所幫助，但有時您只需要更改提供商即可。 在開始執行您控制的任務之前，請檢查您的提供商的服務質量。

如果您的託管服務提供商的服務器速度很慢，您幾乎無能為力來解決這個問題。 來源

使用 Bitcatcha 之類的工具來測試您的網站託管服務器的速度並將其與其他公司進行比較。

如果您的託管服務提供商速度很慢，那麼您無能為力。 您可能需要考慮更換為新的提供商。 如果您經營在線商店，切換到具有電子商務經驗的專用或託管託管服務提供商通常是有益的。

以下是託管計劃在速度方面的主要區別：

• 共享主機 -共享主機是最便宜和最慢的託管形式。 您的網站將與其他用戶的網站一起存儲在服務器上。 這種安排的最大缺點是所有服務器資源，尤其是 CPU 和 RAM，也將被共享。 這會對站點速度產生不利影響，並且對於需要大量處理能力的大型站點可能會產生特別負面的影響。
• 虛擬專用服務器 (VPS) –虛擬專用服務器在許多方麵類似於共享服務器。 多個站點託管在單個服務器上，但它們被虛擬屏障隔開，實際上重新創建了擁有自己的服務器的感覺。 這樣做的主要好處是，您的所有服務器資源都被圍起來了——您的室友不可能用完所有的熱水，讓您高枕無憂。 虛擬專用服務器還允許您在服務器管理方面擁有更高的自由度。 此外，如果您需要更多空間，您可以購買它。
• 專用主機 –專用主機是 VPS 主機的下一步。 有了專門的計劃，您將租用服務器，該服務器將專門用於運行您的網站。 您還將擁有完全的管理員和根控制權（包括對操作系統和安全設置的選擇），這可以使技術服務器站點速度優化成為可能。 專用主機非常適合擁有專門技術團隊的大型網站和公司。

一般來說，如果您運行的是電子商務網站，則需要選擇專用或 VPS 託管。

以下是一些評價最高的在線零售商供應商：

SiteGround – SiteGround 有許多專門針對電子商務平台的計劃，包括 Magento、WooCommerce 和 PrestaShop。

Liquid Web – Liquid Web 的核心主張之一是卓越的客戶服務。 該公司提供 24/7 全天候顧問服務，通常響應時間不到一分鐘。 提供了許多特定於電子商務的計劃（包括 WooCommerce 的專用託管），對於希望在未來擴大規模的中小型零售商來說，這是一個很好的選擇。

InMotion 託管 – InMotion 非常受電子商務零售商的歡迎，是價格最優惠的選擇之一。

Rackspace – Rackspace 是企業電子商務的首要解決方案之一，提供一系列專用和雲託管解決方案。 客戶服務和安全基礎設施在行業中名列前茅。

不要吝嗇您的託管服務提供商。 這是一個不受您控制的區域。 從長遠來看，將成本置於性能之上只會導致較低的回報。

2. 優化圖片

簡短版本：優化圖像是提高網站速度的最簡單快捷的方法之一。 確保圖像採用適合網絡的格式。 使用 CSS 精靈來加快圖像加載時間。

在網站速度方面，圖像是罪魁禍首。 不必要地大的圖像文件會不必要地佔用服務器空間並需要更多時間發送到訪問者的瀏覽器。

您應該在 PhotoShop 或 GIMP 等程序中優化圖像，以保持對圖像質量的完全控制。 不同的格式最適合不同類型的圖像。 例如，一般來說，JPEG 是照片的理想選擇，而具有庫存顏色的簡單圖像將更快地呈現為 PNG。

以下是最常見格式以及何時使用它們的簡要概述：

• JPEG（聯合攝影專家組）—— JPEG 可能是最廣泛使用的高質量照片和細節豐富圖像的格式。 主要的好處是 JPEG 圖像可以很好地呈現，同時提供高水平的壓縮。 對於照片，JPEG 是首選選項。 您還應該考慮使用較新的 JPEG 變體，如 JPEG 2000 和 JPEG XR，它們可以提供更高級別的壓縮。
• PNG（便攜式網絡圖形）——作為一種格式，PNG 介於 JPEG 和 GIF 之間。 它在質量、支持多種顏色和尺寸之間取得了良好的平衡。 PNG 往往比 JPEG 小，但在顏色和細節方面沒有完全相同的容量。 人們擔心與舊瀏覽器的兼容性，但現在這些在很大程度上是多餘的。
• GIF（圖形交換格式）– GIF（網絡上最古老的格式之一）最適合具有有限調色板（如徽標）的圖像。 如果您需要上傳主要由文本組成的圖像，則可以選擇 GIF 格式。 GIF 文件的主要優點是它們往往非常小。 由於色彩容量有限，GIF 不應用於豐富的圖像或照片。 您還可以將 GIF 用於基本動畫。 不要將 GIF 用於富媒體。 使用第三方託管內容（如 YouTube）將更有利於網站速度。

除了使用正確的格式外，您還可以通過以下方式優化圖像以提高網站速度：

• 不要讓圖像比他們需要的更大——許多設計師和開發人員犯了一個錯誤，就是將大圖像（通常超過幾千像素）上傳到他們的服務器，然後使用頁面代碼調整它們的大小。 這是一個大錯誤。 如果在產品頁面上僅以 1000 像素顯示，那麼向訪問者的瀏覽器發送 5,000 像素寬的圖像絕對沒有意義。 通常，圖像需要相對較大才能啟用縮放功能，但要盡可能小。 在上傳之前調整圖像大小。
• 在上傳之前壓縮圖像——壓縮會從您的圖像文件中刪除所有多餘的信息，從而減小它們的大小。 某些“不可見”的細節，例如拍攝圖像的時間，可能會嵌入到文件中。 TinyPNG、JPEG Optimizer 等工具和 WPSmush 等插件可用於快速執行此任務。 大量使用所需的所有付費計劃都非常合理。
• 不要在頁面上使用不必要的圖片——每張圖片都會佔用網站完全加載所需的時間，所以不要使用超過絕對必要的圖片。 很容易陷入僅僅為了圖像而包含圖像的陷阱。 再注射一次產品不會有傷害，對吧？ 但是在創建產品頁面時消除不必要的圖像是一種很好的做法（查看出色的產品頁面模板）。 您可能還想利用“延遲加載”首先呈現首屏圖像（而不是同時呈現頁面上的所有圖像）。 您在 HTML 代碼中設置為“延遲加載”的圖像只會在訪問者看到頁面頂部的信息後或訪問者開始滾動時加載。

最後，在適當的地方將圖像作為 CSS 精靈上傳到您的服務器。 CSS sprite 是將多個圖像組合成一個文件的集合。 瀏覽器可以下載等效於單個圖像的圖像，而不是單獨從服務器加載圖像，從而消除對多個服務器請求的需要。 然後可以定制頁面代碼以僅在需要時顯示特定的單個圖像。 您可以將此技術用於從產品圖像到 CTA（號召性用語）按鈕和社交媒體圖標的所有內容。

3. 啟用瀏覽器緩存

簡短版本： “要求”瀏覽器在用戶返回時保存和重複使用您的站點文件。 這樣做可以減少重複訪問者的頁面加載時間，而您幾乎不需要任何輸入。

當瀏覽器存儲構成您網站的重要文件時，就會發生瀏覽器緩存。 這意味著當訪問者返回您的站點時，他們的瀏覽器不必直接從您的服務器檢索每個文件。 它只需要請求可能已更新的特定文件，甚至單個頁面的某些部分（如徽標圖像）。 這大大增加了加載時間，因為它減少了向服務器發出的請求數量。

啟用緩存是一個相當簡單的過程，涉及向 HTTP 標頭添加少量代碼以設置特定文件的到期時間。 如果您的網站託管在 WordPress 上，則有許多插件（例如 W3 Total Cache）可以簡化此過程。

B瀏覽器緩存對於在線零售商來說可能有點棘手，因為頁面通常會受到有關價格、庫存水平、評論、交付信息等的時間敏感更新的影響。 因此，區分存儲真正穩定內容的文件（CSS 樣式、徽標、導航等）和那些可能會更改的內容非常重要。 然後你可以相應地編碼。 請記住，完全有可能對特定的頁面元素（如頁眉和頁腳）以及對時間不敏感的更大文件（如 CSS 樣式表）進行編碼，即使只是為這些元素啟用緩存仍然會對網站速度產生積極影響。

4. 縮小 HTML、JavaScript 和 CSS

簡短版本：使用 CDN（內容交付網絡）啟用自動縮小並將文件大小減少多達 60%。 設置 CDN 是一個相對簡單的過程，由 CloudFlare 和 Amazon AWS 等知名服務提供。

最小化是最小化 Web 文件中的代碼的過程。 它已被證明可以顯著減少網站加載時間。 可以以更快的速度請求較小的文件，然後由瀏覽器解釋。 這種優化策略通常由頁面速度工具突出顯示，並且是您可以實施的最有效的策略之一。

它之所以有效，是因為開發人員可以理解其長度和復雜性的差異（通常包括註釋、空格、逗號等）以及瀏覽器呈現頁面所需的最少代碼。 有時這個縮小版本可以小到原始版本的 40%。

縮小可以顯著減小 Web 文件的大小。 來源

但是有一個關鍵問題。 手動縮小是一個很大的禁忌。 這需要太多時間，而且出錯的餘地也太大了。 即使使用自動化工具，在開發階段也需要高水平的手動輸入來處理和實現所有替代代碼。

相反，最好的選擇是使用 CDN（內容交付網絡），它會在將代碼交付給瀏覽器之前自動縮小代碼。 原始文件將保存在您自己的服務器上，而縮小版本將存儲在 CDN 服務器上。 每當您對頁面進行更改時，它們都會與 CDN 服務器同步。 CDN 也因各種其他原因而有用，但我們稍後會談到。

5. 利用 AMP（加速移動頁面）和 PWA（漸進式 Web 應用程序）

簡短版本： AMP 和 PWA 均由 Google 開發，可以顯著提高您的移動頁面加載速度。 開發成本很高，因此應根據其他積極因素（如果您願意）來考慮向 PWA 或 AMP 的過渡。 如果您決定繼續，對您網站速度的影響可能會很大。

將您的移動頁面轉換為 AMP 可能是一項艱鉅的工作，並不適合所有人。 但是，作為一種長期戰略，它絕對值得探索。

AMP 和 PWA 究竟是什麼？ 這是一個快速概述：

• Accelerated Mobile Page (AMP) – AMP 是一個開發框架 – 由一個 HTML 子集 (AMP HTML)、一個 JavaScript 框架和一個可選的 CDN（內容交付網絡）組成 – 由谷歌創建，允許開發人員提供閃電-快速移動頁面，無需在速度優化上投入大量資源。 雖然 AMP 最初是為基於內容的網站開發的（您可以在許多新聞頁面的搜索結果中看到小閃電箭頭），但它在在線零售商中越來越受歡迎。
• 漸進式 Web 應用程序 (PWA) – PWA 就像通過移動瀏覽器訪問的移動應用程序。 它們複製了應用程序的許多功能，例如通過移動主屏幕上的圖標訪問和推送通知，但無需構建自定義軟件或讓用戶在手機上安裝任何東西。

兩者之間存在一些關鍵差異（以及很多爭論），但都提高了移動網站的速度。 您可以從 Google 的綜合文檔中了解 AMP 和 PWA 的實用性。

6. 殺死性能不佳的 WordPress 插件

簡短版本：插件可以作為加載時間的大量消耗。 如果您的電子商務網站託管在 WordPress 上，請對插件進行全面審查，刪除不需要的插件，並為“重”插件尋找替代解決方案。

易於使用的插件的可用性是許多零售商選擇 WooCommerce 和 Shopify 等平台的原因之一。 大多數時候，插件對零售商是有益的。 它們提高了性能，消除了對複雜開發任務的需求，而且通常是免費的。

但是，編碼錯誤、與站點的其他元素衝突或過時的插件會給站點加載時間帶來很大壓力。 同樣，大型插件通常需要發送多個文件請求來檢索它們自己的樣式表或 JavaScript。

幸運的是，對插件進行故障排除非常簡單。 通常，最簡單的方法是使用您的速度報告來查明可能與插件相關的問題，並在它們被禁用後重新測試。

或者，您可以使用像 P3 這樣的 WordPress 插件。 它將掃描您的插件並突出顯示任何性能低下的區域。
關於插件的另一個有趣的事情是，它們解決的許多問題通常可以通過對 Web 文件中的代碼進行簡單的更改來糾正。 過度使用插件是缺乏開發人員知識的明確標誌。 如果您經常陷入使用笨重插件解決相對較小問題的陷阱，那麼您可能會對您的網站速度造成很大的不公平。

7. 使用內容分發網絡

簡短版本： CDN（內容分發/交付網絡）訂閱成本低且易於實施。

CDN 已經被提及，因為許多提供商還提供自動縮小的選項，但這裡值得再次提及它們，因為它們提供了超越自動縮小的額外好處。

CDN 減輕了跨地理距離傳輸數據的負面影響。 來源

CDN 背後的想法非常聰明。 CDN 是一個全球服務器網絡，用於存儲您網站的緩存版本。 這為不同地理位置的訪問者提供了對您網站的更快訪問。 每當訪問者通過瀏覽器向您的網站發出請求時，就會聯繫最近的存儲您網站副本的服務器。

使用 CDN 還可以幫助您控制帶寬成本（如果您付費）並處理流量高峰。

8. 優化您的服務器響應時間

簡短版本：雖然您無法更改糟糕的服務器，但您可以優化性能良好的服務器。 專注於清理您的數據庫，為您的 CMS 選擇正確的設置，並選擇一個快速的 DNS 提供商。

第一個字節的時間 (TTFB) 是衡量瀏覽器從服務器接收第一個字節信息所花費的時間。 服務器請求基本上由三個部分組成，每個部分都表示一個潛在的優化區域：發送請求所需的時間、服務器處理請求所需的時間以及將請求的信息發送到瀏覽器。

您可以使用 WebPageTest 檢查第一個字節的時間。 它應該在 200 毫秒以下。

使用 CDN 是改進第一和第三階段的最佳方法之一，因為網絡將縮短服務器與訪問者瀏覽器之間的距離。

這是我們在這里關注的第二個領域。 Optimizing server speed is a massive topic that's well beyond the scope of this article, but there are a handful of optimization tweaks that can have a significant effect on server processing speed.

Here's a quick checklist for ensuring good server response time:

• Configure your CMS (content management system) for optimal speed – Your CMS is responsible for the management and handling of your content. Check if there are any settings specific to your CMS that can be disabled or enabled to boost response time. On WordPress, for example, you should ensure you have the latest PHP version installed and limit any processes that consume CPU (server resources).
• Clean up your database – Whenever a browser requests a dynamic page, your server needs to query a database to retrieve information and “build” that page. Poorly-optimized databases can cause this process to take longer than it should. Server-side caching, which stores a copy of your pages without the need to consult a database, can be a great way to overcome this problem.
• Consider a premium DNS (domain name system) lookup service – The DNS turns your domain name into an IP address. Your address is stored with your DNS provider, who needs to be consulted to provide the exact IP that maps to your domain. Opting for a DNS provider with faster lookup functionality can shave milliseconds off your load time. And every millisecond counts. Use this service to check your DNS speed.

Remember to evaluate all of these changes in the context of your TTFB. Generally speaking, server-side changes can be quite technical, so it's good practice to hire an experienced optimization developer to ensure that no mistakes are made. It's also usually easier to implement server changes with a dedicated hosting package, as access to certain functionality may be limited on shared and VPS hosting.

9. Use Compression Wherever Possible

Short Version: Gzip enables you to compress files before they're sent to a visitor's browser. It's an easy server-side function to turn on and can cut file sizes significantly (leading to faster transfer).

Along with images, you can also compress other files to increase transfer speed. You can use gzip functionality to compress CSS, HTML, and JavaScript files that are larger than 150 bytes.

So how exactly does it work?

Whenever your server sends files to a visitor's browser, the size of these files make a big difference to the amount of time it takes to process them. Gzip is a software application that compresses your files (by up to 70%) before they are sent. Because the files are smaller, they are delivered to the browser much more quickly.

To take advantage of gzip, you simply need to enable it on your server, either by adding a few lines of code to your .htaccess file or through the control panel (for IIS servers).

10. Load Files Asynchronously Wherever Possible

Short Version: Asynchronous loading is far faster than synchronous loading. Enable it through your CMS (content management system).

Synchronous loading occurs when files load consecutively, one after the other. Asynchronous loading is when files load together.

During an asynchronous load, multiple files are loaded at the same time. 來源
Because browsers process files in a hierarchical fashion – loading the first page elements first – synchronous loading can significantly increase the amount of time it takes to achieve full page load. Asynchronous loading allows the browser to load multiple elements in conjunction without waiting for the previous load to complete.

It should be possible to change settings that determine synchronous vs asynchronous loading through your CMS software. If you are using WordPress, there are several plugins you can use.

11. Reduce Redirects

Short Version: By eliminating redirects, you can cut seconds off your site speed. Remember that each redirect requires a separate request to be sent to the server.

Redirects are enemy number one when it comes to site speed. Well, maybe not number one. But they should be pretty high on your kill list.

Whenever one of your pages redirects to another URL, your visitor has to wait for the server to respond all over again.

Often, numerous redirects occur in response to a single request, especially when desktop pages redirect to mobile pages. All of this adds up to make overall page load time much slower.

Use a tool like Screaming Frog to check for any redirects. Then go through all the flagged pages and see if you can get rid of any.

Don't worry too much about loss of search rankings (one of the main reasons webmasters keep redirects) as your page will likely replace the redirect link in the results sooner rather than later.

In particular, be very wary of “redirect chains”. These are sequences of redirects between more than two pages. If you have to keep redirects, break up the chain by ensuring that each individual redirect points to the main page.

Tools to Help Boost Your Site Speed

Here's a quick rundown of the tools you need to help with implementation:

Google PageSpeed Insights – Already covered in detail above, this tool is hands-down the best for testing and optimizing your site.

Pingdom and GTmetrix – Both of these page speed tools offer additional information to Google PageSpeed insights, in particular geographical response times. They are useful for building a complete picture of your site speed problems.

WebPageTest – A simple tool to test your TTFB.

DNSPerf – A good tool for testing the speed of your DNS provider.

Google Test My Site – You can also use Google Test My Site to generate a broader report about your mobile performance, which includes information about site speed. It's a good complementary tool for use in conjunction with PageSpeed Insights.

Google Analytics – At all stages of the optimization process, you should be linking changes to specific and measurable outcomes. Google Analytics will enable you to track how traffic, engagement and conversions are affected by speed optimization.

Image Compression Tools – For image editing, you should aim to keep as much control as possible. Photoshop and GIMP (which is free) are two feature-rich image-editing apps that will allow you to compress images exactly as you wish.

CSS Sprite Tools – There are many free tools for creating CSS sprites (compiled images) from Toptal, Spritegen, and Sprite Cow.

Content Delivery Networks (CDNs) – There are many fantastic CDNs that come with a range of additional features. Check out CloudFlare, Amazon AWS, and Google Cloud CDN.

Minify Tools – Minification is best done through a CDN, which automates the entire process. Remember, if you do decide to minify your code manually, you will need to maintain two separate development areas. Try out Minifier and JSCompress.

Ready to improve your ecommerce site speed?

Improving your site's speed is a big job. 但這是值得的。 A fast-loading site provides your customers and potential customers with a positive experience that is likely to keep them returning to purchase again and again.

But remember one crucial point. It's vital to take a consistent approach. You should be monitoring and optimizing regularly. For optimal results, speed testing and optimization need to be conducted regularly (as with most things when it comes to ecommerce optimization).

Ideally, site speed testing should be built into your broader optimization strategy, conducted on all new and modified pages, and periodically reviewed across your site.

Now, time to head over to PageSpeed Insights.

Download Your Free Optimization Checklist

Site speed optimization is only one small part of ecommerce optimization. To ensure that all your optimization boxes are ticked, we've written the most comprehensive ecommerce optimization checklist on the web. Or probably anywhere, for that matter.

Oh, and it's free! Click here to download it now and gain a vital edge over your competitors.