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

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

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

自托管字體vs谷歌字體

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

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

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

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

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

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

舊的性能參數(shù)

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

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

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

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

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

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

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

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

Chrome:既然v86(2020年10月)

Safari:自2013年以來(lái)

Firefox:計(jì)劃實(shí)施

邊緣:最有可能很快

歌劇:最有可能很快

勇敢:最有可能很快

維瓦爾第:最有可能很快

結(jié)論

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

謝謝觀看這篇文章!