これから Nishiki Pro
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る
  1. ホーム
  2. マニュアル
  3. Nishiki Pro:PageSpeed Insights の診断結果で「改善できる項目」に「キー リクエストのプリロード」が出てた場合、フックを使って preload を指定して表示を消す(改善)方法

Google が提供する PageSpeed Insights を使ってウェブサイトのパフォーマンス改善の目安にする方もいると思います。

今回は、下の画像のように「改善できる項目」に「キー リクエストのプリロード」が出てた場合に、この表示を消す(改善する)カスタマイズ方法の一例を紹介します。

「パフォーマンス スコアには直接影響しません(本ページ公開時点)」
と書かれてても、気になっちゃう人は気になっちゃう
注意!

このカスタマイズは、PHP でコードが書けたり、ワードプレスのカスタマイズ知識や技術をある程度持っている上級者向けです。

カスタマイズ用のプラグインを作ったり、子テーマを作って functions.php 内にコードを追記するなどで実装してください。

サンプルコード

さっそくですがサンプルコードです。

下のコードは FooBox (無料版)という、ギャラリー表示に便利なプラグインを使った場合を想定しています。

使用しているプラグインや、プリロード対象となっているファイルに合わせてコードをカスタマイズしましょう。

if( ! function_exists( 'nishiki_pro_custom_preload' ) ) {

 function nishiki_pro_custom_preload() {
  // is_plugin_active を使えるようにするため読み込んでおく
  include_once( ABSPATH . 'wp-admin/includes/plugin.php' );

  // プラグインが有効かどうかをチェック
  if( is_plugin_active( 'foobox-image-lightbox/foobox-free.php' ) ){
   $url = WP_PLUGIN_URL . '/foobox-image-lightbox/free/css/font/foobox.woff';
   printf( '<link rel="preload" href="%s" as="font" type="font/woff" crossorigin>' . "\n", esc_url( $url ) );
  }
 }

 add_action( 'wp_head', 'nishiki_pro_custom_preload', 10 );
}

コード中の大事なところにコメントを書いておいたのですが、プラグインが有効かどうかをチェックして wp_head にフックしているだけですね。

コードがわかる方にとっては超簡単です。

preload の書き方は rel="preload" によるコンテンツの先読み を読むとわかりやすいです。

ちなみに上のコードでは、preload で woff を指定していますが、type 属性に font/woff または font/woff2 どちらを指定しても特に問題はなかったのですが、正式にはどっちなんでしょうかね。どっちも正しい、とかもありそうなのですが、何かわかり次第追記します。

このページが役に立ちましたら、ぜひシェアしてください。

WordPress テーマ Nishiki Pro

「ウェブサイト運営に本当に必要とされる機能」をテーマ内にまとめて搭載した WordPress テーマです。

ブロックエディター機能を強化し、これまでの WordPress では難しかったコンテンツが簡単に作れます。

ブログ、ポートフォリオ、コーポレートサイト、ビジネスサイトなど、様々な目的のウェブサイトに対応できるテーマです。