我在原型和10M+ MAU產(chǎn)品中使用了谷歌字體。它非常容易上手，并提供了一個驚人的字體發(fā)現(xiàn)。這也是為什么現(xiàn)在仍有超過4200萬個網(wǎng)站在使用它!

這種便利有它的代價:性能。許多人已經(jīng)指出了多次請求的成本。如果你想要剩余的速度提高，那么你最好下載你使用的谷歌字體和自我主機。

這不是什么新鮮事。事實上，它已經(jīng)被提倡很多年了。甚至連谷歌自己也在谷歌I/O ' 18談到web性能時，建議其他人自行托管字體。

自托管字體vs谷歌字體

從本質(zhì)上講，谷歌字體，即使有它所有的字體和CSS優(yōu)化，也不能比自托管字體更快。

Sia寫了一篇很好的文章，比較了谷歌字體和自托管字體在不受CDN影響的情況下的表現(xiàn)。

網(wǎng)絡流與谷歌字體

優(yōu)化的谷歌字體加載預連接

網(wǎng)絡流與自托管字體

優(yōu)化自托管字體與預加載

舊的性能參數(shù)

那么，如果最基本的性能是自托管字體的優(yōu)勢:是什么使我們的開發(fā)者相信谷歌字體至少和自托管字體一樣的性能呢?

谷歌字體被設計成分布在一個全局CDN上，并從中獲得緩存的好處。用戶通過上述CDN請求字體。他們很有可能在較早的時候已經(jīng)從不同的站點下載了字體資源。

“[…]我們的跨網(wǎng)站緩存設計，你只需要加載字體一次，與任何網(wǎng)站，我們將使用相同的緩存字體在任何其他網(wǎng)站使用谷歌字體。”

使舊的性能參數(shù)無效

自從Chrome v86于2020年10月發(fā)布以來，像字體這樣的跨站點資源就再也不能在同一個CDN上共享了。這是由于瀏覽器緩存的分區(qū)(Safari多年前就有了這種分區(qū))。

在這篇谷歌文章中，他們解釋了什么是分區(qū)瀏覽器緩存。它的引入只是為了防止可能的跨站點跟蹤機制。

其他瀏覽器中的緩存分區(qū)

Safari真的很關心隱私。多年來，它已經(jīng)避開了這種跨站點跟蹤攻擊。最后是Chrome。其他基于Chromium的瀏覽器仍然需要顯示或?qū)崿F(xiàn)該特性。

Chrome:既然v86(2020年10月)

Safari:自2013年以來

Firefox:計劃實施

邊緣:最有可能很快

歌劇:最有可能很快

勇敢:最有可能很快

維瓦爾第:最有可能很快

結論

谷歌字體資源將為每個網(wǎng)站重新下載，無論它被緩存在CDN上。自托管你的字體以獲得更好的性能。舊的性能參數(shù)不再有效。

謝謝觀看這篇文章!