FooBoxのGooglePagespeedInsights対策

【2020年6月8日 追記】
本サイトでも利用しているテーマ「Nishiki Pro」公式マニュアルに今回の題材を扱った対応方法が掲載されました。
プラグインの有無まで判断しているので、こちらの方がお勧めです。

アクションフックを使ったカスタマイズNishiki Pro：PageSpeed Insights の診断結果で「改善できる項目」に「キー リクエストのプリロード」が出てた場合、フックを使って preload を指定して表示を消す（改善）方法 | サポトピア「パフォーマンス スコアには直接影響しません（本ページ公開時点）」と書かれてても 気になる人はなってしまう、それが PageSpeed Insightssupport.animagate.com

本サイトでも、高性能で人気のあるギャラリー＆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”」を指定する必要があります。

Preloadに関する参考サイトrel="preload"を極めるために必要な2種類のプリロード機能 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]本稿はWebパフォーマンス Advent Calendar 2019の13日目に参加させていただきました。フロントエンドのパフォーマンスチューニングのシリーズ記事で、今回は2種類のプリロード機能に焦点を当ててリソース読み込みの最適化について解説します。はじめにまずはブラウザが持つ2種類のプリロード機能をおさらいしましょう。1つ目はHTMLの仕様として定義されている <link rel="pr…techblog.raccoon.ne.jp

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

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のコアを直接利用してるので便利なのですけど、日本語文字化けするんですよね･･･