LCP優化的幾種方法,一鍵優化LCP 外掛程式WP Meteor LCP指標優化

傻瓜式LCP優化外掛程式WP Meteor ,詳細解讀優化LCP 的方法

可以讓網站在搜尋引擎中更多的展現,從而獲取更多流量, 最簡單的方法就是安裝  這個可以一鍵優化LCP的速度,延遲載入JS檔等,WP Meteor 沒有複雜的設置,只有簡單的一個按鈕,開箱即用,簡單上手,非常適合小白用戶,下面給大家詳細介紹LCP優化的幾種方法。

优化LCP 的几种方法,一键 LCP优化 插件 WP Metreo-1

使用,進行LCP優化後的LCP 指標低於2.5,在外掛程式中搜尋WP Meteor 安裝即可使用,WP Meteor 是優化頁面速度的全新方式。它甚至可以在您現有的優化之上運行,包括:

  1. 自動最佳化
  2. 可濕性火箭
  3. WP 總緩存
  4. WP超級快取
  5. LiteSpeed快取

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

LCP優化的幾種方法

  • 最大內容繪製(LCP) 衡量最大的折疊上方元素載入到頁面上所需的時間。
  • 減少您網站的LCP 有助於使用者更快地查看您網站上的基本內容。
  • PageSpeed Insights 中的「診斷」部分會顯示哪個元素觸發LCP 指標。
优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

DevTools 中的「效能」面板也可以做同樣的工作。

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

若要改善頁面的LCP 時間,您必須最佳化該元素的載入時間。以下有五種有效的方法可以來改善您的LCP 指數,修正之後當然也有助於改善FCP、CLS 和TTI這些分數。

LCP優化,如何改善您的LCP 時間

  1. 影像優化;
  2. CSS 和JavaScript 優化;
  3. 更快的伺服器回應時間;
  4. 有限和優化的客戶端渲染;
  5. 預載和預連接。

1. 影像優化

影像最佳化是一組技術,可改善所有負載指標並減少佈局偏移(CLS)。圖片壓縮更是重要的一環。壓縮意味著應用不同的演算法來刪除或分組影像的各個部分,使其在此過程中變得更小。而有兩種類型的壓縮- 有損和無損。

  • 有損壓縮會從檔案中刪除部分數據,從而導致品質較低的輕量級影像。 和GIF 是有損影像類型的範例。
  • 無損壓縮保持大致相同的圖像質量,即它不會刪除任何數據。它產生沉重、高品質的圖像。 RAW 和PNG 是無損影像類型。

現在已經有很多很棒的工具可以完成這項工作,像是imagemin或是Optimizilla

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

另外,隨著您網站的發展,可能會添加越來越多的圖片。您將需要一個能夠自動將影像優化到所需等級的工具。

選擇正確的格式

關於影像格式之間進行選擇棘手的是尋找品質和速度之間的平衡。高品質的圖像很重但看起來很棒。低解析度的看起來很糟但載入速度更快。

在某些情況下,需要高像素圖像才能在競爭中脫穎而出,像是攝影和時尚網站。對於新聞網站和個人博客等,低像素則完全沒問題。這是可以用作指南的快速規則。

  • 將SVG 用於由簡單幾何形狀(如徽標)組成的圖像;
  • 犧牲速度同時保持品質時,請使用PNG;
  • 在品質和UX 之間取得最佳平衡,使用WebP,同時保留原始格式作為備。因為WebP 沒有100% 的瀏覽器支援。

不要忘記在選擇圖像類型後嘗試壓縮圖片。

使用srcset 屬性

處理影像時的一個典型錯誤是為所有裝置的尺寸提供同一張很大的影像。大圖像在較小的設備上看起來不錯,但瀏覽速度非常慢。

更好的方法是提供不同的圖片大小,讓瀏覽器根據設備決定使用哪一個。為此,請使用srcset 屬性並指定要提供的圖像的不同寬度。下面是一個例子:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

如您所見,對於srcset,我們使用w 而不是px。如果您希望圖像版本為600px 寬,則必須編寫600w。同樣,這種方法將圖像大小的選擇外包給瀏覽器。您只需提供選項。

Airbnb 的網站採用了這種方法:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

在決定正確的圖片尺寸時,請使用 Analytics(分析)來計算透過桌上型電腦或行動裝置造訪您網站的受眾群體的百分比。 「設備」報告還包含有關訪客使用的特定設備的深入資訊。

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

您還應該使用DevTools 檢查影像在不同視窗上的外觀。

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

當需要更改圖像大小時,請使用Smart Resize批量調整大小。

使用者註意事項:從4.4 版開始,WP 會自動建立不同版本的影像。它還添加了srcset屬性。如果您是WordPress 用戶,您只需要 提供正確的圖像尺寸

預先載入hero 圖片

最後一個技巧是關於優化瀏覽器發現hero 影像的速度。 hero 圖像通常是折疊元素上方最有意義的,因此更快地加載它們對於用戶體驗至關重要。

福布斯網站預載了首頁最大的首頁畫面:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

這種技術告訴瀏覽器在呈現頁面時優先考慮該特定圖像。預先載入可以顯著改善LCP,尤其是在載入了以下內容的hero 影像的頁面上:

  • JavaScript;
  • CSS 中的background-image 屬性。

2. CSS 和JavaScript 優化

在瀏覽器呈現頁面之前,它必須載入、解析和執行在解析HTML 時找到的所有CSS 和JavaScript 檔案。這就是為什麼預設情況下CSS 和JavaScript 都阻止渲染的原因。如果不加以優化,它們會減慢頁面載入速度,從而損害您的LCP。以下是優化它們的方法:

  • 縮小和壓縮代碼文件

縮小從程式碼檔案中刪除不必要的部分,如註解、空格和換行符。它可以減少中小型檔案大小。另一方面,壓縮透過應用不同的演算法來減少檔案中的資料量。它通常會大大減少檔案大小。

在性能方面,這兩種技術都是必須的。一些主機公司CDN 提供者預設應用這些技術。值得檢查它們是否已在您的網站上實施。

您可以使用DevTools 中的「網路」標籤並分析檔案的回應標頭以查看是否是這種情況:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

大多數縮小檔案的名稱中都有“.min” 。壓縮檔案有一個內容編碼回應頭,通常帶有 或br 值。

如果您網站的檔案沒有被縮小或壓縮,我建議您立即開始。詢問您的主機公司和CDN 提供者是否可以為您執行此操作。如果不能,有很多縮小和壓縮工具。

實施關鍵CSS

實施關鍵CSS 是一個三步驟流程,包括:

  • 在不同視窗上尋找折疊內容上方的樣式的CSS;
  • 將該CSS 直接放置(內嵌)到頁面的head標籤中;
  • 推遲CSS 的其餘部分。

您可以先使用DevTools 中的「Coverage」面板來計算頁面上每個CSS 檔案的使用量。

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

您可以按類型排列資源並瀏覽每個CSS 和JS 檔案。

顯然,頁面上未使用的CSS 並不重要。在這一點上,值得嘗試刪除或減少這個未使用的CSS,因為它會減慢渲染速度。

接下來,要提取關鍵CSS,您需要手動檢查程式碼或使用工具。這項工作的兩個很好的選擇是criticalCSScritical

擷取後,將關鍵CSS 內聯到頁面的head 標籤中。

最後,異步加載其餘的CSS。Google 建議使用link rel=”preload” , as=”style”,一個空的onload處理程序,並將樣式表的連結嵌套在noscript元素中。

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

另外,不要忘記考慮不同的視窗。桌面和行動用戶在折疊內容上方看不到相同的內容。要充分利用此技術,您需要根據設備類型使用不同的關鍵CSS。

提供更小的JavaScript 負載

JavaScript 是整個網路載入時間緩慢的主要原因之一。像圖像一樣,如果您想要出色的效能,就必須優化網站的JavaScript。

對於LCP,拆分JavaScript 包是提高分數的好方法。這個想法是只發送初始路由所需的代碼。未包含在初始捆綁包中的所有內容都應稍後提供。這樣一來,需要一次解析和編譯的JavaScript 就更少了。這項工作有些流行工具的WebPack,匯總和browserify。有關代碼拆分的更多信息,請查看web.dev 的這篇文章

3. 更快的伺服器回應時間

減少伺服器回應時間是PageSpeed Insights 中最常見的建議之一。

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

以下是您可以採取的一些步驟來解決此問題:

升級您的託管計劃。如果您使用的是便宜的共享託管計劃,則需要升級。不可能有一個快速的網站和一個緩慢的主機

優化您的伺服器。許多因素都會影響伺服器的效能,尤其是在流量激增時。使用Katie Hempenius 的本教程來評估、穩定、改進和監控您的伺服器;

減少站點對第3 方插件、工具和庫的依賴。它們增加了必須在伺服器或瀏覽器上執行的程式碼量。這會增加資源消耗並損害諸如Time to First Byte、First Contentful Paint 和LCP 等指標;

最大限度地利用快取。快取是出色Web 效能的支柱。許多資產可以快取數月甚至一年(徽標、導航圖示、媒體檔案)。另外,如果你的HTML 是靜態的,你可以快取它,這可以顯著減少TTFB;

使用CDN。 CDN 縮短了訪客與他們想要存取的內容之間的距離。為了讓您的工作盡可能簡單,請使用內建CDN 的快取工具;

使用服務工作者。 Service Worker 透過避免常見元素的重複來減少HTML 負載的大小。安裝後,服務工作者從伺服器請求最少的資料並將其轉換為完整的HTML 文件。查看Philip Walton 的本教學以了解更多詳細信息

4. 有限且優化的客戶端渲染

客戶端呈現(CSR) 是指使用JavaScript 直接在瀏覽器中呈現頁面。這種方法將任務(資料取得、路由等)從伺服器卸載到客戶端。起初,CSR 可能是完美的解決方案,但隨著您添加更多的JavaScript,它變得越來越難以維護。

如果您已經實作了CSR,則在優化JavaScript 時需要特別小心。程式碼拆分、壓縮和縮小是必須的。此外,使用HTTP/2 伺服器推送 連結rel=preload可以幫助更快地交付關鍵資源。

最後,您可以嘗試將CSR 與預先渲染結合,或在混合中新增伺服器端渲染。您在此處採用的方法取決於您網站的技術堆疊。重要的是要了解您在客戶端上投入了多少工作以及這如何影響效能。

要深入了解該主題,我推薦閱讀此Web上渲染的綜合指南。

5. 使用rel=preload , rel=preconnect和rel=dns-prefetch

這三個屬性透過將瀏覽器指向需要先處理的資源和連線來幫助瀏覽器。

首先,對瀏覽器應優先考慮的資源使用rel=preload。通常,這些位於首屏圖像、影片、關鍵CSS 或字體之上。就像在head標籤中添加幾行一樣簡單,如下所示:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

預先載入字體時,像as=”font”、type=”font/woff2”和crossorigin 可以幫助瀏覽器在渲染過程中對資源進行優先排序。作為獎勵,預載字體還有助於它們滿足FCP,從而減少佈局偏移。

Forbes.com使用這種技術來減少他們的字體載入時間:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

接下來,rel=preconnect告訴瀏覽器您打算立即建立與網域的連線。這減少了到重要域的往返。同樣,實現這一點非常簡單:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

但是在預連接時要非常小心。僅僅因為您可以預先連接到網域並不意味著您應該。只為你需要連接到網域這樣做的時候了。將它用於不需要的主機會阻止所有其他 請求,導致弊大於利。

最後,為了節省DNS 尋找不那麼重要的連線的時間,請使用rel=dns-prefetch。

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

預取也可以用作預連接的後備。

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

所有這些技術對於提高網站的效能指標都非常有用。如果你還沒有實現它們。在選擇要預先載入的資源和要預先連線的主機時要小心。

減少WordPress 網站上的LCP指標

上面列出的技術有助於改善所有網站上的LCP,包括那些建立在WordPress (WP) 上的網站。但是,另外兩個提示也可以幫助優化WP 網站上的這個指標:

選擇一個輕量級的主題。太繁瑣的主題會顯著增加載入時間並損害您的Core Web Vitals,包括LCP。這就是為什麼你應該仔細選擇你的主題。有關更多詳細信息,請查看Kinsta 的這項研究

不要使用太多插件。雖然插件提供了有用的功能,但它們中的大多數也有性能成本。它們增加了必須執行的程式碼量,導致更高的資源消耗。仔細研究每個插件並在添加後監控您網站的效能。

使用WP 網站時,這兩個技巧都是必須的。將它們與上面列出的技術結合起來,您應該會看到LCP 的重大改進。

用於監控核心Web Vitals 的其他工具和最佳實踐

即使您沒有任何LCP優化的問題,定期查看現場數據以檢測潛在問題也是一個好主意。

現場數據由 使用者體驗報告(CrUX) 收集。這些數據顯示了真實用戶如何體驗您的網站。您可以在PageSpeed Insights 中直接在總分下方找到欄位資料:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

由於Google 會評估一個頁面過去28 天的Core Web Vitals,因此您應該至少每月測試一次重要頁面。

如果PageSpeed Insights 由於缺少資料而未顯示此部分,您可以使用不同的工具存取CrUX 資料集:

您選擇哪種工具取決於您的偏好。重要的是要注意您網站的LCP 以及其他Core Web Vitals 的任何潛在問題。

同樣,請確保至少每月檢查一次Core Web Vitals 報告。有時問題會在意想不到的地方突然出現,並且很長一段時間都沒有被發現。

將LCP優化到極致後,會有意圖不到的收穫,你會發現搜尋引擎中的排名一直在提高,這就是LCP的作用。請不要忽略LCP指標。 LCP優化很重要!

評分

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *