爲谷歌Insights加載谷歌字體非封鎖方式

我試圖通過谷歌網頁速度的見解，而我無法通過「在摺疊內容中消除渲染阻止JavaScript和CSS」，因爲Google字體正在加載。 Google Insights中的任何建議似乎都不適用於這種情況：內嵌css，使用媒體查詢等。我甚至嘗試與WebFontLoader異步加載網絡字體，但它仍被「洞察」所捕獲。爲谷歌Insights加載谷歌字體非封鎖方式

我會想象應該有一個簡單的修復方法，而不是做一些愚蠢的修飾，例如設置加載字體的超時時間（對於記錄種類的作品;-)）。

UPDATE

包裝用的WebPack Web字體顯然也是工作，但我不知道這是「正確」的解決方案。

來源

2016-09-06 konrad

我解決這個「渲染阻塞」通知的方式是加載谷歌字體的網址與JavaScript/jQuery的。

您例如設置：

$('head').append("<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>);

到.js文件，你將加載作爲

<script src="your.js" async></script>

來源

2017-01-21 00:33:22 Kyobul

你只是做'Insights'無法檢測渲染阻擋。您不是在解決渲染阻止本身，而是在頁面加載速度和用戶體驗方面略微加劇。這就像切割捲尺一樣，因爲它讓你意識到你剛創建的傢俱不適合其指定的空間。這不會使傢俱適合。 –

我可以不同意你的看法。誘騙Pagespeed分析並不是一種客觀的方式，也不會像您呈現方式那樣欺騙它。對手/異步腳本足夠快，只需完成這項工作。您認爲動態字體選擇器如何工作？至少在我的網站上，我沒有發現有改變的用戶體驗。最後，Pagespeed對此感到滿意。 – Kyobul

爲谷歌Insights加載谷歌字體非封鎖方式

回答

相關問題