【2020年6月8日 追記】
本サイトでも利用しているテーマ「Nishiki Pro」公式マニュアルに今回の題材を扱った対応方法が掲載されました。
プラグインの有無まで判断しているので、こちらの方がお勧めです。
本サイトでも、高性能で人気のあるギャラリー&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のコアを直接利用してるので便利なのですけど、日本語文字化けするんですよね・・・
【2020年7月28日】
AMP化は言及してませんが、いい感じのプラグイン見つけました!