FooBoxのGooglePagespeedInsights対策

Wordpress//
  1. ホーム
  2. Wordpress
  3. FooBoxのGooglePagespeedInsights対策

本サイトでも、高性能で人気のあるギャラリー&Lighrboxプラグインの「FooGallery、FooBox」を利用しています。

「FooBox」を利用することにより、「Google Pagespeed insights」で、「FooBoxが利用しているウェブフォントを優先的に読み込ませてください」と改善項目が表示されます。

実際、FooBoxを外すとモバイルスコアが10程上がりますので、結構影響しているのかなという状況です。

対策内容

結果

改善項目からは消えますが Google Pagespeed Insights のスコアは改善しません。
(読み込み自体はしているからでしょうか。)

また、何でもかんでも「Preload」すれば良いというものでもないと思うので、気にされる方が設定をする位でよろしいのではないかと思います。

記載前の改善項目が・・・
対策をすることにより、改善項目からは消えます。

ウェブサイトに記載するコード

改善できる項目の内容に従い、preloadをヘッダーに記載します。

<link rel="preload" href="https://exsample.com/foobox.woff" as="font" type="font/woff2" crossorigin>

「href」の部分は実際に提示されたURLを記述します。
私も不勉強で知らなかったのですが、WebFontの場合、「crossorigin」または「crossorigin=”anonymous”」を指定する必要があります。

アクションフックを使って記載してみる。

WordPressでは、状況によりアクションフックの利用を推奨しています。
また今回のようにユーザーがカスタマイズする場合は、アクションフックを利用することにより、「functions.php」に集約することが出来るので利便性が上がると思います。

以下は本サイトで利用している「Nishiki Pro」での設定を記載します。

//ヘッダーにプリロード追加
function link_preload_webfont() {
echo '<link rel="preload" href="https://exsample.com/foobox.woff" as="font" type="font/woff2" crossorigin>'."\n";
}
add_action('nishiki_pro_meta','link_preload_webfont');

もっとスマートに改善する方法が見つかりましたら、追記するか新しく記事を書きたいと思います。

関係ないですが、AMPに対応して軽くていいSyntaxHighlightプラグインないですかね・・・
Syntax-highlighting Code Block (with Server-side Rendering)」はWordpressのコアを直接利用してるので便利なのですけど、日本語文字化けするんですよね・・・