如何針對頁面速度（和 Google）優化圖像

想知道如何針對頁面速度和 Google 優化圖像？ 在本文中，您將學習提高性能和解決 Page Speed Insights (PSI) 圖像警告的最佳圖像優化技術。

谷歌是大多數企業的重要收入來源，因此獲得良好的排名至關重要。 頁面速度是算法中最重要的 KPI 之一，您將看到圖像優化技術如何成為提高 WordPress 網站速度的絕佳方式。

讓我們潛入水中。

為什麼圖像對於提高頁面速度至關重要

據谷歌稱，優化圖像以提高頁面速度對於排名和用戶體驗非常重要。 事實上，您需要為網絡準備圖像。

您是否知道大量未優化的圖像通常是網站運行緩慢的罪魁禍首？ 以下是圖像如何影響性能：

• 整體頁面速度 -大圖像會使您的網站變慢，並使希望盡快訪問信息的訪問者感到不安。 如下圖所示，圖片是網頁中的主要資源：

圖片是頁面權重的重要來源，它們也構成了每頁最大的 HTTP 請求數：

當訪問者登陸您的網站時，您的瀏覽器必須請求並下載一些文件以呈現內容。 對每個文件都向服務器發出 HTTP 請求：

您擁有的資源越多，您的瀏覽器需要發出的請求就越多。 優化您的圖像並使其更小將減少 HTTP 請求的大小，從而加快加載站點。

• 轉換——優化圖片以提高頁面速度對於您的業務收入至關重要。 您需要一個快速加載的網站，並帶有淺色圖像，以使您的訪問者滿意，否則潛在客戶甚至在瀏覽之前就會離開。 根據谷歌的說法，如果頁面加載時間超過 5 秒，那麼跳出的概率會增加 90%！

我們已經看到圖像如何在網頁性能中發揮重要作用。 讓我們來看看未經優化的圖像對 Google PageSpeed Insights 報告的影響。

圖片對 Google PageSpeed Insights 有何影響？

PageSpeed Insights 是由 Lighthouse 提供支持的工具，可分析網頁上的內容，包括圖像。 審核完成後，PageSpeed 會給出診斷和建議，以優化圖像並使該頁面更快。

受圖像影響的 PageSpeed 指標有兩個：最大內容繪製 (LCP)，它是 Google 核心 Web Vitals，以及第一個內容繪製 (FCP)。

更重要的是，與圖片優化相關的常見PageSpeed推薦有五種，分別是：

1. 以下一代格式提供圖像

Google 建議將圖像轉換為 WebP 或 AVIF，因為這些格式提供比 JPEG 或 PNG 更好的壓縮。 壓縮圖像意味著更快的下載、更少的數據消耗和更快的站點。

在下面的示例中，通過將 JPEG 圖像轉換為 webP，我可以節省近 135 KB：

2. 高效編碼圖像

有效地編碼圖像意味著減小圖像文件大小，同時仍保持高質量。 如果潛在節省為 4KB 或更大，Google 會將圖像標記為可優化。

3.推遲離屏圖像

優化圖像以提高性能的另一種方法是延遲屏幕外圖像並將延遲加載腳本應用於首屏下的圖像（而不是訪問者的屏幕上）。 目標是首先確定關鍵資源的優先級，然後再加載“隱藏”的圖像。

4.適當大小的圖像

Google 的另一項建議是適當調整圖片大小，尤其是在移動設備上提供圖片時（響應式設計）。 在下圖中，我可以通過為移動設備調整圖像大小和優化圖像來節省 50 KB。

5. 使用有效的緩存策略服務靜態資產

HTTP 緩存可以在重複訪問您的網站時加快頁面加載時間。 Google 會標記所有未緩存的靜態資源：

在下一節中，我們將討論如何處理每個圖像 PageSpeed Insights 項目以及如何提高頁面速度。

如何針對 Google PageSpeed 和性能優化圖像

要為 Google 優化圖像並提高頁面速度，您可以實施以下 8 種性能技術：

1. 將圖像轉換為 WebP（或另一種下一代格式）
2. 壓縮圖像
3. 調整圖像大小
4. 設置圖像尺寸
5. 實現延遲加載
6. 啟用瀏覽器緩存
7. 利用 CDN
8. 盡可能使用 .SVG 圖形

讓我們回顧一下可用於 Google 推薦的每個優化的網絡工具和插件，以提高您的整體 Lighthouse 分數。

1. 將圖像轉換為 WebP（或另一種下一代格式）

為 Google 優化圖像的最有效方法之一是使用 Imagify 等 WordPress 插件將它們轉換為 WebP。 它創建圖像的 WebP 版本，從而實現更好的壓縮和優化。 Imagify 每月免費提供多達 20MB 的數據。 （查看完整的 Imagify 定價）。

您可以查看其他 WebP 轉換插件：WebP Converter for media 和 WebP Express。

如果您不想使用插件，您會發現許多免費的在線工具，例如 Convertio 或 Ezgif。 您需要為該方法執行一些額外的步驟：上傳您的圖像，在 WebP 中下載它們，然後將它們放入您的 WordPress 庫中。

2.壓縮圖像

壓縮圖像意味著顯著減小其大小以降低其存儲成本。 根據 Google 的說法，這將為您的網站帶來不錯的性能提升！

最流行的 WordPress 壓縮圖像而不損失質量的插件是：

• Imagify（具有 3 級壓縮：正常、激進和超大，可以批量壓縮圖像）

• 優品
• 壓縮 JPEG 和 PNG（小 PNG）
• 萬維網
• 短像素

閱讀我們的指南以了解有關 WordPress 的 6 個最佳圖像壓縮插件的更多信息。

您還可以使用 Photoshop 或 Lightroom 等設計軟件來壓縮圖像，但請注意質量可能會發生變化。

最後一個選擇是使用 TinyPNG 等基於 Web 的工具。

3.調整圖像大小

Google 建議適當調整圖像大小，尤其是在移動設備上。 您可以使用 Sketch、Preview 或 GIMP 等軟件來修改圖像的大小並減輕它們的重量。

注意：您也可以使用 Imagify 調整大圖像的大小。 有一個選項可以自動優化較大的圖像。

4.設置圖像尺寸

PageSpeed 建議在圖像元素上設置明確的寬度和高度。 目標是減少佈局偏移並改進 Cumulative Layout Shift (CLS) 指標，這是另一個 Core Web Vitals 指標。 它衡量內容的視覺穩定性。

要設置圖像尺寸，請確保您的“寬度”和“高度”HTML 標籤有一個值，如下圖紅色所示：

 <!-- set a 640:360 ie a 16:9 - aspect ratio --> <img src="girl.jpg" width="640" height="360" alt="girl at the beach" />

了解尺寸是否設置正確的手動方法是使用 Chrome 上的開發人員工具並檢查您的圖像：

5.實現延遲加載

延遲加載是針對 Google 和性能優化圖像的最有效方法之一。 為什麼？ 您告訴瀏覽器只下載訪問者正在查看的圖像。

要將延遲加載應用於您的圖像，您可以使用免費的 WordPress 插件，例如 WP Rocket 的 LazyLoad 或 Autoptimize。 WP Rocket 的 LazyLoad 非常簡單：

您還可以通過在圖像上添加以下標籤來手動實現延遲加載：

 <img src="image.png" loading="lazy" alt="…" width="200" height="200">

要了解有關延遲加載的更多信息，我們建議您閱讀這篇關於 WordPress 最佳延遲加載插件的文章。

6.啟用瀏覽器緩存

緩存是谷歌對頁面速度的另一項推薦，因為它可以更快地向用戶提供圖像。 瀏覽器緩存可以通過減少每頁的 HTTP 請求數來幫助減少服務器負載。

Google 建議使用 WordPress 插件來實現緩存。 最好的緩存插件之一是 WP Rocket。 它應用了 80% 的 Web 性能最佳實踐，具有簡單的界面和快速的設置。

7. 利用 CDN

使用圖片 CDN 可以顯著降低您的流量成本並提高您在 Google PageSpeed Insights 上的評分。 它優化了將圖像傳遞給訪問者的方式，無論他們身在何處。 由於這種圖像優化技術，傳輸的數據量減少了。

重要提示：從頭開始設置 CDN 可能會讓人不知所措。 您需要處理 DNS 記錄和 Cname 字段。 如果您更喜歡自動安裝，您可能想嘗試 RocketCDN。 他們為您完成繁重的工作並配置 CDN。

8. 盡可能使用 SVG 圖形

SVG 在性能方面最有價值的特性之一是可以在不損失質量的情況下縮放圖形。 SVG 代表 Scalable Vector Graphics，它基於 XML。 在幕後，這種格式是方程式和數學，使它更容易縮放，而不會影響像素。

圖像和頁面速度：案例研究

讓我們應用我們剛才提到的所有推薦技術，以便我們可以比較網頁優化前後的性能。 我們將使用 PageSpeed Insights 和 GTmetrix 進行審計。

第一列顯示任何類型優化之前的結果。 我用我的 iPhone 創建了一個包含 8 張高清圖片的網頁。

第二列顯示了實施圖像優化技術後的改進。 我在 Google PageSpeed Insights 上的結果確實得到了改善：

	圖像優化之前	圖像優化後（Imagify + WP Rocket + Rocket CDN）
總成績
Page Speed Insights 警告
頁面詳細信息：我的圖片在頁面上的總權重 圖片請求的百分比

Imagify、WPRocket 和 RocketCDN 的關鍵性能結果：

在遵循 Google 關於如何優化圖像的建議後，我們可以注意到以下改進：

• 修復了與圖像相關的 PSI 問題和警告
• 圖片總大小為 3.5 MB，現在已降至 36.8 KB
• 一半的 HTTP 請求是由圖像發出的。 優化後，他們只負責22%的請求。
• HTTP 請求從 16 下降到 9
• 我的 Core Web Vitals 現在全部處於綠色狀態
• 移動端的性能等級從 68/100 提高到 95/100
• 滿載時間為 3.9 秒，然後降至 1.2 秒
• 我的頁面大小幾乎是 4MB，現在是 91KB！

包起來

為了優化頁面速度和 Google 的圖像，我應用了以下性能協議：

• 我安裝了 Imagify，它允許我：
  • 將我的圖像轉換為 WebP
  • 調整我最大的圖像大小
  • 使用 Ultra 模式壓縮和優化我的圖像以有效地對其進行編碼

• 我激活了 RocketCDN 以讓我的圖像在全球範圍內更快地提供服務。

• 我使用 WP Rocket 來：
  • 實現緩存
  • 對我的圖像應用延遲加載
  • 優化我的 JS 和 CSS 代碼

想嘗試一下並擺脫與圖像相關的警告嗎？ 使用 Imagify 開始您的圖像優化之旅！ 在安裝插件之前，您可以開始免費使用網絡應用程序。