はじめに：テーマは完成した。でも、なんか遅い
AIで自作テーマを作ったときは、正直めちゃくちゃ嬉しかったです。
自分だけのデザイン、カテゴリごとの色分け。そしてブロモン。見た目は大満足でした。
……でも、スマホで自分のブログを開いたとき、気づいてしまったんです。
「なんか、もたつく」
画像がワンテンポ遅れて表示される。ページを移動するたびに少し待たされる感じ。
友達に見せたら「ちょっと重くない？」と言われたのがとどめでした。
見た目は作れたけど、「速さ」は別問題だった。 ここから僕の高速化との戦いが始まりました。
この記事でわかること
- 「どれくらい遅いのか」を数字で知る方法
- AIに相談しながら原因を切り分けた手順
- 実際にやった高速化施策4つ（失敗込み）
- モバイルの横スクロール問題を直した話（番外編）
- ビフォーアフターのスコア比較
結論：計測→AIに相談→1つずつ試す、の繰り返しで改善できた
先に結論です。
| 施策 | 効果 | 難易度 |
|---|---|---|
| 画像の最適化（圧縮・lazy load） | ◎ 一番効いた | ★☆☆ |
| キャッシュプラグインの導入 | ○ 体感でわかる | ★★☆（設定ミスで崩れた） |
| 不要なCSS / JSの整理 | ○ じわじわ効く | ★★☆ |
| フォント読み込みの最適化 | △ 地味だけど効果あり | ★☆☆ |
やったことは特別なことじゃなくて、PageSpeed Insightsの指摘を1つずつAIに聞いて対処しただけです。ただし途中で設定ミスで表示が崩れたり、CSS削りすぎてデザインが壊れたりと失敗もしっかりしました。
以下、時系列で紹介していきます。
まず「どれくらい遅いのか」を数字で知るところから
感覚で「遅い」と言っても始まらないので、まず計測しました。
PageSpeed Insightsで測ってみた
PageSpeed InsightsにブログのURLを入れるだけ。無料で、誰でも使えます。
結果を見て、ちょっと凹みました。
モバイルのスコアが特にひどかった。スマホで見ている読者が大半なのに、これはまずい。
レポートの見方（素人なりに読み解いた）
PageSpeed Insightsは「何が遅いか」も教えてくれます。僕のサイトで指摘されていたのは、こんな項目でした。
| 指摘内容 | 素人翻訳 |
|---|---|
| 「適切なサイズの画像を配信してください」 | アイキャッチが無駄にデカい |
| 「使用していないCSSを削減してください」 | 読み込んでるけど使ってないコードがある |
| 「レンダリングを妨げるリソースを排除してください」 | フォントやJSの読み込みが遅い |
| 「テキストの圧縮を有効にしてください」 | サーバー側の設定が足りない |
……正直、最初は何を言っているのかわからなかったです。でもこの指摘をそのままAIに貼り付ければいいということに気づいてからは、話が早くなりました。
AIに相談しながら原因を切り分けた
PageSpeedの指摘画面をスクショして、Claudeにこう聞きました。
PageSpeed Insightsで以下の指摘を受けました。
WordPress自作テーマの場合、
それぞれどう対処すればいいか初心者向けに教えてください。
1. 適切なサイズの画像を配信してください
2. 使用していないCSSを削減してください
3. レンダリングを妨げるリソースを排除してください
4. テキストの圧縮を有効にしてください
AIは各指摘に対して「何が原因で、どう直すか」を具体的に教えてくれました。ここで大事なのは、AIの回答を鵜呑みにせず、1つずつ試すこと。一度に全部やると、何が効いたのか（何が壊したのか）がわからなくなります。
プロンプトの書き方のコツについては、プロンプトの書き方を変えたら結果が変わった話で詳しく紹介しています。
実際にやった高速化施策（時系列＆失敗込みで）
施策① 画像の最適化
これが一番効きました。
原因は単純で、アイキャッチ画像が無駄にデカかったんです。カメラで撮った画像をそのままアップしていて、1枚3〜5MBのものもありました。ブログのアイキャッチなんて200KB以下で十分なのに。
やったことは3つ。
| やったこと | 使ったもの |
|---|---|
| 画像の圧縮 | EWWW Image Optimizer（プラグイン） |
| 適切なサイズで書き出し | 幅1280px以下にリサイズ |
| 遅延読み込み（lazy load）の導入 | WordPress標準のlazy load + テーマ側の設定 |
特にlazy load（画面に表示されるタイミングで画像を読み込む）は、ページを開いた瞬間の速度が体感でわかるレベルで改善しました。
施策② キャッシュプラグインの導入
キャッシュプラグイン（WP Fastest Cache）を入れました。
キャッシュというのは、一度生成したページをサーバーに保存しておいて、次のアクセス時にすぐ返す仕組みです。これだけでページの表示速度がかなり改善されるはず……だったんですが。
入れたら表示が崩れました。
具体的には、CSSが正しく読み込まれないページが出てきて、デザインがガタガタに。原因はキャッシュプラグインのCSS結合機能が、自作テーマのCSSファイルの読み込み順序と相性が悪かったこと。
対処法は、プラグインの設定で「CSSの結合」をオフにして、「ページキャッシュ」だけ有効にすること。キャッシュプラグインは「入れれば速くなる」のではなく、設定を合わせる必要があるという学びでした。
※WP Fastest Cacheの設定画面のスクリーンショット
施策③ 不要なCSS / JSの整理
自作テーマを作る過程で、試行錯誤しながらいろんなCSSやJavaScriptを追加していました。でもその中に、もう使っていないコードがけっこう残っていたんです。
Claudeに「このテーマで使われていないCSSルールを特定してほしい」と頼んで、不要なものを削除していきました。
ただし、ここで削りすぎてデザインが崩れた失敗もありました。「このCSS使ってないでしょ」と思って消したら、特定のページだけで使っていたスタイルだった、というパターン。
教訓は、削除する前に必ずGitでコミットしておくこと。いつでも戻せる状態にしてから作業すれば、ミスっても怖くない。
施策④ フォント読み込みの最適化
ヒトブログではGoogle Fontsの日本語フォント（Zen Maru Gothicなど）を使っています。日本語フォントは英語フォントに比べてファイルサイズが大きいので、これが読み込み速度に影響していました。
やったことは2つ。
| 対策 | 内容 |
|---|---|
font-display: swap の設定 | フォント読み込み中はシステムフォントで表示して、読み込み完了後に切り替える |
| preconnect の追加 | Google Fontsのサーバーに事前接続して、フォントの読み込み開始を早める |
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
これもPageSpeed Insightsの結果画面をClaudeになげて返ってきた回答をそのまま実行しただけです笑
地味な施策ですが、これで「フォントが遅れて切り替わる」チラつきが改善されました。
【番外編】以前ハマった「モバイルの横スクロール問題」
高速化とは直接関係ないですが、表示崩れで一番苦労したエピソードも紹介します。
ある日、スマホで自分のブログを開いたら、画面が横にスクロールできてしまうことに気づきました。本来スマホでは縦スクロールだけのはずなのに、左右にもスライドする。
「なんだこれ？」と思って、Chrome DevTools(F12)の「デバイスツールバー」でスマホ表示をシミュレーション。画面からはみ出している要素を探しました。
このサイトをスマホで表示すると横スクロールできちゃう。
以下のHTMLとCSSを見て、
画面幅からはみ出している要素を特定してください。
AIに聞いたところ、width: 100vw を使っていた要素が原因でした。100vwはスクロールバーの幅も含むので、スクロールバーのないスマホでも微妙にはみ出す場合がある。width: 100% に変更したら解決しました。
「ツールで原因を見える化すると、初心者でも自力で直せる」という大事な学びでした。
※Chrome DevTools(F12)でモバイル表示をシミュレーションしている画面のスクリーンショット
ビフォーアフター：スコアはどう変わったか
すべての施策を終えた後、もう一度PageSpeed Insightsで計測しました。
| 指標 | 改善前 | 改善後 |
|---|---|---|
| モバイルスコア | 20点 | 72点 |
| デスクトップスコア | 70点 | 98点 |
| FCP | 7.5秒 | 0.9秒 |
| LCP | 10.7 | 0.9秒 |
数字ももちろんですが、一番うれしかったのは体感速度の変化。スマホでブログを開いたとき、パッとページが表示されるようになったんです。あのもたつき感がなくなった。
正直、まだ完璧ではないです。モバイルスコアはもう少し改善の余地がある。でも「自分で測って、自分で直した」という経験は、次に何か問題が起きたときにも活きると思います。
まとめ：サイトは作って終わりじゃなく、速さも含めて育てるもの
| ステップ | やること |
|---|---|
| ① | PageSpeed Insightsでスコアを測る |
| ② | 指摘内容をAIに貼って対処法を聞く |
| ③ | 1つずつ施策を試す（一度に全部やらない） |
| ④ | 改善後にもう一度測る |
| ⑤ | 崩れたら戻す（Gitで管理しておく） |
高速化は難しそうに見えるけど、計測 → AIに相談 → 1つずつ試すの繰り返しで改善できます。
デザインを自作した人ほど、速度のチューニングも自分でできると強い。
「見た目も速さも自分で作った」と言えるのは、かなり嬉しいです。
・関連記事
この記事の前編。テーマ自作の全体像はこちら！
・テーマ改善シリーズの次回作はこちら！
・キャッシュ系プラグインも紹介
・AIへの指示の出し方を改善するコツ
コメントを残す