LCP 元素竟然是 Title 區(qū)域

一般情況下頁(yè)面 LCP 元素是首屏最大的圖片，即使托管在了 CDN、并且 preload 圖片下載仍需要一定時(shí)間，但最近分析團(tuán)隊(duì)負(fù)責(zé)的某個(gè)頁(yè)面時(shí)候竟然發(fā)現(xiàn) 20% 左右的頁(yè)面訪問(wèn) LCP 竟然是一個(gè)沒(méi)有任何圖片的文本區(qū)域，僅次于頁(yè)面首屏最大圖片

在 webpagetest 測(cè)試看 Filmstrip View，確實(shí)可以看到文案區(qū)域空白時(shí)候，下面 DOM 已經(jīng)被渲染

是什么阻止了頁(yè)面文案的渲染？

web font 渲染時(shí)機(jī)

既然是文本渲染問(wèn)題很自然聯(lián)想到字體問(wèn)題，為了保證品牌一致性和跨平臺(tái)一致性，網(wǎng)站使用了 web font。web font 有多種格式，在以往是個(gè)復(fù)雜的選擇問(wèn)題，自從 WOFF2 格式出現(xiàn)后就不用糾結(jié)了，WOFF2 使用了 Brotli，因此其壓縮效果比 WOFF 高出 30%，從而可以減少下載數(shù)據(jù)量，從而提升性能，同時(shí) WOFF2 瀏覽器支持也特別好

可以使用 @font-face 在頁(yè)面引入 web font

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2) format('woff2');
}

可能在大部分人想象中使用 @font-face 后文本的渲染過(guò)程是這樣的

1. 下載 web font

2. 在下載期間先用備選字體渲染

3. web font 字體下載完成后使用該字體替換

但實(shí)際這只是 @font-face 渲染方式的一種，而且不是默認(rèn)的，@font-face 由 font-display屬性決定 web font 在下載時(shí)間和可用時(shí)間是如何展示的

1. auto：瀏覽器使用默認(rèn)的字體加載策略，不同瀏覽器處理方式不同，但一般是有一個(gè)非常短暫的阻塞期，如果字體在這段時(shí)間內(nèi)加載完成則使用該字體，否則它將使用備用字體，并且在字體文件加載完成后切換到定義的字體

2. block：在字體請(qǐng)求的階段內(nèi)文本不可見(jiàn)，只有在字體文件加載完成后文本才會(huì)顯示。如果在這個(gè)階段（大約為3秒）字體文件沒(méi)有加載完成，將使用備用字體渲染，并且在加載完成后切換到請(qǐng)求的字體

3. swap：在字體文件加載過(guò)程中瀏覽器會(huì)立即使用備用字體渲染，一旦字體文件加載完成，瀏覽器會(huì)將文本切換到請(qǐng)求的字體。這能有效避免文本在加載字體文件時(shí)不可見(jiàn)，但可能會(huì)導(dǎo)致文本樣式突然改變

4. fallback：結(jié)合了block和swap兩種情況。在字體加載的前100ms（或者更長(zhǎng)，取決于瀏覽器）內(nèi)，瀏覽器會(huì)阻塞文本的渲染。之后如果字體尚未加載，將使用備用字體。但與swap不同的是，在備用字體顯示的一段時(shí)間后，如果請(qǐng)求的字體仍未加載完成，瀏覽器就不會(huì)再執(zhí)行字體切換，以避免文本樣式的突變

5. optional：與fallback類似，但它給予瀏覽器更大的自由度來(lái)決定是否下載字體文件。如果字體文件在一定時(shí)間內(nèi)沒(méi)有加載完成，瀏覽器可能選擇不再加載它。這個(gè)值對(duì)于用戶體驗(yàn)和性能都有可能帶來(lái)提升，因?yàn)樗鼫p輕了網(wǎng)絡(luò)負(fù)擔(dān)，但可能會(huì)有字體不一致的風(fēng)險(xiǎn)

在字體下載比較慢的情況下

• 如果認(rèn)為字體切換帶來(lái)的閃爍不是問(wèn)題，可以設(shè)置 font-display:swap;提前渲染文本

• 如果認(rèn)為不一定要保障使用 web font 來(lái)渲染，那么無(wú)疑 font-display:optional;是最優(yōu)選

web font 下載提速

但在大部分網(wǎng)站無(wú)論是字體閃爍、還是不使用規(guī)定的 web font 渲染都是問(wèn)題，因此我們的主要思路需要集中在如何提升 web font 下載速度

提前加載 web font

令人意外的是瀏覽器解析到 @font-face 聲明時(shí)候并不會(huì)下載對(duì)應(yīng)的字體，只有解析到使用了該 font-face 中定義字體的頁(yè)面元素時(shí)，才會(huì)下載對(duì)應(yīng)的字體
這也就意味著把 @font-face 聲明寫在頁(yè)面頂部是沒(méi)有作用的，可以使用 preconnect 或者 preload 提前讓瀏覽器提前建連和下載字體文件，尤其是在頁(yè)面應(yīng)用了流式渲染時(shí)候有奇效

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1MmgVxFIzIXKMnyrYk.woff2" as="font" type="font/woff2" crossorigin>

字體子集化縮減 web font 體積

字體子集化是一種減小字體文件大小的技術(shù)，它通過(guò)移除字體文件中不需要的字符來(lái)實(shí)現(xiàn)。由于許多字體文件包含了成千上萬(wàn)的字符，這些字符包括各種語(yǔ)言的字母、符號(hào)、標(biāo)點(diǎn)、數(shù)字、空格、換行符以及裝飾性和特殊字符。然而一個(gè)特定的網(wǎng)站或應(yīng)用可能不需要這么多字符
在 @font-face 內(nèi)部可以使用 unicode-range 定義字體應(yīng)用到的 Unicode 字符范圍。這樣可以將字體文件拆分成多個(gè)，當(dāng)字符在定義的范圍內(nèi)時(shí)，瀏覽器才會(huì)下載并使用對(duì)應(yīng)的字體文件
例如網(wǎng)站主要使用英文，但偶爾包含一些拉丁擴(kuò)展字符，可以用 unicode-range 來(lái)指定只加載這些字符的字體：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  unicode-range: U+00-FF; /* 基本拉丁字母及擴(kuò)展 */
}

通過(guò)將字體文件限制為僅包含網(wǎng)站或應(yīng)用所需的字符，可以減少文件的大小，得益于上面提到的字體當(dāng)被使用到才會(huì)下載的機(jī)制，從而減少下載時(shí)間和帶寬使用，提高網(wǎng)站的加載速度和性能
Google Roboto 字體的定義 fonts.googleapis.com/css2?family…

/* cyrillic-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7mxKKTU1Kvnz.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
...

優(yōu)化效果

為了保障用戶體驗(yàn)，選擇了對(duì)字體文件 preload

<link rel="preload" href="xxxx.woff2" as="font" type="font/woff2" crossorigin>

這樣文本部分終于第一時(shí)間加載

作者：謙行
鏈接：https://juejin.cn/post/7371712684797280256
來(lái)源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。