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

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

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

自托管字體vs谷歌字體

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

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

網絡流與谷歌字體

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

網絡流與自托管字體

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

舊的性能參數

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

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

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

使舊的性能參數無效

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

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

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

Safari真的很關心隱私。多年來，它已經避開了這種跨站點跟蹤攻擊。最后是Chrome。其他基于Chromium的瀏覽器仍然需要顯示或實現該特性。

Chrome:既然v86(2020年10月)

Safari:自2013年以來

Firefox:計劃實施

邊緣:最有可能很快

歌劇:最有可能很快

勇敢:最有可能很快

維瓦爾第:最有可能很快

結論

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

謝謝觀看這篇文章!