PageSpeed Insightsの警告を解消する

ウェブページの読み込み時間の評価と読み込み時間を短くする方法を提示してくれる「PageSpeed Insights」。
WordPressデフォルトのまま制作したサイトをこれで検証すると、ほぼ何らかの警告が出ます。皆さんの中には経験ある方もいるのではないでしょうか？
まあ警告が出たところですぐに問題を直さなければならない、ということではありませんが、心血を注いで作った自信のサイト！ひととおりのSEO対策も済ませた！ってタイミングで、最後の砦で速度改善にたどり着き、PageSpeed Insightsの検証にかけたところ、思いっきり警告が出まくった、ってなると、悔しくてどうにかしたいと思いますよね。

そこで今回はこのPageSpeed Insightsの警告を解消する方法についてご紹介したいと思います。
　
　
といっても常にアップデートをしてメンテナンスしているWordPressサイトにおいては、プラグイン「Autoptimize」をインストールして自社のサイトに合わせて設定をおこなえば、だいたいのことは解決することができます。
これから説明する手順についても、このプラグインの設定ひとつでできてしまうものもあります。したがって、最新の「Autoptimize」プラグインをインストールできるサイトでは、まずはAutoptimizeの利用でライトに対応してみることをオススメしたいです。
　
　
それでは、ここからは、PHP、WordPressのバージョンが訳あって古く、最新の「Autoptimize」がインストールできなかったサイト運営者向けに、PageSpeed Insightsの警告の対応を自力でやる方法をご紹介したいと思います。
　
警告の種類はいくつかありますが、今回はメジャーな次の3点について対処していきます。

• 次世代フォーマットでの画像の配信
• オフスクリーン画像の遅延読み込み
• レンダリングを妨げるリソースの除外

　
それではひとつひとつ説明をしていきます。

「次世代フォーマットでの画像の配信」警告の解消

最新のブラウザは画像の次世代フォーマット「WebP」に対応しています。
したがって、画像のフォーマットを jpg, png から WebP に変換することで、この警告を解消をすることにします。
といっても、管理画面からアップロードする画像までWebPに変換しようとするとさすがに面倒なので、今回はテーマ内のimagesディレクトリにある画像についてのみ対応しようと思います。
変換するツールは結構ありますが、今回はこれを使います。
https://saruwakakun.com/tools/png-jpeg-to-webp/
UIもシンプルで好感が持てます。これを使って元画像をWebPフォーマットに変換し、元画像と同じディレクトリにアップします。

次に、背景画像などCSSで画像を参照しているところは、一斉置換で .jpg, .png を .webp に直しましょう。

そして、テーマのfunctions.phpに以下を追記します。

function imagepassshort($arg) {
  if (strpos($arg, 'uploads/') === false) {
    $content = str_replace('.jpg"', '.webp"', $content);
    $content = str_replace('.png"', '.webp"', $content);
    return $content;
  } else {
    return $arg;
  }
}

add_action('the_content', 'imagepassshort');

これで、管理画面からアップロードする画像は対象外として、コンテンツエディタで記述したHTML内の .jpg と .png ファイルをすべて .webp に変換してくれます。

ここでサイトを確認してみましょう。

これまでjpg,pngファイルだった画像がwebpに置き換えられていればOKです。

「オフスクリーン画像の遅延読み込み」警告の解消

これはlazyloadを設定すれば良いだけです。
モダンブラウザは「loading=”lazy”」と書くだけで遅延読み込みしてくれますので、全imgタグを対象に置換をかけます。

テーマのfunctions.phpに以下を追記します。

function entrycontent_img_async($content)
{
  $content_with_class = preg_replace('/(<img[^>]*class=")([^"]*)/', '$1$2" decoding="async" loading="lazy"', $content);
  $content_no_class = preg_replace('/(<img[^>]*)(?<!class)(>)/', '$1 decoding="async" loading="lazy"$2', $content_with_class);
  return $content_no_class;
}

add_filter('the_content', 'entrycontent_img_async');

これで画像を非同期読み込み、遅延読み込みしてくれるようになります。

「レンダリングを妨げるリソースの除外」警告の解消

1. CSSを1行にまとめる
   CSSをまとめるツールは、コードエディタの機能やプラグインも含めるととてもたくさんありますが、今回はこのツールで最小化してもらうことにします。
   https://www.toptal.com/developers/cssminifier
   まとめるCSSの数はできるだけ多いほうが良いです。
   ただし、全コードまとめて貼り付けて変換かけてしまうと、記述（読み込み）順番なども入れ替えてまとめてしまうので、期待するレイアウトが出せなくなる可能性もあります。そのため、ちょっと面倒ですが、ひとつひとつツールにかけて最小化し、最後に手動でつなげるようにします。
   これを minified.css とし、body閉じタグ前で読み込まれるようにします。
   そして、今までのCSS参照行をコメントアウトします。
   こうすることで、順番としてはHTML読み込み後にCSSが参照されることになります。
2. ファーストペイントのCSSを切り出して先読みさせる
   この状態でページをロードしてみると分かりますが、ロードのとき一瞬、レイアウトが組みあがってない状態が見えてしまいます。スタイルを後で読んでいるからです。このカッコ悪い状態を回避するために、ファーストペイント（ファーストビュー）のスタイルだけ取り出して、コンテンツより先に読まれるように、headタグに記述する必要があります。

   ファーストペイントのCSSを取り出すのは以下のツールがオススメです。
   https://jonassebastianohlsson.com/criticalpathcssgenerator/
   対象のページのURLとさっき作ったminified.cssを貼り付けると、ファーストペイントのところのスタイルだけが出てきますので、それをheadタグにインラインでペタッと貼り付けます。（インラインで貼り付けろ、というPageSpeed Insightsの推奨です）
   このとき、背景画像参照の相対パス（『../』など）のところは

   <?php echo get_template_directory_uri(); ?>
   

   に変更するなどして、パスの不整合が起こらないようにしましょう。

3. ファーストペイントのメイン画像をプリロードする　
   ここまででPageSpeed Insightsにかけると、次のような警告が現れると思います。

   「LCP 要素がページに動的に追加された場合、LCP を改善するため画像をプリロードする必要があります。」

   ファーストペイントでメインとなる大きな画像などは先読みさせてください、という警告のようです。
   言われるまま、当該画像を先読みさせるようにしましょう。
   headタグ内に以下のような感じで対象の画像を先読みさせる記述を追記します。

   <link rel="preload" as="image" href="background.webp">
   

   これで「レンダリングを妨げるリソースの除外」警告は消えます。

　
これで3つの警告は対処できたはずです。
PageSpeed Insightsにかけてみましょう。

－－－

どうでしたか？
評価がかなりきれいになったのではないかと思います。
　
PageSpeed Insightsはあくまでもサイト表示速度評価の一つの指標に過ぎませんが、せっかくGoogleがシステムまで用意して人のサイトの検証をしてくれているわけなので、やっておいたほうが良いに決まってますよね。たぶん。
ぜひみなさんもトライしてみてください。
　
PS.
この調子で他の警告にも対応したいという方は、あとは自力で頑張ってみてください。
それでは！

---