是時候和Google Fonts說再見了
Simon Wicki 是來自柏林Freelance Frontend 的一位開發者,曾開發過多款MAU 超過1000 萬的產品。在他近日發布的博文《是時候和Google Fonts 說再見了》中,表示由於受性能拖累,Google Fonts 已經不再適合部署到產品中了。
![goodbye-google-fonts.jpg](https://i0.wp.com/static.cnbetacdn.com/thumb/article/2020/1208/243162f3d4f8ef9.jpg?w=640&ssl=1)
在博文的開頭他介紹了Google Fonts 的諸多優勢,包括易於上手、字體庫豐富等等,而這也是目前仍有超過4200 萬個網站依然在使用的原因。不過作為代價就是犧牲了性能,很多用戶都反饋在多次請求方面的代價。如果你依然想要保持高速,那麼最好的辦法就是下載已經使用的Google Fonts,然後在本地進行託管。
這並不是什麼新鮮的做法,事實上已經被提倡多年了。甚至於谷歌自己在2018 年的I/O 開發者大會談及性能時候推薦其他人自行託管字體。從本質上講,即使擁有所有字體和CSS 優化功能,Google Fonts 也不會比自託管字體快。
Sia 曾撰寫了一篇文章,她比較了Google Fonts 和自行託管字體在沒有CDN 影響情況下的性能表現。
![](https://i0.wp.com/static.cnbetacdn.com/thumb/article/2020/1208/2e8635471254d91.png?w=640&ssl=1)
Optimised Google Fonts loading with preconnect
![](https://i0.wp.com/static.cnbetacdn.com/thumb/article/2020/1208/8fd3ca093e5decb.png?w=640&ssl=1)
Optimised self-hosting fonts with preload
如果說最佳的性能表現是自行託管字體,那麼是什麼讓開發人員相信Google Fonts 的性能接近於自行託管?Google Fonts 設計在全球CDN 上分發,並能夠發揮緩存的優勢。用戶通過所述CDN 請求字體,很有可能他們已經從其他站點下載了字體資源。
不過自2020年10月發布的Chrome 86 版本開始,字體之類的跨站點資源不再可以在同一CDN 上共享。這是由於瀏覽器緩存已分區(Safari已經使用了多年)。Safari確實關心隱私。多年來,它一直繞過這種跨站點跟踪攻擊。然後終於有了Chrome。其他基於Chromium 的瀏覽器應該也會後續跟進。
![QQ截圖20201208095258.png](https://i0.wp.com/static.cnbetacdn.com/thumb/article/2020/1208/a51338a4e64bae1.png?w=640&ssl=1)
小結
無論是否將其緩存在CDN 上,都會為每個網站重新下載Google Fonts 資源。顯然,自託管字體能夠獲得更好的性能,而舊的性能參數不再有效。