如何在不損害網站頁面速度的情況下在我的網站上使用谷歌字體

Question

我使用谷歌字體和我的網站的排版。 看起來很棒，但它增加了很大的開銷。 有沒有辦法我可以在不影響網站速度的情況下為我的網站獲得相同的外觀和感覺？

我在這里分析我的網站https://developers.google.com/speed/pagespeed ，當我使用谷歌字體時，我的分數大約為60，但如果我刪除這些字體，那么我的分數很高。 有沒有辦法在不影響網頁質量的情況下使用這些字體？ 我的首要任務是頁面優化。

Answer 1

簡答：不。 稍微長一點的答案：不，你可以試試，但你不可能超越Google WebFonts已經提供給你的東西。 現在讓我們再解剖一下這個問題......

首先，如果添加一個外部資源（webfont）對你的PageSpeed得分產生負面影響，你必須有一個相當輕的頁面 - 可以說，我們應該在PageSpeed方面解決這個問題。 現在，回到webfonts！

接地零：向頁面添加任何外部資源將對頁面的整體性能產生負面影響。 使用webfonts，這可能是一個更大的問題，因為CSS被認為是一個“關鍵資源”，它將阻止呈現直到字體到達 - 如果我們跳過這一步，那么用戶可能會得到“閃爍的無格式內容”（ FOUC），頁面用一種字體呈現，然后在字體到達時重新設置。 這是一種不和諧的體驗 - 你絕對不希望這樣。

第二步：使用webfont意味着我們必須包含一個外部CSS文件 - 在這種情況下，由Google服務器提供服務。 這些服務器針對低延遲進行了大量優化，但與此同時，這里沒有任何魔力 - 它仍然需要一些時間！

第3步：CSS文件中有什么內容？ 這是很多人批評Google WebFonts的地方..樣式表提供了對webfont文件的url()引用。 為什么不用base64 /內聯字體？ 好吧，Google WebFonts每天都會在數十億頁面上呈現，因此我們選擇使用URL，因為該字體很可能位於瀏覽器的緩存中 。 如果您使用冷緩存刷新頁面（如您所願）以測試第一頁加載，那么您將始終獲取字體..但這不是我們正在優化的體驗。

此外，為什么不將字體內嵌到頁面中？ 好吧，每個平台都有不同的文件格式（woff，eot，ttf等），Google WebFonts根據您當前的平台動態提供最優化的格式 。 如果您只是下載WebFont（例如，woff）並內聯它，那么它可能適合您，但不適合您在不同平台上的訪問者。 此外，這些字體背后的壓縮總是在不斷改進 - 如果您堅持使用Google服務器，您將自動繼承這些改進。 如果你自己滾動，那么你就被困住了。

簡而言之：如果您想自己動手，那么請確保優化每個平台的字體，基於平台提供條件字體，並隨着時間的推移跟上壓縮改進。 如果你可以做到這一切，那么你可能會比提供的更好。 :-)

---

最后但並非最不重要的。 不要害怕使用webfonts 。 是的，他們增加了額外的時間，但演示也很重要。 這是你的電話。 如果強加的延遲是不可接受的，那么堅持使用默認字體。 但試圖擊敗谷歌WebFonts基礎設施/ CDN不太可能讓你走得太遠。

PS最后一個提示：確保您實際使用了所包含的所有重量和字體。 許多人選擇整個家庭（以防萬一），最終根本不使用它們，在某些瀏覽器上會導致不必要的下載。

Answer 2

是的你可以。

1. 下載您的谷歌網絡字體文件
2. 將它們上傳到字體squirrel web generator
3. 選擇專家設置並勾選：Base64 CSS。
4. 通過base64加載字體時，您不會等待外部http調用完成。
5. 這將刪除無格式內容Flash（FOUC）

參考： https ： //robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/您可以在線查找許多其他文章。 我也在我的網站上試過它，它的確有效。