網路字型能為您的網站帶來個性，但也會增加網站的重量。
如果字型載入時間過長，使用者就會看到空白的螢幕。更糟糕的是，您的網站可能會因為文字意外移動而顯得不穩定。
這也會損害 Core Web Vitals 指標–直接影響搜尋排名和使用者體驗的指標。
在這裡，每一毫秒都很重要。
那麼，如何在不影響效能的前提下保留您所選擇的 Web 字型呢？
讓我們一步一步來分析。
首先，什麼是網路安全字型和網路字型？
什麼是網路安全字型？
網路安全字型是在任何地方都能使用的可靠選擇。它們是大多數裝置已經擁有的字型，這意味著你可以指望它們快速載入。
以下是您可以使用的網路安全字型：
- Arial
- Times New Roman
- Verdana
- Trebuchet MS
- Courier
- Impact
- Georgia
- Comic Sans MS
- 黑體
- 宋體
- 微軟雅黑
即使選擇有限，熟練的設計師也能創造性地使用這些字型。
但是，Web 安全字型經常被過度使用，給人一種“雷同”的感覺–即使你在設計網站時投入了大量的精力和金錢。
那麼，如何讓網站看起來更漂亮呢？
使用網路字型。
什麼是網路字型？
網路字型可以讓您擺脫經常被過度使用的網路安全字型。
網路字型可以從谷歌字型等外部資源下載，也可以直接從伺服器下載到使用者的裝置上（臨時），而不是依賴使用者裝置上的字型。
這樣，您就可以使用任何符合您的品牌或設計需求的自定義字型。
我們還為您精選了最好的 Google 字型，以幫助您開始使用。
當使用者訪問您的網站時，網路字型會被臨時下載，並通過 CSS 中的 @font-face 規則應用到文字中。
然後，網路字型就開始像本地字型一樣執行–它們會根據螢幕尺寸自動調整，同時保持網站的清晰度。
隨著時間的推移，字型也發展出了更有效的儲存格式。與影象格式類似，字型也有 TTF、WOFF、WOFF2 和 EOT。
- 嵌入式 OpenType (EOT)：相容舊版本的 Internet Explorer（IE9 以下）。預設情況下不壓縮，但可以應用 GZIP 壓縮。
- TrueType (TTF)：支援舊版 Android 瀏覽器（4.4 以下版本）。預設情況下未經壓縮，但可進行 GZIP 壓縮。
- 網路開放字型格式 (WOFF)：大多數現代瀏覽器都支援，包括內建壓縮功能。
- 網路開放字型格式 2 (WOFF2)：與支援該格式的瀏覽器相容，採用自定義壓縮演算法，檔案大小比其他格式減少約 30%。
現代格式提供的壓縮功能可提高效能，並有助於保持網站設計的功能性和視覺獨特性。
什麼是Core Web Vitals (CWV)指標？
問題是：谷歌希望所有使用者都能獲得卓越的體驗。
哪個網站或應用程式能給谷歌使用者帶來最佳體驗，哪個網站或應用程式就能得到谷歌演算法的更多“關愛”。
那麼如何衡量這種“體驗”呢？
為此，谷歌於 2020 年初推出了Core Web Vitals。
CWV包含三項指標，可以告訴谷歌，您的網站或應用程式在使用者訪問時的表現如何。
在這些指標上得分越高，您在谷歌上的排名就越靠前。讓我們快速瞭解一下這些指標。
最大內容繪製（LCP）
LCP 衡量頁面上最大的可見元素載入所需的時間。
這通常是圖片或視訊，但也可能是大塊文字或嵌入式視訊。
載入速度越快，網站在使用者和搜尋引擎眼中的表現就越好。
良好的 LCP 得分意味著使用者不會等待主要內容的出現。
從互動到下一步繪畫 (INP)
INP 衡量使用者互動（如點選或輕點）與頁面視覺響應之間的時間間隔。
與 FID 相比，它能更準確地反映互動性，因為它考慮的是整個使用者旅程，而不僅僅是第一次互動。
INP 分數低意味著網站的響應速度快，能提高使用者參與度和滿意度。
累積佈局偏移（CLS）
CLS 衡量頁面載入時的穩定性。
當元素意外移動時，會讓使用者感到沮喪，並使頁面感覺不可靠。
CLS 分數越低，說明頁面載入越流暢，不會出現影響使用者體驗的佈局偏移。
如何優化網路字型以獲得更好的Core Web Vitals
那麼，關於網頁字型效能的大驚小怪是怎麼回事？
為什麼我們不能直接新增網頁字型就完事了呢？當然可以。
但正如我們之前所說，網頁字型不是本地字型。它們是從伺服器上獲取、下載並應用到網站上的，這就是問題所在。
這需要時間。
如果耗時過長，就會影響您的核心網路生命值和網站轉化率。
讓我們來看看優化網頁字型以提高核心網頁生命值的一些方法。
1. 預載字型
你希望在頁面開始載入時，字型就已經準備就緒。
因此，當頁面為使用者準備就緒時，字型也就準備就緒了。
這就是所謂的預載入。
預載入會告訴瀏覽器：”嘿，這種字型很重要。請立即載入”。
假設您使用的是流行的Google 字型 Roboto 。
您需要在 HTML 程式碼中新增一個屬性來預載字型：rel="preload"
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap" as="font" type="font/woff2" crossorigin>
這樣，瀏覽器就會知道要優先下載 Roboto 字型，這樣您的文字就能更快地顯示出正確的字型樣式。
這就縮短了最大內容繪製（LCP）的渲染時間，因此使用者可以更快地看到網站的最終版本。
2. 使用字型顯示屬性控制字型載入行為
然而，由於字型具有優先權，預載入可能會稍微增加初始載入時間。
font-display property 可讓你在載入自定義字型時控制文字的行為。
這可以幫助您避免出現可怕的 “Flash of Invisible Text（隱形文字閃爍）”和“Flash of Unstyled Text（無樣式文字閃爍）”，前者會讓使用者看到空白，後者會讓頁面顯示一秒鐘的備用字型，然後立即切換到自定義字型。
font-display property 有四種管理文字行為的方法：block, swap, fallback, 和 optional.
讓我們來看看你需要的兩種方式。
font-display: swap– 對於大多數網站來說，該選項是最安全的選擇。它能確保文字立即以備用字型顯示，並在準備就緒後切換到自定義字型。
@font-face {
font-family: 'Roboto';
src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
font-display: swap;
}
在這裡，後備字型（如 Arial 或其他系統字型）將立即載入，以保持頁面的可讀性。
下載 Roboto 時，它會替換掉備用字型，而不會在螢幕上留下空白。
font-display: optional– 如果你擔心速度問題，那麼如果自定義字型的載入速度不夠快，瀏覽器就會跳過該字型。如果你不介意後備字型保留在原處，則可以使用此方法。
@font-face {
font-family: 'Roboto';
src: url('https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
font-display: optional;
}
當效能比設計更重要時，這個選項就很有意義，非常適合注重速度的網站。
下面是一個實際應用的例子。你不會注意到這裡的切換，因為大多數字體的載入速度都足夠快。
不過，如果你的字型伺服器出現故障或速度變慢，可選引數就非常有用了。
3. 子集字型
大多數字體都有數百甚至數千個字元。
您可能只需要其中的一小部分。刪除這些字元就叫做字型子集。
沒錯，你可以刪除不必要的字元，以減小字型檔案的大小。
假設您的網站只需要英文字元。
像 FontTools 這樣的工具可以幫助您對字型進行子集，使其只包含實際使用的字元。
這意味著所有在英語中不需要的 Unicode 字元都可以刪除，以節省檔案大小。
這樣，檔案大小就會從 80 KB 減小到 30 KB。
檔案越小，下載速度越快，LCP 和 CLS 也會得到改善，因為字型載入速度很快，而且不會改變佈局。
下面是一個例子，說明如何使用 FontTools 刪除除英文字元以外的所有內容：
pyftsubset Roboto-Regular.ttf --unicodes=U+0020-007F
現在，你的 Roboto 字型只包含英文文字所需的基本拉丁字元，載入速度大大加快。
如果你更喜歡基於圖形使用者介面的方法，也可以試試 font-squirrel。一旦上傳了字型檔案，你就可以獲得大量的自定義選項來新增或刪除字型。
4. 壓縮字型
與 TTF 等舊格式相比，WOFF2 等現代字型格式提供的壓縮功能可將字型大小縮小 30%。
使用最壓縮版本的字型可以大大減少對頁面載入時間的影響。
例如，以下是確保使用 WOFF2 的方法：
@font-face {
font-family: 'Roboto';
src: url('roboto.woff2') format('woff2'),
url('roboto.woff') format('woff');
font-weight: 400;
}
這樣，支援 WOFF2 的瀏覽器就會預設使用 WOFF2，從而縮短載入時間，同時還能顯示清晰、高質量的字型。
但是，如果瀏覽器無法使用 WOFF2，則預設使用 WOFF。
5. Base64 編碼
這是另一種常用的優化網頁字型的方法。
不過，在使用 Base64 編碼字型時需要謹慎。
Base64 編碼對小字型或圖示最有用。
但如果過度使用，就會使 CSS 變得臃腫，增加頁面載入時間，這比只使用字型本身還要糟糕。
如果要對圖示字型使用 Base64 編碼，首先要將字型檔案轉換為 Base64 格式。如下所示：
@font-face {
font-family: 'CustomIcons';
src: url('data:font/woff2;base64,d09GRgABAAAAAAn4ABAAAAAAB...') format('woff2');
font-weight: normal;
font-style: normal;
}
這種方法適用於網站中經常使用的小圖示字型。
CSS 檔案與嵌入的字型一起載入，從而避免了額外的 HTTP 請求。
不過，大型正文字型應避免使用這種方法，因為它會降低初始頁面渲染的速度。
6. 字型的<link>與CSS@import
<link> 和 @import 在載入效能上有很大區別。
<link> 標籤以非同步方式載入字型，這意味著它不會耽誤頁面其他部分的渲染，而 @import 則會慢一些。
儘可能使用 <link>。
90%以上的情況下，你都可能需要使用
<link>標籤。根據經驗，你應該避免使用@import規則，因為它們會將包含資源的載入推遲到獲取檔案之後。Ilya Grigorik，Shopify 執行長的工程師兼技術顧問
它可以獨立載入字型，使頁面的其他部分無需等待字型檔案即可載入。
<link href= "https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap">
這是載入 Google 字型或類似外部字型服務的首選方法。
將其置於 HTML 的 <head> 部分，可確保字型儘早開始載入，而不會阻塞其他資源。
對於關鍵字型，請避免使用 @import。
@import 會等待 CSS 檔案完全載入完畢，這會延長載入時間並損害 LCP。
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
對字型使用@import只適用於次要或不太重要的字型。在實踐中，首屏內容中的任何字型都應避免使用@import。
7. 通過字型匹配和大小調整減少視覺偏移/CLS
視覺偏移（或谷歌所說的累積佈局偏移（CLS））會在佈局發生意外變化時出現，通常是由於字型交換造成的。
為儘量減少這種影響，請選擇與自定義字型風格和尺寸非常相似的後備字型。
CSS size-adjust 屬性還可以讓你控制後備字型大小，從而減少載入自定義字型時的視覺偏移。
如果您的自定義字型是 Roboto，同時也是一種後備字型，則可將其大小調整為與 Roboto 匹配，從而實現幾乎無縫的過渡。
@font-face {
font-family: 'Roboto';
src: url('roboto.woff2') format('woff2');
font-display: swap;
size-adjust: 100%;
}
在此，Roboto 的後備字型（如 Arial）保持一致的大小，從而在 Roboto 完全載入時減少任何明顯的移動。
一旦將後備字型的大小和間距與自定義字型保持一致，就能確保當 Roboto 替換為 Arial 字型時，移動幅度最小，從而保持較低的 CLS 值，改善使用者體驗。
8. 找到合適的地方託管網路字型
自行託管字型並不總是意味著更快的效能。
許多第三方選項也有很好的表現，有時甚至能加快載入速度。
Web Almanac 發現，某些使用第三方字型的網站比使用自託管字型的網站載入速度更快。
歸根結底，字型效能與其說取決於託管選擇，不如說取決於三個關鍵因素：
- 內容交付網路（CDN）：通過從全球多個地點提供字型，確保更快地交付。
- HTTP/2：通過並行處理多個請求來提高載入速度，減少延遲。
- 網路快取策略：有效快取字型，因此每次訪問都無需重新下載。
與其糾結於託管問題，不如集中精力設定這些基本要素，無論字型託管在哪裡，都能保證字型順利載入。
如何簡化網路效能優化
如果覺得上述技術過於繁瑣，Jetpack 這樣的外掛可以讓一切變得簡單。
Jetpack 由 Automattic 開發，是專為 WordPress 網站打造的一體化解決方案。
它結合了安全、效能和營銷方面的基本功能，全部由一個平臺管理。
即使您不懂技術，Jetpack 也能幫助您提高網站速度、加強安全性並提升使用者體驗。(無需複雜設定）
小結
Web 字型能為您的網站帶來獨特、美觀的外觀。
但是，如果沒有正確的調整，它們也會降低速度，讓使用者感到失望。
雖然我們已經介紹了基本的字型優化技術，但效能微調涉及到無數技術細節。
要想獲得最佳效果，可能會感到力不從心。
這正是閃電博專業網站開發服務的用武之地。
我們將確保您的網站美觀大方，優化速度和使用者體驗。
讓我們來處理技術問題，而你則專注於建設一個真正與眾不同的網站。
評論留言