Google Web フォントの読み込みが原因で発生したGoogle Pagespeedのインサイトから、「レンダリング ブロック ファイルとしてのスクリプト」エラーを削除しようとしています。インターネットから、 Web Font Loaderを使用してフォントを非同期にロードするように指示されます。次の JavaScript をフッターに配置しました。フォントは適切に読み込まれますが、ページ速度のインサイトの結果にレンダリング ブロック エラーが表示されます。
注: Font Render のブロック エラーは、モバイル テストでのみ表示され、デスクトップでは表示されません。
<script>
WebFontConfig = {
google: {
families: ['Archivo Narrow:300,400,700']
}
};
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.async = true;
s.parentNode.insertBefore(wf, s);
})(document);
</script>
編集:
body タグを閉じる前にスクリプトを追加しようとすると、引き続きレンダリング ブロック ファイル エラーが発生します。
<script>
WebFontConfig = {
google: {
families: ['Archivo Narrow:300,400,700']
}
};
(function(d) {
var wf = d.createElement('script'), s = d.scripts[0];
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
wf.async = true;
document.body.appendChild(wf);
})(document);
</script>