如何優化 Web 性能和底線

耐心不是網站訪問者和在線購物者的美德。 在您的網站上保留或失去訪問者時，每一分之一秒都很重要。

根據 Kissmetrics 的說法，加載時間是導致頁面放棄的主要因素。 因為一般的網絡訪問者對加載時間過長的頁面沒有耐心，所以放棄率隨著加載時間的每一秒而增加。 該博客指出，近 40% 的用戶會在 10 秒後放棄一個頁面。 移動互聯網用戶可能對這個問題感到最沮喪——73% 的人表示他們遇到了一個加載速度太慢的網站。

頁面加載問題直接影響網站訪問者的購物行為。 Kissmetrics 還指出，對網站性能不滿意的購物者中有 79% 不太可能再次從同一網站購買。 近一半的消費者希望頁面在 2 秒或更短的時間內加載，而 1 秒的延遲將使客戶滿意度降低 16%。

這些延誤的後果轉化為真金白銀。 電子商務巨頭亞馬遜透露，僅 1 秒的頁面加載放緩將使其銷售收入損失 16 億美元。 同樣，谷歌指出，其搜索結果僅下降十分之四秒就會導致每天損失 800 萬次搜索，這意味著在線廣告減少了數百萬次。

觸及問題的核心

影響加載時間的最大因素是圖像、視頻和圖形。 今天的網站包含更多的視覺效果和更少的文字來吸引訪問者。 根據 HTTP Archive 的數據，一個網站近 64% 的平均權重是圖片，而視頻則佔另外 8%。

由於這些類型的媒體佔網站規模的近四分之三，因此更有效地管理網站上的圖像和視頻以提高性能和轉化率非常重要。 讓我們看看您可以採取哪些措施來減少圖像和視頻對您網站性能的影響。

使用更高效的現代圖像格式

谷歌已經在 Chrome 瀏覽器中增加了對其 WebP 圖像格式的支持，微軟也在其大多數 Internet Explorer 和 Edge 瀏覽器中為 JPEG-XR 做了同樣的事情。 但是許多開發人員仍然沒有接受這些變化，堅持使用相同的 JPG 和 PNG 格式，而不是利用現代格式如何優化他們的網站。

理想情況下，您應該在適當的時候將圖像轉換為 WebP 和 JPEG-XR，並調整壓縮質量以平衡兩種格式。 檢測訪問每個圖像的特定瀏覽器並為相應瀏覽器提供優化的圖像版本也很重要。 這樣做將使您能夠確保用戶在視覺質量和文件大小優化方面獲得盡可能好的圖像，而不會降低您的網站速度。

消除浪費的瀏覽器端調整大小

開發人員經常使用瀏覽器端圖像大小調整作為快捷方式，而不是在服務器端調整圖像大小。 雖然最終結果在現代瀏覽器上看起來完全一樣，但對帶寬的影響卻大不相同。 通過瀏覽器端調整大小，網站訪問者會浪費寶貴的時間下載不必要的大圖像，並且浪費帶寬將其傳送給他們。

對於較舊的瀏覽器，問題更加明顯，因為它們的大小調整算法通常低於標準。 您需要確保您的圖像完全符合其所需的網站尺寸。 為同一圖像創建不同的縮略圖而不是提供大圖像並依靠瀏覽器調整大小是非常值得的。 有一些可用的工具可以幫助解決這個問題，例如像 ImageMagick 這樣的開源圖像調整器或像 Cloudinary 這樣的基於雲的解決方案。

使用正確的圖像文件類型

JPEG、PNG 和 GIF 是當今網站上最常用的文件格式，但每一種都有非常不同的作用。 使用錯誤的格式會浪費訪問者的時間和自己的金錢。 一個常見的錯誤是使用 PNG 來傳遞照片。 有一個普遍的誤解，即 PNG 作為無損格式，會為照片產生盡可能高的複制效果。

雖然這通常是正確的，但這也是一種非常不必要的優化。 重要的是要記住應該為顯示的內容使用什麼圖像格式。 PNG 應該用於計算機生成的圖像（圖表、徽標等）或當您需要圖像透明時（圖像疊加）； 顯示拍攝的照片時為 JPEG； 和需要動畫時的 GIF（Ajax 加載動畫等）。

不要在所有交付媒體中使用單一圖像尺寸

您的網站正在許多不同的設備上查看，尤其是智能手機、平板電腦和智能手錶已成為消費者的首選。 開發人員通常會在所有設備分辨率上提供相同的圖像，並使用客戶端調整圖像大小。 這些圖像可能看起來很棒，但訪問者會浪費時間將不必要的大圖像加載到他們的設備上，並且您需要為多餘的帶寬使用付費。

這對 3G 用戶和漫遊用戶特別不公平，他們需要支付大量額外費用來下載無用的超高分辨率圖像。 為避免這些問題，您應該使用他們的用戶代理識別訪問者的移動設備和解決方案。 使用正確的分辨率，從您的服務器中檢索最合適的圖像。 這要求您為每個原始圖像提供一組縮略圖。 有一些優秀的 Javascript 包可以自動執行這個過程。

利用響應式設計

訪問者用來訪問您網站的每台設備都有不同的分辨率。 網站的標記必須適應自身，使其在所有不同的設備上以及在各種分辨率、像素密度和移動設備方向上看起來都很完美。 管理、操作和交付圖像是 Web 開發人員面臨的響應式設計的主要挑戰之一。

由於這些挑戰，許多網站都使用可能需要的最高分辨率圖像構建，並根據斷點簡單地縮小客戶端。 此過程效率低下並且會損害性能。 但也有一些選項，例如開源工具 Responsive Breakpoints，它可以幫助您生成所需的所有圖像大小，以及適當的 HTML 代碼。

利用內容交付網絡 (CDN)

CDNS 通常在全球範圍內戰略性地部署服務器，以縮短內容往返時間。 CDN 允許更快地向用戶提供圖像並降低崩潰的可能性，增強 SEO 性能並改善用戶體驗。 在選擇 CDN 時，您需要考慮其全球覆蓋水平、緩存率、在邊緣運行邏輯操作的能力、平均響應時間和其他指標，例如平均失效時間。

變化的影響

通過採用這些最佳實踐，您可以真正改變用戶體驗，鼓勵訪問者停留更長時間、瀏覽更多、參與和購買。 考慮這些公司的結果：

Apartment List 是一種幫助個人搜索出租房屋的在線資源，它發現自己處理各種不同的圖像格式和分辨率，因為它從其網站上的各個公寓社區獲取圖像數據饋送。 通過將所有這些圖像轉換為在各種尺寸的移動設備和台式機上呈現的最佳圖像，以及利用響應式設計技術，該公司的轉化率提高了近 20%。

KartRocket 是一個基於 SaaS 的電子商務平台，提供透明且完整的電子商務生態系統，可幫助中小企業快速輕鬆地創建在線商店，需要找到一種方法來確保圖像質量，同時不影響其加載時間或網站性能。客戶。 它利用工具來動態控製圖像，以便針對小縮略圖、大橫幅圖像和主要產品圖像進行優化。 這種方法使 KartRocket 的圖像加載響應時間提高了 100 倍。

底線

當時間就是金錢時，網站所有者不能不採取所有必要措施來改善訪問者的體驗。 就消費者而言，即使是加載頁面的幾分之一秒延遲也可能轉化為收入和信心的損失。

考慮到圖像和視頻是大多數網站上最大的帶寬消耗者，您需要認真檢查您的網頁設計和圖像格式，然後採取必要的步驟來確保媒體得到優化，以便您的網站 - 更不用說您的收入和客戶的看法——不要因此而受苦。