3圖像優化提示更快的速度和更高的排名

3圖像優化提示更快的速度和更高的排名

搜尋聖經:

有些人是視覺學習者,有些是動覺,有些是聽覺。 但我認為我們大多數人都是不耐煩的學習者。

我們要求網站立即加載,我們的問題可以直接回答。 這就是為什麼搜尋引擎Google和SOASTA 研究證實,擁有更多圖片的複雜網頁的轉化率低於圖片較少的網頁。

雖然有些網站可能會受益於“圖像密集”,但我們應該將頁面速度視為稀缺資源。 我們將這些資源用於加載大型,龐大的資源越多,其效率就越低。

通過Google重新設計的PageSpeed Insights,很多人對於以“下一代格式”提供圖像意味著什麼以及為滿足Google的擔憂而存在哪些瀏覽器支持感到困惑。

3圖像優化提示更快的速度和更高的排名

此外,許多人仍然依靠舊技術來壓縮和提供其網站上的圖像。

繼續閱讀一些實用技巧,幫助您優化圖像,以便在保持用戶體驗的同時提高頁面速度。

1.負責任地使用圖像

簡約設計通常可以提供良好的用戶體驗,因為它提供了更好的性能。 但是你需要問問自己一個圖像是否對你的設計絕對至關重要。

對於更加動態的網頁,可能很容易使圖像具有交互性,甚至是設計的焦點。

除非您是攝影師,否則您可以利用替代資源而不是圖像來改善您的用戶體驗,例如:

  • 用於交互元素的CSS3。
  • 簡單的徽標和設計的可縮放矢量圖形。
  • 嵌入式影音而不是笨重的GIF。

實際上,矢量圖像在加載到更高分辨率的設備上時傾向於保持更高的分辨率。

此外,您可以轉而使用可改善用戶體驗的Web字體,而不是在圖像中編碼文本,而搜尋引擎無法讀取。

在PageSpeed Insights工具中,您經常會發現Google建議將圖像推遲到屏幕外以改善裝載效果。 這實質上意味著在折疊下方移動圖像,因此至少用戶的初始加載速度更快。

要實現此目的,您需要優化關鍵路徑渲染。

可以採用一些方法來優化關鍵路徑呈現,例如縮小,緩存和壓縮所有頁面資源(CSS,JavaScript,HTML)。

標題和主文檔模塊的內聯CSS交付還可以為用戶提供即時加載,同時在後端加載所有未使用的CSS和資源。

此外,您可以阻止JavaScript阻止,以防止在第一次加載時加載您想要加載的資源。

雖然這很複雜,但有一些工具可以幫助WordPress。

W3 Total Cache緩存並將CDN中的每個資源從HTML一直縮減為WordPress元素。

此外,W3 Total緩存可用於優化關鍵路徑渲染,例如使用帶有“async”和“defer”的JavaScript解鎖功能以及其他可幫助改善頁面加載而無需完全刪除圖像的功能。

此工具還提供HTTP / 2功能,以進一步改善裝載。

2.自動化圖像壓縮

可能是優化圖像速度的兩種最佳方法是減小尺寸並壓縮文件。 使用合適的工具,您可以非常輕鬆地進行圖像壓縮。

如果您正在使用WordPress,您可以安裝Imagify並一鍵壓縮所有圖像。 將使用此工具壓縮添加到庫中的所有其他圖像。

這個插件甚至提供了一個激進的設置來壓縮JPG和PNG以實現大規模的速度提升。

想像一下批量壓縮工具

如果您擔心插件會降低網站速度或使用更開源的CMS,則可以使用Image Optim壓縮特定文件夾中的所有圖像。 它的拖放功能使壓縮圖像,然後將其添加到您的網站非常容易。

此外,如果您擔心壓縮CMS中的圖像並留下較大的文件大小,您還可以在Adobe Suite或Affinity Photo中嘗試壓縮。

在為不同設備調整圖像大小方面,WordPress的響應式設計可以使用’srcset’屬性為您完成。

要記住的一件重要事情是,有損壓縮可能會犧牲圖像質量。

在較大規模的壓縮下,有損壓縮將消除更大的位深度並顯著降低文件分辨率。

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

根據您的文件格式,您將不得不使用有損或無損壓縮。

傳統上,我們依賴於兩種圖像格式JPEG(有損)和PNG(無損壓縮)。

但是工具已經開始推薦新的圖像格式,特別是用於建立快速加載速度和在移動設備上保持平滑的寬高比。

您可以選擇多種新格式,包括JPEG 2000,JPEG XR和WebP。

JPEG 2000與傳統JPEG非常相似,但具有無損壓縮功能。 這意味著壓縮的JPEG 2000文件保留其元數據而不會造成太多質量損失。

JPEG XR在更高的壓縮比下支持無損和有損壓縮。

不幸的是,大多數主流瀏覽器都不支持這兩種格式,包括Google Chrome和Firefox。 這意味著您無需使用JPEG或PNG格式作為後備。

Google Chrome支持的唯一圖片格式以及Firefox是WebP。 WebP提供無損和有損壓縮,以及對動畫的支持。

有許多WebP插件可供試驗,您可以使用在線轉換器或Photoshop將JPEG或PNG文件轉換為WebP。

當然,最理想的是為WebP文件提供備份。 要做到這一點,你需要利用 HTML中的元素以提供備份。

WebP Express for WordPress這樣的插件會自動在HTML中執行此操作,並可用於庫中的批量轉換。

最終,考慮到有限的瀏覽器支持,以下一代格式提供圖像的選項並不太吸引人。

但是利用WebP等格式為您的網站圖像提供更高的壓縮比和更小的文件大小,這將使頁面速度明顯不同。

額外的想法

移動設備上的頁面速度很難維護,尤其是在圖像較重的網站上。

響應式網頁設計和其他速度插件無法真正解釋大型文件大小和資源正在嘗試在您的網站上獲取。

幸運的是,通過自動化壓縮,更有策略地調整文件和圖像大小,您可以大幅提高頁面加載速度。

更多資源:


圖片來源

特色圖片: Pexels
所有截圖均由作者拍攝,2019年4月

Close Menu