[プロンプトエンジニア]

使える場面、状況の想定

GoogleのPageSpeed InsightsでWordPressサイトの速度を測ってみたけれど、表示された改善項目が「レンダリングを妨げるリソースの除外」や「次世代形式での画像の配信」といった専門用語ばかりで、結局どこから手をつければいいのか分からず、立ち止まってしまった状況を想定しています。
まずはツールが出した「難しい診断結果」をコピーしてAIに渡し、現状を共有しましょう。

解決プロンプト

WordPressサイトの高速化をしたいのですが、PageSpeed Insightsの携帯電話の診断結果で、以下のようなメッセージが出ています。

---

First Contentful Paint 5.8 秒
Largest Contentful Paint 8.2 秒
Total Blocking Time 70 ミリ秒
Cumulative Layout Shift 0
Speed Index 6.1 秒

レンダリングをブロックしているリクエスト 推定される削減時間 410 ミリ秒
リクエストがページの最初のレンダリングをブロックしているため、LCP が遅れる可能性があります。これらのネットワーク リクエストを遅らせるかインライン化すると、クリティカル パスから移動できます。
URL　転送サイズ　継続時間
your-domain-web.com　68.0 KiB　4,960 ms
…jquery/jquery-migrate.min.js?ver=3.4.1(your-domain-web.com)　5.3 KiB　300 ms
…jquery/jquery.min.js?ver=3.7.1(your-domain-web.com)　31.7 KiB　1,050 ms
…min/main-1200.css?ver=0.0.1(your-domain-web.com)　19.2 KiB　1,350 ms
…css/frontend.css?ver=3.2.7(your-domain-web.com)　0.5 KiB　450 ms
…eme-child/style.css?ver=0.0.1(your-domain-web.com)　2.0 KiB　450 ms

---

この問題で、スコアを改善できる可能性がある「プラグイン」や、WordPress上の「設定変更」の案を提示してください。
作業にあたっての注意点やリスクなどがあれば併せて教えてください。

AIの回答例

PageSpeed Insights の内容を見る限り、主に以下がボトルネックになっています。

• jquery.min.js
• jquery-migrate.min.js
• CSS（main-1200.css / style.css など）
• Elementor系っぽい frontend.css

つまり、1. JavaScript の読み込み順、2. CSS のレンダーブロック、3. 不要な jQuery 依存、この3点を改善すると、かなりスコア改善できる可能性があります。

---

まず優先順位

優先	内容	効果
★★★★★	CSS の遅延/クリティカルCSS	LCP改善大
★★★★★	jQuery Migrate 無効化	軽量化
★★★★☆	JS defer/delay	レンダリング高速化
★★★★☆	Elementor最適化	DOM/CSS削減
★★★☆☆	キャッシュ/圧縮	全体底上げ

---

おすすめプラグイン

1. 最優先：WP Rocket

最も失敗しにくく、効果が大きいです。
WP Rocket公式サイト

有効化したい設定：
・CSS を縮小化 → ON / 未使用 CSS を削除 → ON
・JavaScript を遅延読み込み → ON / JavaScript の実行を遅延 → ON
・LazyLoad → ON / キャッシュプリロード → ON

---

2. 無料なら LiteSpeed Cache

サーバーが LiteSpeed の場合はかなり強いです。
LiteSpeed Cache公式サイト

特に重要：
・CSS Minify / Generate UCSS / Load CSS Asynchronously → ON
・JS Delay → ON

---

3. jQuery Migrate を削除

現在これが読み込まれています：jquery-migrate.min.js?ver=3.4.1
これは「古いテーマ・プラグイン互換用」で、高速化では定番の改善ポイントです。
Remove jQuery Migrate公式ページ

---

Elementor を使っている場合の重要設定

設定項目	推奨
Improved Asset Loading	有効
Improved CSS Loading	有効
Inline Font Icons	有効
Optimized DOM Output	有効

---

安全な進め方

推奨手順：
STEP1：バックアップ（UpdraftPlus等）→ STEP2：キャッシュ系プラグイン導入 → STEP3：CSS最適化のみON → STEP4：JS defer/delay ON → STEP5：jQuery Migrate削除

※JS Delayで除外が必要になりやすいもの：jquery, elementor, gtag, recaptchaなど。除外しすぎると効果が下がります。

ポイント解説

PageSpeed Insightsは、一度に多くの警告メッセージを表示しますが、全てを一度に解決しようとせず、AIと1項目ずつ向き合うのが近道です。
中には、特定のプラグインを導入・設定するだけで大幅にスコアが改善するものもあります。まずは1つずつAIに投げかけ、自分のサイトに合った対策の選択肢を洗い出しましょう。

注意点

PageSpeed Insightsのスコア改善は、サイトの構成、テーマやサーバー環境によって原因が複雑に絡み合うため、プロのエンジニアでも試行錯誤を繰り返す難易度の高い作業です。
事前にバックアップをとり、AIの提案を試しても上手くいかない項目は深追いせず、一通りの警告に対して、可能な範囲で対応していくのがおすすめの方法です。

[投稿者]

投稿