優化網絡上的字體加載和性能

僅使用RER =“ PRELOAD”的1-2個關鍵字體和AS =“ FONT”，TYPE =“ FONT/WOFF2”和CROSSORIGIN加快交付而無需阻止其他資源。 2。使用字體 - 播放：在 @font-face中交換以確保立即可見文本，以防止foit並允許加載後平滑地交換到自定義字體。 3.為現代瀏覽器提供WOFF2格式，因為它的出色壓縮，woff是較舊的瀏覽器的後備，將文件大小降低了30％以上。 4。子集字體僅包含所支持語言的必要字符，可大大減少文件大小，尤其是對於大型或非拉丁蛋白字體。 5。使用字體加載API或JavaScript的懶負載非關鍵字體（例如，用於折疊內容），以避免渲染阻滯並確定核心內容的優先級。 6。如果可能的情況下，自助主機字體可以消除第三方依賴性，改善緩存控制並減少DNS/TCP/TLS開銷，尤其是與HTTP/2或HTTP/3結合使用時。 7。用緩存控制的長期緩存：公共，max-age = 31536000，不可變和版本的文件名，以防止重複訪問時重新下載。 8。將字體重量和样式的數量最小化至2-3個必需方面，使用CSS字體重量模擬丟失的變體並減少請求和帶寬。優化字體加載，通過僅交付需要的內容，在需要立即可讀的內容時，可以通過提供需要的內容來確保快速，美麗的版式。

Web字體可以使站點具有視覺標識，但是如果不仔細處理，它們可能會損害性能 - 實現佈局變化，隱形文本（FOIT）或延遲渲染。優化字體加載可確保您的網站看起來很棒並保持速度快。這是正確做的方法。

1。預加載臨界字體

如果您使用自定義字體在折疊上方的標題或正文文本中，請預緊它們以加快交付的速度。

 <link rel =“ preload” as =“ font” href =“ font.woff2” type =“ font/woff2” crossorigin>

• 使用rel="preload"作為鑰匙字體（例如，主字體或身體字體）。
• 始終包含as="font"和type="font/woff2"以幫助瀏覽器正確確定優先級。
• 即使是相同的字體，也要添加crossorigin ，這是由於CORS策略而引起的字體預加載。

⚠️不要過度使用預緊力 - 僅將其應用於1-2個關鍵字體。預加載太多塊其他重要資源。

2。使用font-display來更好地渲染控制

@font-face中的font-display描述符控制著加載時字體的渲染方式。使用swap以避免看不見的文本。

 @font-face {
  字體家庭：“ CustomFont”；
  src：url（'font.woff2'）格式（'woff2'）;
  字體 - 播放：交換；
}

• swap ：立即顯示後送文本，然後加載時將其交換為自定義字體。防止foit。
• optional ：讓瀏覽器決定是否基於網絡條件使用自定義字體。適合較慢的連接。
• 除非絕對必要，否則請避免block - 它延遲文本渲染。

swap通常是最佳選擇：用戶立即看到內容，並且在字體到達時設計會精煉。

3。提供現代格式（Woff2）

在可能的情況下始終為WOFF2提供服務 - 它的壓縮和支持所有現代瀏覽器。

 @font-face {
  字體家庭：“ CustomFont”；
  src：url（'font.woff2'）格式（'woff2'），
       url（'font.woff'）格式（'woff'）;
  字體 - 播放：交換；
}

• 與Woff相比，Woff2將文件大小降低了30％。
• 僅適用於較舊瀏覽器的沃夫作為後備。

使用字體松鼠或woff2_compress等工具轉換字體。

4。關鍵語言的子集字體

如果您的網站僅支持英語（或幾種語言），請將您的字體設置為僅包含所需字符。

• 大大減少字體文件大小。
• 諸如Google字體之類的工具可讓您請求子集（例如&text=Hello ）。
• 對於自託管字體，請使用諸如pyftsubset之類的工具：

 pyftsubset font.woff2 -text =“ abcdefghijklmnopqrstuvwxyz”  - 輸出= subset.woff2

子集特別有助於大膽的字體或非拉丁腳本腳本等大字體。

5。懶負載非關鍵字體

在初始渲染後，可以加載折疊下面使用的字體（例如，用於博客文章或頁腳）。

使用JavaScript使它們異步加載：

 //加載一頁後加載非關鍵字體
document.fonts.load（“ 16px custyfont-light”）。然後（（）=> {
  document.body.body.classlist.add（“ font-loaded”）;
}）;

或使用字體加載API來控制時間。

這樣可以防止字體在頁面加載過程中與核心內容競爭。

6.主機字體（如果可能的話）

第三方字體主機（如Google字體）很方便，但添加DNS，TCP和TLS開銷。

自我託管給你：

• 更好地控制緩存和交付。
• 沒有外部依賴。
• 能夠與其他資產捆綁（如果使用構建過程）。

為了自助式Google字體：

• 通過Google-Webfonts-Helper下載字體。
• 主機在本地和預加載。

獎勵：與HTTP/2或HTTP/3結合使用，以更快的多路復用輸送。

7。利用緩存

為字體文件設置長緩存標頭（例如，1年）：

緩存控制：公共，max-age = 31536000，不變

• 瀏覽器不會在重複訪問時重新下載字體。
• 使用版本的文件名（例如， font-v2.woff2 ）強制更新。

immutable告訴瀏覽器在高速緩存期間資源不會改變 - 靜態資產很大。

8。減少字體重量和样式的數量

每個字體變化（輕，常規，粗體，斜體）是一個單獨的文件。

而不是加載5個權重，請問：

• 您是否真的需要輕巧，常規，中等，大膽和外來？
• CSS font-weight: 500近似介質沒有單獨的文件？

嘗試限制最大2-3個權重。

更少的字體文件=更少的請求更少的帶寬渲染速度。

優化字體加載不是要刪除字體，而是要使它們更聰明。預加載批判性的內容，使用font-display: swap ，服務woff2，子集和自我宿主，如果有意義。結果？美麗的排版而無需犧牲速度。

基本上：加載所需的內容，需要時，並確保用戶可以立即閱讀您的內容。

以上是優化網絡上的字體加載和性能的詳細內容。更多資訊請關注PHP中文網其他相關文章！