市集之聲
已發表: 2024-02-14任何在重大節日前一天去雜貨店購物的人都知道繞圈尋找停車位並努力爭取其他 50 個人想要的物品的痛苦。 任何人都不想在自己的電子商務商店中複製這種體驗，但如果您不努力提高網站效能，您可能會這樣做。
好吧，好吧，也許我們有點誇張了。 沒有什麼比在商店音響系統中響起你最不喜歡的聖誕歌曲時試圖找到一個不太像樣的土豆更糟糕的了。 然而，我們確實知道顧客喜歡網上購物所提供的便利。 近 70% 的消費者將網站速度作為他們從線上零售商購買的意願的考慮因素。 大多數線上購物者期望頁面加載時間為 3 秒或更短。
如果您最近沒有對您的網站進行效能檢查，那麼現在就已經過去了。 以下是評估您目前表現的方法，以及任何人都可以採取的一些步驟來優化電子商務網站以獲得快速的購物體驗。
章節：
- 為什麼網站效能很重要
- 7個主要網站效能指標
- 如何衡量您的網站效能
- 如何提高電子商務網站的效能
- 網站效能就是對速度的需求
為什麼網站效能很重要
如果您沒有達到 3 秒加載標記，這真的很重要嗎？ 是的，它確實。 未能優先考慮網站加載速度會降低用戶體驗的質量，這在很多方面都是不好的。
首先也是最明顯的，更長的載入時間意味著更高的跳出率。 即使用戶在最初的幾個緩慢的頁面加載中堅持下來，也可能在購買之前放棄您的網站。
較低的初始轉換率可能會伴隨較低的整體忠誠度。 那些記得自己購物體驗不佳的客戶不太可能再次嘗試，而且他們也不想點擊將他們引導至您網站的連結。
糟糕的網站效能也會影響您的 Google SERP 排名。 由於搜尋引擎的演算法優先考慮使用者體驗，載入速度慢的頁面在搜尋結果中會被下推。 較小的媒體爭奪注意力可能會輸給更快的競爭對手。
7個主要網站效能指標
頁面載入時間不是獨立的網站效能指標。 這是一項綜合了多個指標的總體評估。 其中四個指標是 Google 的核心網路生命力：
- 最大內容繪製測量用戶可以在「首屏」（即無需向下滾動）看到的最大頁面元素的載入速度
- 與 Next Paint 的互動衡量頁面對互動的反應能力，例如點擊「加入購物車」按鈕或在表單中輸入訊息
- 首次輸入延遲測量使用者與您的網站互動（例如，點擊「加入購物車」按鈕）和瀏覽器開始處理該請求之間的時間間隔
- 累積佈局偏移測量頁面載入時頁面內容移動的頻率
谷歌認為這些方面最重要，因為它們對使用者體驗影響最大。 但是，還有其他四個指標也可以捕捉到使用者體驗的重要部分：
- 首字節時間衡量您的 DNS 提供者在收到請求後開始交付網站內容的速度
- 總阻塞時間衡量網頁載入到使用者可以與其互動所需的時間（因為正在載入頁面的瀏覽器無法處理互動）
- First Contentful Paint衡量網站第一個內容渲染所需的時間
如果您想深入了解這些指標中的任何一個，Google 的 web.dev 網站會詳細解釋每個指標的重要性以及如何衡量它們。 或者，您可以繼續閱讀我們討論衡量您網站的表現。
如何衡量您的網站效能
使用 Google 的免費 PageSpeed Insights 可以輕鬆衡量網站的效能。 該工具根據上面列出的指標評估您的網站，並將其排名為良好、需要改進或較差。 您還將獲得有關網站效能、可訪問性、最佳實踐使用和 SEO 的註釋。
有一個選項可以查看您的網站在行動裝置和桌面裝置上的表現以及幫助您優化網站的提示。 在Google的網路生態系統中，你可以以低廉的生活成本得到很多幫助，讓我們面對現實吧——這已經發生了。
當您查看報告時，您可能會注意到總阻塞時間被排除在「核心網路生命評估」方塊中。 向下捲動至「效能」框，然後查看「指標」表以查看結果。
PageSpeed Insights 透過顏色編碼圖形和個人化提示，讓您輕鬆了解您的網站為何獲得如此高的排名。 現在就開始執行測試 - 只需幾秒鐘 - 這樣您就可以獲得網站效能的基線，並了解哪些地方還有改進的空間。
如何提高電子商務網站的效能
如果您還在這裡，我們會假設您的核心網路生命評估顯示您還有一些工作要做。 這並沒有什麼可恥的。 連Google的web.dev網站都沒有通過評估！ 以下是我們的最佳提示，可協助您提高電子商務網站的效能以及實現此目標所需的工具。
1. 減少 HTTP 請求
HTTP 請求存在於載入網頁的核心。 您無需了解此處的技術細節 - 只需了解瀏覽器必須發出這些請求即可加載頁面上的 CSS 文件、腳本、圖像和其他內容。 每個請求都要求瀏覽器向您的網站主機發送訊息，然後網站主機必須以適當的內容回應。
HTTP 請求越多，完成所有請求所需的時間就越長。 想像一下，如果您去一家餐館，首先要了水，然後當服務員回來時，點了一杯蘇打水。 當他們送來蘇打水時，你要了一份開胃菜。 最後，開胃菜上桌後，您就決定了主菜。 無論服務員的速度有多快，你都需要很長時間才能吃完飯。
刪除不必要的 HTTP 請求，讓您的（Web）伺服器休息一下。 如果您不需要腳本或 CSS 文件，請不要在頁面標題中引用它。 您也可以嘗試減少多媒體內容以提高頁面載入速度。
2. 使用 HTTP/2
並非所有 HTTP 請求都是一樣的。 HTTP/2 是 2015 年首次推出的標準，具有可協助您更快載入網頁的功能。 首先，它允許開發人員確定首先加載哪些元素的優先級，因此您可以告訴瀏覽器在較大的腳本之前請求輕資源。 它還可以同時服務多個資源。 回到我們餐廳的比喻，HTTP/2 允許您一次發出整個訂單，以便服務員可以更快地為您提供食物。
KeyCDN 有免費的 HTTP/2 測試來確定您的網站是否支援 HTTP/2 協定。 或者，如果您想仔細查看，請開啟瀏覽器的開發人員工具，導覽至網路選項卡，然後尋找「協定」列。 （您可能必須右鍵單擊列列表並新增協議。）
HTTP/2 支援由您的網站主機決定，因此如果您需要啟用該協議，可以求助於它們。 每個提供者的流程都不同。
3. 消除不必要的重定向
許多公司在網站檢修期間採用重定向來繞過連結失效。 但是，每次將使用者重新導向到新頁面時，都會迫使他們等待另一個頁面載入。 特別是導致另一個重定向的重定向 - 不，謝謝！ 當使用者到達實際的 URL 時，他們已經準備好關閉您的頁面。
重定向有隨著時間的推移而累積的習慣。 這意味著您需要定期審核它們； 在重新設計或重新建立網站後這樣做尤其重要。
Screaming Frog SEO Spider 可以幫助您檢查整個網站的重新導向，甚至為您偵測重新導向鍊和循環。 您也可以使用 Ahrefs SEO 工具列逐頁檢查，但我們不建議這樣做。 除非你確實有某種義務想要擺脫。
4. 限制外部腳本
大多數開發人員使用第三方腳本來添加他們沒有資源進行內部編碼的功能。 不過，就頁面速度而言，合併外部腳本總是存在風險的。 您無法控製程式碼，因此如果腳本載入緩慢，您將無法執行任何操作。
緩慢加載的腳本會使頁面加載時間更長，並可能導致內容跳躍等問題（透過累積佈局移位指標來衡量）。
檢查每個頁面以確保沒有載入不必要的腳本。 例如，您可能在整個網站上啟用了評論功能，但您不需要在用於瀏覽的頁面上包含該腳本。 您也可以問自己是否真的需要該模式來收集客戶的電子郵件，或者它是否會拒絕比吸引的買家更多的買家。
更多的花哨並不總是更好。 一個具有良好用戶體驗的簡單網站可以擊敗過度設計的商店。
5. 啟用延遲（非同步）載入
當瀏覽器呈現網站時，它的預設設定是按順序處理每個請求，僅在完成當前任務後才轉到下一個命令。 大型腳本會減慢整個過程，因為瀏覽器必須載入整個檔案才能繼續渲染其餘內容。
透過指示瀏覽器非同步載入腳本（即在繼續渲染網頁的同時）來避免這種延遲。 只需將 async 屬性新增至您的腳本標記（您的程式碼將如下所示：<script src=”my_script.js” async></script>）。
一些專家建議在正文內容底部附近添加 <script> 標記，因為較舊的瀏覽器可能無法讀取 async 屬性，但沒有必要這樣做。 您很難在野外找到無法處理非同步標記的瀏覽器。
6. 使用行動優先設計
網站效能優化需要包括行動優先的思維。 目前，智慧型手機是近五分之四的電子商務網站流量和三分之二的電子商務購買量的來源。 不幸的是，行動網路仍然是一個障礙。 大多數網站在行動裝置上的載入時間要長得多。 如果網站載入時間超過 3 秒，超過 50% 的行動訪客會準備好跳槽，電子商務零售商可能會失去大量業務。
如今幾乎每個發布的網站都是響應式的，但是為桌面編碼然後針對行動裝置進行最佳化的設計師可能會按照錯誤的順序進行。 使用手機模擬器進行小螢幕設計將不斷增長的受眾的需求放在首位。
另外，這很簡單 - Google Chrome 的開發工具可讓您進入「裝置模式」以查看您的網站在較小螢幕上的外觀。
手機設計還要求您充分利用有限的螢幕空間，這可能意味著您選擇較少的裝飾元素，這些元素會減慢頁面速度。 您還需要簡化導航和交互，而不是尋求需要外部腳本和插件的華而不實或獨特的體驗。
如果您正在使用現有站點，那麼您現在可能無法實施此實踐。 下次重新設計時請記住這一點。
7. 使用 gzip 壓縮基於文字的文件
HTML 和 CSS 檔案的載入可能看起來不太麻煩，但當您以毫秒為單位計算時，每個位元組都很重要。 壓縮可以減小基於文字的檔案的大小，以便它們可以更快地從伺服器傳輸到客戶的瀏覽器。 Gzip 是最常見的壓縮框架，但 Brotli 和 Deflate 也可以很好地加速您的網站。
這是在託管端設定的另一個功能。 大多數主機預設啟用它，但最好使用免費的 HTTP 壓縮測試來檢查您的主機。 如果您發現您的內容未經過壓縮，則需要聯絡您的主機提供者。
8. 縮小 CSS、JavaScript 和 HTML 文件
像 Gzip 這樣的壓縮框架並不是唯一的位元組節省器。 您也可以透過刪除任何不是程式碼關鍵部分的內容（例如註釋、格式或冗長的變數名稱）來縮小文字檔案。 其中許多元素對人類開發人員很有幫助，但網頁瀏覽器不需要它們來直接顯示您的網頁。
無需自行檢查並刪除註釋以及多餘的空格和製表符。 Minifier.org 提供了一個可以處理 CSS 和 JavaScript 的免費工具。 Google 的 web.dev 推薦這個免費的 HTML 壓縮器。
如果您正在尋找可以大規模縮小的工具，Google 的 PageSpeed 模組可以與 Apache 或 Nginx Web 伺服器搭配使用，並自動縮小您的檔案。 但是，安裝像它或 CSSNano 這樣的工具可能需要您致電 IT。
9. 優化圖像和視頻
多媒體檔案通常會因為太大而降低網站效能。 嚴重依賴圖像和影片的電子商務商家必須努力優化這些文件，以減輕訪客網路連線的負擔。
優化圖像最簡單的部分是調整它們的大小。 任何檔案都不應超過 20 兆位元組 (MB) — 但實際上，只有您的英雄圖像才應該那麼大。 Shopify 建議商家盡可能將圖片保留在 500 KB 左右，儘管他們允許某些網站需要最大 2 MB 的檔案大小。 您可能必須壓縮圖像才能實現這些目標。 值得慶幸的是，有許多免費的圖片壓縮工具可供您使用。
縮小檔案大小後，請確保使用響應式設計原則，以使用戶能夠快速地從較小的裝置載入您的網站。 由 Mozilla 運行的 MDN Web Docs 有一個很好的響應式圖像教程，如果您是該主題的新手，可以遵循。
10. 利用瀏覽器快取
Web 瀏覽器可以將檔案儲存在使用者的電腦上，從而加快重複訪客的載入時間。 瀏覽器可以從電腦的本機記憶體中提取快取的資源，而不是為每個檔案聯繫伺服器。
對於大多數電子商務商家來說，快取是一個出色的解決方案，因為您的資產保持相當靜態。 如果您對網站進行重大檢修或替換產品圖片，您需要確保瀏覽器有重新下載新內容並取代快取資源的說明。 然而，對於大多數線上零售商來說，這種情況很少見，因此設定快取是最佳選擇。
您的網站主機再次是負責您的快取設定的一方。 您需要找到其文件並按照說明啟用本機快取並設定到期日期（指示瀏覽器應多久刷新您網站的快取資源）。
11. 使用內容傳遞網路 (CDN)
瀏覽器快取僅幫助以前曾造訪過您網站的受眾。 內容交付網路（CDN）將資產盡可能靠近每個訪客，以減少載入時間。
CDN 不依賴本機電腦來儲存資產。 他們只是將您的資產分發到不同位置的伺服器網路。 這意味著您可以在弗吉尼亞州擁有一台伺服器，在加利福尼亞州擁有一台伺服器，在伊利諾伊州擁有一台伺服器，等等，而不是在維吉尼亞州擁有一台伺服器來回答所有請求。 為國際受眾提供服務的公司可以與國際 CDN 合作，因此他們在多個國家、地區和大洲擁有伺服器。
每當瀏覽器發送載入您網站的請求時，該請求就會路由到地理位置上距離使用者較近的伺服器。 這聽起來可能不是一個巨大的節省時間的方法，但由於頁面載入速度是在很小的範圍內測量的，CDN 會產生顯著的差異。
12. 定期審核您的插件
對於大多數 Web 開發人員來說，外掛程式、附加元件和擴充功能可以節省大量時間。 但是，就像外部腳本一樣，臃腫的插件會降低頁面速度。 透過重新造訪您的插件庫以查看是否有您不再使用的插件來提高您的網站效能。
有時，您需要所有插件，但頁面載入速度仍然太慢。 既然如此，是時候找出罪魁禍首了。 將您的網站複製到暫存環境中，停用所有插件，並測試您的網站載入速度。 然後，一次啟用一個插件，以確定是否有一個插件正在降低您的效能指標。 （確保啟用、測試然後停用每個插件，這樣您就不會意外地測量累積效應。）
值得慶幸的是，有這麼多插件，您可能能夠找到任何緩慢工具的替代品。
另一種選擇是尋找已針對速度進行最佳化的插件。 例如，我們的評級和評論顯示技術旨在讓您的網站快速運行，我們的開發人員分享了他們為實現這項承諾所採取的步驟。 尋找以這種方式建構的工具（使用縮小和減少腳本檔案、快取和延遲載入等最佳實踐的工具），讓您的審核變得輕而易舉。
13. 刪除不必要的彈出窗口
是的，我們會這麼說。 彈出視窗非常不受歡迎。 它們會導致糟糕的體驗，尤其是在行動裝置上。 即使您認為您的彈出視窗做得很有品味並且很有幫助，但網路使用者整天都會面對大量的模式、疊加層和聊天小部件。 每個人都有彈出式視窗疲勞，如果你做出貢獻，你就會削弱消費者的信任。
大多數彈出視窗都會呼叫外部腳本並引用圖像和字體等資源，瀏覽器必須載入所有這些資源。 有條件出現的模態必須在觸發之前收集受眾數據，這也需要時間。 如果您的總阻塞時間很高，使用者可能無法在網站其餘部分呈現時關閉這些元素。 即使沒有實際的速度減慢，這種延遲也會影響用戶對網站速度的看法。
不過，這種放緩是真實存在的，因為幾乎所有人都不喜歡這些工具。 從您的網站中刪除它們是雙贏的。
14. 選擇最快的服務
當客戶點擊連結或輸入 URL 時，他們會告訴瀏覽器查詢 DNS 服務以將他們帶到目標網站。 該 DNS 服務將瀏覽器路由到您網站的 IP 位址。 然後，他們的瀏覽器開始讀取您的 HTML 檔案並向您的伺服器或 CDN 請求資源，以便它可以呈現您設計的網站。
許多服務匯集在一起才能讓您的網站出現。 如果其中任何一個速度慢，您的頁面速度都會受到負面影響。 這就是為什麼最便宜的選擇不一定是您的技術基礎架構的最佳選擇。
例如，許多基礎網站託管計劃是共享的。 這意味著其他網站使用與您相同的伺服器，因此其中一個網站的流量激增可能會減慢您的載入時間。 VPS 託管（對於成長中的網站）或專用網站伺服器（對於那些負擔得起的人）將返回更好的結果。
您還希望確保處理 DNS 託管的網域註冊商表現出色。 DNSPerf 會持續記錄 DNS 效能，以便您可以親自了解各個提供者的表現如何。
當然，速度不僅對高層很重要。 我們討論了尋找輕量級且簡化的插件。 您還需要考慮安全軟體和其他後端工具等服務。 儘管客戶不會直接與他們互動，但他們仍然會影響您的電子商務網站的表現。
15. 監控網站運營
每隔一段時間檢查一下您的網站效能，看看是否存在大問題是一個明智的主意。 持續監控您的網站，以便在問題出現時立即意識到這一點，這樣就更明智了。
您可以投資收集使用者體驗數據的工具，以展示您的網站在現實世界中的表現。 由於許多購物者會透過與您自己不同的設定來存取您，因此真實的用戶監控提供了一個全新的視角。
其他工具偽裝成人類訪客，使用一系列腳本來導航您的網站並測試其效能。 像這樣的綜合監控設定對於希望從受控測試中收集資料的團隊來說更有用。 如果您正在優化網站，綜合監控將幫助您發現真正產生影響的變更。 這些系統還可以運行預定的測試，目的是在客戶遇到重大問題之前發現這些問題。
有很多工具可以執行這兩項工作（以及更多）：
- Site24x7 為您執行綜合和真實使用者監控
- LogRocket 監控使用者並識別使用者通常遇到的錯誤和網站交互
- New Relic 是一個端到端綜合監控系統，幾乎與所有基礎設施相集成
無論您使用哪種工具，請確保配置警報以在出現問題時通知您。 您越快解決問題，讓您失望的客戶就越少。
網站效能就是對速度的需求
隨著網路和行動連線變得更快、更普遍，消費者標準將持續提高。 提供快速、便利的體驗是基本期望。 能夠弄清楚如何在行動裝置上脫穎而出並將加載速度降低到一秒或更短的公司將有機會佔領更多的市場份額。
您提供的客戶體驗與您的轉換率和保留率直接相關，而您網站的表現也與該客戶體驗直接相關。 網站優化不是一個可以等到未雨綢繆的項目。 這是吸引客戶造訪您的網站並增加銷售額的重要組成部分。
提高網站速度並不是吸引更多客戶的唯一方法。 查看這些增加自然流量的方法，以保持您在 SERP 上的動力。
