LCP的定義
在分享這次心得之前，得讓大家瞭解一下什麼是LCP
根據谷歌官方的定義一句話概括就是：LCP 報告的是視口中可見最大圖片或文字塊的呈現時間（相對於使用者首次導航到相應網頁的時間）。
這麼一句話可能有點抽象，不過沒關係，在瀏覽器的效能裡其實就可以看到LCP的指標，如下圖所示
LCP的最佳化方向
就算知道了LCP怎麼看，但是沒有接觸過的同學肯定也是對最佳化無從下手，其實無需擔心，谷歌官方專門針對這方面出了一個文件，點選檢視
根據這個文件大概可以總結成4個部分
以上是整個LCP的構成，針對這四個部分，官方分別給出了以下方案
確保 LCP 資源儘早開始載入。
確保 LCP 元素可在其資源完成載入後立即渲染。
在不犧牲質量的情況下，儘可能縮短 LCP 資源的載入時間。
儘快提供初始 HTML 文件。
LCP最佳化的具體方案
社羣裡其實關於LCP最佳化的帖子不少，但是大部分都很籠統，看完也不知道具體該幹什麼。以下就是我結合實際經驗給大家總結的一些具體措施。
專案分析
解決LCP慢的問題，首先要定位問題，到底慢在哪個環節，這樣才能對症下藥。 首先讓我們開啟瀏覽器的效能檢視面板，清除快取重新整理一下頁面監測看看
可以看到我這個案例專案在LCP這條左邊所有的載入項都是有可能影響到LCP效能的因素，所以我們要進去放大一個一個去排查哪些JS和CSS是可以最佳化的，還有些根據介面渲染dom也要重點關注一下。有時候這個dom往往就是視口中的最大文字塊，那麼介面速度慢就會直接影響到頁面的LCP效能，這個時候就要讓後端同學去最佳化了。
我這個案例專案經過排查之後發現有些CSS載入比較滯後，有些JS包當前頁面沒有用到，卻也第一時間載入了，那麼具體的最佳化點就確定了，我們前端目前能做的就是儘可能的去最佳化這些CSS和JS。
具體舉措
對於專案中的一些靜態資源，我們可以儘可能的預載入來減少其對LCP的影響，例如link標籤的CSS
CSS部分
<link rel="stylesheet" href="xxx.css" rel="preload"/>
我們可以設定rel屬性為preload，這樣就可以前置該CSS的載入從而加快LCP速度。
JS部分 至於當前頁面用不到的JS包我們可以進行懶載入
<script data-src="xxx.js" crossorigin="anonymous"></script>
我們透過data-src的方式就可以讓瀏覽器對該JS資源懶載入，這樣本頁面少載入了一個JS包，那對LCP肯定也有提速的作用
小夥伴們可以試試以上兩個舉措，效果絕對是立竿見影的，在效能看板就可以直觀的看到。
總結
LCP最佳化是個較為複雜和繁瑣的工程，這不是單單前端去最佳化就能很好解決的，很多時候要結合實際專案分析，整個專案組都要參與進來。
而且考慮到專案實際情況可能並不理想，比如龐大的專案裡有很多冗餘無用的程式碼，或者有些已經沒用的外掛庫，甚至有些版本迭代時候遺棄的頁面和模組。這些都會增大最後打包的體積，影響LCP的速度，這些無用程式碼和外掛庫，就要結合實際去和專案負責人或者產品溝通是否可以刪除。這樣精簡後的專案包也可以是明顯提升LCP速度的。
甚至再進一步，比如專案裡原來用的lodash包，現在可以考慮用原生JS來實現，然後幹掉這個工具包。
綜上所述LCP最佳化並不是一個純技術問題，它需要你對整個專案甚至業務邏輯都有一定的瞭解，而且針對不同的專案最佳化的手段也不盡相同，如果小夥伴們有其他的最佳化方式也歡迎在評論區補充。
