通過(guò)使用CDN，預(yù)加載關(guān)鍵資產(chǎn)和現(xiàn)代格式的懶惰加載圖像來(lái)優(yōu)化關(guān)鍵渲染路徑來(lái)改善LCP。 2。通過(guò)分解長(zhǎng)期JavaScript任務(wù)，推遲非關(guān)鍵腳本，最小化第三方代碼並將工作卸載工作來(lái)減少FID。 3。通過(guò)為媒體設(shè)置尺寸屬性，為動(dòng)態(tài)內(nèi)容保留空間，避免出乎意料的佈局變化以及仔細(xì)管理Web字體加載，從而最小化CLS。通過(guò)燈塔，房地產(chǎn)使用者監(jiān)控和實(shí)現(xiàn)設(shè)備測(cè)試不斷監(jiān)視性能，以維持隨著時(shí)間的推移增益並改善用戶(hù)體驗(yàn)。

核心Web Vitals不僅僅是另一個(gè)清單項(xiàng)目，它們直接影響用戶(hù)體驗(yàn)和搜索排名。作為開(kāi)發(fā)人員，您無(wú)需大修整個(gè)網(wǎng)站即可進(jìn)行改進(jìn)。小型，集中的變化可以產(chǎn)生很大的結(jié)果。以下是解決三個(gè)核心指標(biāo)（最大的內(nèi)容塗料（LCP），第一個(gè)輸入延遲（FID）和累積佈局偏移（CLS））的方法。

1。提高最大內(nèi)容油漆（LCP）

LCP測(cè)量頁(yè)面的主要內(nèi)容加載所需的時(shí)間，以下是2.5秒以下。慢速LCP使用戶(hù)挫敗並提高跳出率。

關(guān)鍵策略：

• 優(yōu)化關(guān)鍵渲染路徑
  減少渲染障礙資源。內(nèi)聯(lián)關(guān)鍵的CSS並推遲非必需的樣式和腳本。使用preload來(lái)進(jìn)行關(guān)鍵資產(chǎn)，例如英雄圖像或網(wǎng)絡(luò)字體：

   <link rel =“ preload” as =“ image” href =“ hero.jpg”>

• 升級(jí)您的託管或使用CDN
  服務(wù)器響應(yīng)時(shí)間是主要的LCP因素。快速的CDN（例如CloudFlare，farly或AWS CloudFront）使內(nèi)容更接近用戶(hù)，並減少了第一個(gè)字節(jié)（TTFB）的時(shí)間。

• 優(yōu)化和懶惰的圖像
  使用WebP或AVIF等現(xiàn)代格式。使用srcset提供適當(dāng)尺寸的圖像。折疊下方的懶惰圖像：

   <img src =“ image.webp” loading =“ lazy” alt =“ description”>

• 與關(guān)鍵域的前連接
  如果您正在加載第三方的字體或腳本：

   <link rel =“ prednect” href =“ https://fonts.googleapis.com”>

2。減少第一次輸入延遲（FID）

FID衡量響應(yīng)能力 - 頁(yè)面響應(yīng)用戶(hù)交互的時(shí)間需要多長(zhǎng)時(shí)間（例如，單擊按鈕）。目標(biāo)不到100毫秒。 （注意：在2024年，F(xiàn)ID被接觸到現(xiàn)場(chǎng)的下一個(gè)油漆（INP），但優(yōu)化原理仍然相似。）

是什麼原因?qū)е赂逨ID？
長(zhǎng)長(zhǎng)的任務(wù)阻止了主線程 - 通常太多的JavaScript執(zhí)行。

如何修復(fù)它：

• 分解長(zhǎng)javascript任務(wù)
  使用setTimeout或requestIdleCallback進(jìn)行重大工作：

  功能processInchunks（數(shù)據(jù)，回調(diào)）{
    const塊= 50;
    令索引= 0;
    功能過(guò)程（）{
      const end = math.min（index塊塊，data.length）;
      for（讓i = index; i <end; i）{
        //過(guò)程項(xiàng)目
      }
      index = end;
      if（index <data.length）{
        settimeout（process，0）; //屈服控制
      } 別的 {
        打回來(lái)（）;
      }
    }
    過(guò)程（）;
  }

• 推遲非關(guān)鍵JavaScript
  在腳本標(biāo)籤上使用defer或async ：

   <script src =“ Analytics.js” Async> </script>

• 最小化第三方腳本
  每個(gè)分析，聊天機(jī)器人或廣告腳本都會(huì)增加開(kāi)銷(xiāo)。審核它們並刪除或更換重型。

• 使用網(wǎng)絡(luò)工作者進(jìn)行密集邏輯
  卸載JSON解析，圖像處理或複雜計(jì)算工人線程。

3。最小化累積佈局偏移（CLS）

CLS測(cè)量視覺(jué)穩(wěn)定性 - 加載過(guò)程中有多少內(nèi)容會(huì)跳躍。良好的分?jǐn)?shù)低於0.1。當(dāng)元素加載沒(méi)有預(yù)留空間時(shí)，佈局變化就會(huì)發(fā)生。

常見(jiàn)的罪魁禍?zhǔn)缀托迯?fù)：

• 始終在圖像和視頻中包含尺寸屬性

  <img src =“ photo.jpg” width =“ 640”高=“ 360” alt =“ ...”>

  或使用CSS縱橫比框：

   .ASPECT-RATIO-BOX {
    位置：相對(duì)；
    寬度：100％；
    身高：0;
    填充底：56.25％； / * 16：9 */
  }

• 預(yù)留廣告，嵌入和iframe的空間
  不要讓動(dòng)態(tài)內(nèi)容將現(xiàn)有內(nèi)容降低。設(shè)置固定容器：

   .ad-slot {
    身高：250px;
    背景：＃f0f0f0;
    顯示：flex;
    準(zhǔn)項(xiàng)目：中心；
    Jusify-content：中心；
  }

• 避免在現(xiàn)有內(nèi)容上面注入上述內(nèi)容（除非用戶(hù)觸發(fā)）
  在頂部加載橫幅或餅乾通知會(huì)將所有內(nèi)容移動(dòng)下來(lái)。如果需要，將其從頂部進(jìn)行動(dòng)畫(huà)。

• 預(yù)加載Web字體並使用font-display: swap
  雖然swap阻止了隱形文本，但它可能會(huì)導(dǎo)致不風(fēng)格的文本（fout）移動(dòng)佈局?？紤]font-display: optional或使用link rel="preload"以加快字體加載。

獎(jiǎng)金：監(jiān)視器和自動(dòng)化

• 在CI/CD中使用燈塔
  集成燈塔CI在上線之前捕獲回歸。

• 設(shè)置Real-user監(jiān)視（朗姆酒）
  諸如Google的Crux儀表板，哨兵或New Relic之類(lèi)的工具提供了有關(guān)實(shí)際用戶(hù)體驗(yàn)的現(xiàn)場(chǎng)數(shù)據(jù)。

• 在真實(shí)設(shè)備和網(wǎng)絡(luò)條件上進(jìn)行測(cè)試
  Chrome Devtools的節(jié)流並不完美。將WebPagetest.org用於3G，慢速CPU和多站點(diǎn)測(cè)試。

改善核心網(wǎng)絡(luò)生命力並不是要追求完美的分?jǐn)?shù)，而是要使您的網(wǎng)站感覺(jué)更快，更穩(wěn)定。專(zhuān)注於高影響力更改，測(cè)量結(jié)果並迭代。大多數(shù)收益來(lái)自一致的小型優(yōu)化，而不是魔術(shù)子彈。

以上是優(yōu)化核心網(wǎng)絡(luò)生命值：開(kāi)發(fā)人員的實(shí)用指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！