サイトを本格的に公開する前に確認しておきたいのが、ページの表示速度です。
表示が遅いと読者が内容を見る前に離れてしまったり、SEOやアフィリエイトの成果にも影響する可能性があります。
表示が遅い原因は、画像、CSS、JavaScript、フォントなどさまざまです。
原因を自分で調べて対策するのは難しそうですが、ここでも生成AIを活用できます。
表示速度を測るツールの使い方から、測定結果の読み取り、原因の調査、実際の改善作業まで、生成AIに手伝ってもらいながら進めることができます。
この記事では、サイトの表示速度を測定する「Lighthouse」と「PageSpeed Insights」という2つのツールを使い、生成AIの案内に沿って高速化を進める方法を紹介します。
基本的な進め方は、通常のWordPressサイトでも静的サイトでも共通です。
後半では、静的サイトに特化した改善方法も紹介します。
サイト高速化は測定と改善を繰り返す
サイト高速化の基本的な手順は、以下のようになります。
- 測定する
- 測定結果から問題点を確認する
- 問題点に対する改善策を検討、修正する
- 再測定して効果を確認する
これを何度も繰り返します。
効果が出なかったり、逆に悪化したりということも珍しくありませんので、なかなか根気の必要な作業です。
一方で、結果が数値で確認できるため、達成感もあります。
LighthouseとPageSpeed Insightsの使い分け
サイトの速度を測る方法として、この記事では Lighthouse と PageSpeed Insights を使います。
LighthouseはCLI※で実行できるので、生成AIに測定から結果の確認まで手伝ってもらいやすく、高速化の作業中に繰り返し使うのに向いています。
※CLIを使ったことがない場合は「ブログ構築で使うCLIとは？生成AIと一緒に使うための基本を解説」で基本的な使い方を紹介しています。
ただし、Lighthouseの測定結果は、自分のPCの性能や実行時の環境などによって多少変わります。
そこで、ある程度改善できたら、最後にPageSpeed Insightsでも確認します。
PageSpeed Insightsでは、自分のPCとは別の環境から、Googleが用意した共通の条件に沿って測定できます。
そのため、
「自分のPCで測ったときだけ速いのではなく、一般的な基準でも十分に速いか」
を確認することができます。
この記事では、
高速化の作業中はLighthouseで繰り返し測定し、仕上げにPageSpeed Insightsで確認する
という使い分けで進めます。
生成AIと一緒に高速化を進める
Lighthouseを実行すると、スコアのほかにFCP、LCP、TBT、CLSといった指標や、改善できる項目が表示されます。
これらをすべて理解してから作業を始める必要はありません。
測定結果を生成AIへ渡し、効果が大きそうな項目から案内してもらいます。
AIに高速化を依頼するプロンプト
生成AIでブログ構築を進める際の基本的な伝え方については「生成AIをブログ構築の技術担当にする方法｜最初に伝える共通ルール」も参照してください。
その共通ルールに加えて、高速化では次のように依頼します。
Webサイトの表示速度をLighthouseで測定し、高速化したいです。
私のWebサイト、およびPC環境を確認し、必要な準備とLighthouseの実行方法から案内してください。
測定結果をもとに、効果が大きい項目から優先順位を付けて、具体的な改善方法を案内してください。
影響が大きい変更や問題の切り分けが必要な作業は段階的に進め、
影響が小さく関連する修正は、必要に応じてまとめて進めてください。
修正後は再度Lighthouseで測定し、改善されたことを確認しながら進めてください。このプロンプトを送ったら、あとは生成AIの案内に沿って作業を進めていきます。
最初にPCの環境を確認し、必要であればLighthouseを使うための準備から案内してくれます。
表示されたコマンドを実行し、その結果を生成AIへ返していけば、測定から改善まで作業を続けられます。
Lighthouseの測定結果が出ると、生成AIが改善できそうな項目を調べ、効果が期待できるものから修正方法を提案します。
修正後は再び測定し、実際に速くなったかを確認します。
この流れを繰り返していけば、高速化について詳しく知らなくても、効果を確認しながら改善を進めることができます。
ここまで紹介した「測定して、生成AIと一緒に改善する」という方法は、通常のWordPressサイトでも使えます。
次の章では静的化したサイトだからできる高速化の進め方を紹介します。
静的サイトは完成したファイルを直接直せる
通常のWordPressでは、誰かがページにアクセスするたびに、その場で表示するページを組み立てています。
ページを作るときには、WordPress本体だけでなく、テーマやプラグイン、追加したCSSなど、さまざまなルールが使われます。
そのため、どこかを修正しても、別のルールに上書きされて変更が反映されないことがあります。
この特徴が、WordPressサイトの高速化を難しくする要因の１つになっています。
一方、静的化したサイトでは、あらかじめ完成したページを作っておき、そのページをそのまま表示します。
完成しているページを直接修正するため、WordPress本体やテーマ、プラグインに修正内容を上書きされず、修正内容をそのまま反映させやすいのが特徴です。
なお、静的化の仕組みについては、「WordPressの静的化」で詳しく紹介しています。
ただし、静的ファイルを直接修正しただけでは、次にWordPressから静的化したときに、その変更は消えてしまいます。
そこで、効果を確認できた修正内容は、次回以降も自動で適用できるようにする必要があります。
効果があった修正は「後処理スクリプト」で自動化する
静的化の作業は記事を追加・更新するたびに必要になりますが、そのたびに高速化の修正内容を手作業で反映するのは大変ですし、作業漏れの恐れもあります。
そこで「静的化が終わったあとに必要な修正」を自動で行う後処理スクリプトというものを用意しておきます。
一連の高速化処理内容が決まったあとは、
- WordPressから静的化する
- 後処理スクリプトで高速化の修正を自動で行う
- 公開する
という流れにできます。
後処理スクリプトも、自分でプログラムを書く必要はありません。
生成AIに、効果が確認できた修正内容を整理して作ってもらいます。
後処理スクリプトを作るためのプロンプト
静的化したサイトに対して行った高速化の修正に効果がありました。
同じ修正を、今後の静的化でも自動で行えるように
後処理スクリプトを作ってください。
現在の静的ファイルと、これまでに行った修正内容を確認して、
必要な処理をまとめてください。
作成後は、正しく修正できていることを確認する方法も案内してください。
すでに後処理スクリプトがある場合は、
新しいものを増やさず、できるだけ既存のスクリプトへまとめてください。さらに自動化を進めるなら、「静的化が完了したことを検知し、自動的に後処理スクリプトを実行する」ということも可能です。
これも生成AIに聞いてみてください。
公開したらPageSpeed Insightsでも確認する
Lighthouseを使った改善が終わったら、サイトをWeb上へ公開し、PageSpeed Insightsでも測定してみます。
LighthouseとPageSpeed Insightsでは、少し結果が変わることもあります。
その場合も、PageSpeed Insightsの結果を生成AIへ渡して、
PageSpeed Insightsではこの結果になりました。
原因を調べて改善方法を案内してください。と相談すれば、そのまま改善を続けられます。
また、スコア100を取ること自体を目標にする必要はありません。
サイトの表示や使い勝手を壊さず、遅くなっている原因を減らしていくことを優先します。
実際に高速化した結果
私が運営している別サイト「ガジェット＆モデリング」でも、この手法で生成AIと高速化を進めました。
画像の読み込み方やCSSなど、測定結果で問題になっている部分を調べ、修正と再測定を繰り返しています。
最終的に、PageSpeed Insightsのモバイル測定では パフォーマンススコア：98 となっています。
このように、高速化の方法を詳しく知らなくても、測定結果を生成AIに渡しながら改善を続けることで十分に高速なサイトを目指せます。
まとめ
サイトの高速化というと難しそうですが、測定方法から改善方法まで生成AIに手伝ってもらえます。
まずLighthouseでサイトを測定し、結果を生成AIへ渡して改善します。
修正後に再測定し、効果があるか確認する、という手順を繰り返していきます。
この方法は通常のWordPressサイトでも使えますが、静的化サイトならさらに高速化がやりやすくなります。
効果が確認できた修正を後処理スクリプトへまとめれば、次回からは静的化するだけで同じ高速化を自動で適用できるようになります。
最後にPageSpeed Insightsで公開したサイトを確認すれば、一連の高速化作業は完了です。