改善 WordPress 網站核心網絡生命力的技巧

已發表: 2021-09-13

谷歌有辦法在網頁設計師和網站所有者之間製造恐慌。 當他們對搜索算法進行更改時,人們開始爭先恐後地追趕。 很容易理解為什麼。 沒有人希望他們的 SEO 排名受到影響。

因此,當宣布 Core Web Vitals 指標時,反應是可以預見的。 由於這些更改基於站點性能,我們的注意力已轉向確保加載時間快如閃電。

但這並不總是那麼簡單。 運行 WordPress 等內容管理系統 (CMS) 的網站尤其具有挑戰性。 有很多因素在起作用。 因此,提高性能需要多管齊下。

從哪兒開始? 查看我們的指南,以提高您的 WordPress 網站的 Core Web Vitals 分數。

實施緩存

提高 WordPress 網站速度的最簡單方法之一是實現緩存。 在許多情況下,通過這一步,以前緩慢的站點將變得更快。 即使在相對便宜的主機上也是如此。

默認情況下,WordPress 頁面和帖子必須從站點的數據庫中檢索內容和設置。 這需要時間。 另一方面,緩存將以靜態 HTML 文件的形式提供內容 - 消除了對數據庫調用的需要。 沒有中間人(即數據庫)後,加載時間會更快。

一些託管軟件包,特別是託管的 WordPress 託管,將包括基於服務器的緩存。 這通常是最好的選擇,因為它對網頁設計師的要求很少,而且性能很好。 它可能需要經常清除。 否則,這是一種不干涉的體驗。 並且可以與插件有效結合,進一步提升速度。

即使您的主機不提供服務器級別的緩存,您仍然可以通過插件優化性能。 緩存插件的範圍、複雜性和定價各不相同。 但在改善加載時間方面,它們確實提供了切實的成果。 反過來,這也是對 Core Web Vitals 的積極推動。

一輛跑車。

延遲加載渲染阻止腳本和样式

在 Google PageSpeed Insights 中測試您網站的性能時,呈現阻止資源的主題似乎出現了很多。 這些是不被認為是“關鍵”的腳本和样式——這意味著它們不需要呈現“首屏”頁面內容。

這些資源可能會妨礙更快的加載時間。 具體來說,它們會影響 Core Web Vitals 中的“最大內容繪製 (LCP)”分數。 這是頁面主要內容區域加載所需的時間。 降低 LCP 是至關重要的。

改善這種情況的一種方法是延遲(或推遲)各種內容元素(圖像、視頻、塊級文本)的加載。 這確保了只有需要的腳本和样式首先加載,而其他所有內容都在之後加載。

除了縮小之外,許多 WordPress 緩存/優化插件也恰好包含這種類型的功能。 然而,這可能需要一些實驗,因為推遲錯誤的資源可能會出現問題。

請務必測試您所做的任何更改並檢查瀏覽器控制台是否有錯誤。 一旦找到正確的配置,頁面上的渲染阻塞資源的數量應該會顯著減少。

街道上的“讓步”標誌。

優化圖像

大型英雄圖像和復雜滑塊的廣泛使用只會增加性能優化的挑戰。 這些資產可能看起來不錯,但可以輕鬆添加高達數兆字節的數據。 這不會讓您獲得 Core Web Vitals 的及格分數——尤其是在移動設備上。

值得慶幸的是,有幾種方法可以減輕負擔。 首先,刪除您認為不必要的任何圖像。 即使刪除一張大圖像也會產生影響。

可以優化其餘圖像。 這將減少它們的文件大小並減少它們對加載時間的影響。

如何進行圖像優化取決於您。 您可以下載最嚴重的違規者的副本並使用您最喜歡的圖像編輯器對其進行壓縮,然後將它們上傳回您的網站。 或者,您可以使用有用的 WordPress 媒體插件自動化該過程。

響應式圖像

對於移動用戶,WordPress 包括通過srcset提供響應式圖像的能力。 事實上,它會自動為您處理放置在您的內容中的圖像。 這是非常有價值的,因為它可以防止大量桌面大小的媒體降低移動用戶體驗。 對於主要內容區域之外的圖像,您可能需要做一些自定義工作來實現此功能。

現代圖像格式

還值得查看您正在使用的文件格式。 例如,Google 的 WebP 格式通常可以在保持圖像質量的同時減小文件大小。 請注意,舊版瀏覽器(嗯,IE)不支持某些新奇的格式,因此可能需要後備版本。 插件也可以提供幫助。

一個人使用照片編輯軟件。

延遲加載所有東西

延遲加載功能僅在項目位於瀏覽器的視口中時才加載它們。 通過延遲加載圖像、iframe 和其他第三方內容(例如社交媒體小部件),您可以將資源集中在用戶將首先看到的元素上。

WordPress 已經實現了對圖像的原生、基於瀏覽器的延遲加載。 當您將圖像添加到頁面或帖子時, loading="lazy"屬性放置在<img>標記中。 也就是說,只要圖像包含高度和寬度屬性。

這很棒——但是其他元素呢,比如視頻或 iframe? 當從一開始就加載時,這些項目也可以壓低頁面。

iframe 現在默認是延遲加載的——所以不用擔心。 一些更複雜的元素可能需要自定義代碼或插件來實現此功能。

一條狗在長凳上休息。

清除雜亂

隨著時間的推移,即使是維護良好的 WordPress 網站也會變得雜亂無章。 數據庫堵塞、未使用的插件仍然處於活動狀態、臃腫的主題以及您不使用的功能——這些都會發生。 它還可以拖累您的核心網絡生命力。

這就是為什麼一次又一次地整理是很重要的。 您的站點數據庫可以手動優化或設置為定期優化。 未使用的插件可以被停用和丟棄。 主題可以變得更精簡或用更好的東西代替。

研究使您的網站變慢的原因,找到罪魁禍首並處理它們。 您可能會驚訝於這會帶來多大的不同。

拼出“保持簡單”的字母拼貼。

改善您網站的核心網絡生命力

Core Web Vitals 使優化 WordPress 網站性能的本已棘手的過程複雜化。 即使是在其他性能指標上得分很高的網站,也可能在這方面仍有不足。 這在移動測試中最為突出。

好消息是設計師可以做很多小事來迎頭趕上。 實施緩存奠定了良好的基礎,並提供了立竿見影的推動力。 從那裡開始,這是一個減小文件大小並按重要性順序加載樣式和腳本的問題。

更進一步,考慮到 Core Web Vitals 來調整網站的 CSS 也是有意義的。 這可以幫助解決可怕的累積佈局偏移 (CLS) 分數並減少臃腫。

一般來說,對性能有益的東西對 Core Web Vitals 也有好處。 分數可以很快提高。 只需知道,要解決其中的一些個別缺點,需要進行一些反複試驗。

首要目標是確保在用戶訪問您的網站時只加載必需品。 這樣做會讓訪問者和谷歌都非常高興。