はじめ
税理士事務所のホームページを自作して約半年。何も知らないところからWordPressとSWELLテーマで始めて、月間PV1万を達成しました。
その過程で最も苦労したのが、サイトの表示速度の最適化です。
「速いはずなのに、なぜか不安定」という謎の状態から、試行錯誤の末にCore Web VitalsのLCP良好率90%を達成するまでの実体験を、技術的な視点から共有します。
この記事はこんな方向けです
– WordPressでサイトを自作している方
– SWELLテーマを使っている方
– Cloudflareを導入したが効果が実感できない方
– PageSpeedのスコアは良いのに実際のパフォーマンスが不安定な方
最初の状態:「速いはずなのに不安定」
#導入前の構成
– CMS: WordPress
– テーマ: SWELL
– サーバー: 共有レンタルサーバー サクラインターネット
– WebP化 EWWW Image Optimizer
不思議な現象
Google PageSpeed Insightsのスコア:
– デスクトップ: 90〜100点
– モバイル: 90〜100点
体感速度:
– 自分のPCでは十分速い
– 知人に見てもらっても「速いですね」と言われる
しかしGoogle Search Consoleのデータ(実際のユーザー体験):
– LCP良好率: 70%程度で不安定
– だんだん悪化していく
– 何が原因か分からない
この時点で気づいたこと:PageSpeedのスコアと実際のユーザー体験は別物ということです。
Cloudflare導入:失敗したと思った瞬間
なぜCloudflareを導入したか
Core Web Vitalsの改善を調べると、必ず出てくるのがCDN。特にCloudflareは:
– 無料プランでも高機能
– DNS設定だけで導入できる
– 世界中にサーバーがある
「これを入れれば安定するだろう」と期待して導入しました。
導入直後の衝撃
自分のPC(高性能):
– LCP: 0.3〜0.4秒(爆速!) 最終0.3
– 体感: ページが一瞬で表示される
しかし数日後のGoogle PageSpeed InsightsとSearch Consoleデータ:期待してみてみると
– LCP良好率: むしろ下がった
– 悪い評価のユーザーが増えた
– 一部で4〜6秒という異常値*率直な感想:
「失敗した。元に戻そうか…」
なぜ遅い人が増えたのか(後から分かった理由)
Cloudflareは平均を速くするCDNですが、導入初期は:
1.キャッシュが温まっていない
– 初回アクセス時はオリジンサーバーに取りに行く
– CDNを経由する分、むしろ遅くなることもある
2. PoP(配信拠点)の自動選択が安定していない
– 最適な配信サーバーの選択に時間がかかる
3. TLS接続の初回オーバーヘッド
– セキュリティ通信の確立に時間がかかる
つまり:もともと遅い環境のユーザーほど、初期のオーバーヘッドをもろに受ける**構造でした。
さらなる地雷:WebPプラグインとの相性問題
サイトを速くしたいと思い、画像をWebP形式に変換するプラグインも導入していました。
WebPとは
– 次世代の画像フォーマット
– JPEGやPNGより30〜50%ファイルサイズが小さい
– 画質はほぼ同じ
しかし問題が発生
SWELLテーマは最初から:
– `<picture>`タグによる最適な画像配信
– `srcset`と`sizes`による レスポンシブ対応
– LCP画像(最初に表示される大きな画像)の優先読み込み
をテーマ側で完璧に制御**しています。
ところが、WebPプラグインの中には:
– HTMLを書き換える
– JavaScriptで画像を差し替える
– 強制的に遅延読み込み(lazy load)を適用する
ものがあり、SWELLの精密な制御を台無しにすることが分かりました。
SWELL+Webp の最終設定
JS Webp リライト は SWELLの高速設定を混乱させLCP 0.3が出てしまうが古いノートパソコンでは５秒以上が増えてしまいました。
結果として起きたこと
– 速い環境の人: さらに速くなった(キャッシュが効いて)
-遅い環境の人: 異常に遅くなった(複雑な処理が増えて)
– Core Web Vitals: 不安定(75パーセンタイル値が悪化)
体感の変化:「ピカッ」から「ヌルッ」へ
試行錯誤の末、以下のように設定を整理しました:
やめたこと
– WebPプラグインのHTML書き換え機能
– WebPプラグインのJavaScript介入
– Cloudflareの過度な最適化設定
残したこと
– WebP変換自体(形式変換のみ)
– 画像の表示制御はSWELLに完全委任
– CloudflareはDNSとキャッシュのみ
体感の変化
変更前:
– ページを開くと「ピカッ」と一瞬で表示
– 派手で気持ちいい
– でも不安定
変更後:
– ページを開くと「ヌルッ」と滑らかに表示
– 地味な感じ
– 特に何も起きない
正直な感想:
「前の方が速く感じたな。また失敗したかも…」
データが語った真実
設定変更から数日後、恐る恐るGoogle Search Consoleを確認しました。
Core Web Vitals (CrUX – Chrome User Experience Report)
LCP(Largest Contentful Paint – 最大コンテンツの表示速度)
– 良好: **90%**
– 改善が必要: 8%
– 不良: 3%
今まで一度も見たことのない数値でした。
検証方法
①グーグルクロームでサイトを開く
②サイトの画面で右クリックして一番下の【検証】クリック
③右側にいろいろ出るので【パフォーマンス】を選択
④ 【Ctrl＋F５】
【エッジ】の場合は【開発者ツールで調査する】 ２つ目の画像です ’【Ctrl＋F５】
実測データ(自宅のPC3台で検証)
| PC環境 | CPU | LCP実測値 |
| メインPC | Ryzen 1700 | 0.5から 0.6秒前後 |
| サブPC | Core i5-4460 | 0.8から 1.0秒前後 |
| 古いノート | Core i5-6300U | 1.2から 1.5秒前後 |
CPU性能に比例した極めて素直な分布
これが構成が正しいときの挙動だと理解しました。
なぜ「ヌルッ」が正解なのか
Core Web Vitalsが評価するもの
– 瞬間最大風速ではない
– 派手さでもない
75パーセンタイル(下位25%を除いた最も遅い値)の安定性
つまり:
– 速い人がより速くなっても評価は変わらない
– 遅い人が異常に遅くなると評価が下がる
-全体の安定性**が重要
「ピカッ」と「ヌルッ」の違い
「ピカッ」(最適化しすぎた状態):
– 高性能環境では爆速
– しかし低性能環境では処理が重い
– 結果、全体の75パーセンタイル値が悪化
「ヌルッ」(適切に最適化した状態):**
– どの環境でも安定して動作
– 特別速くないが、特別遅くもない
– **何も起きないことが最強**
学んだこと:技術編まとめ
1. PageSpeedのスコアを信用しすぎない
– PageSpeed Insightsはシミュレーション
– Search ConsoleのCore Web Vitalsは**実際のユーザーデータ(RUM – Real User Monitoring)
– 見るべきはRUM(実データ)
2. WebPは「変換だけ」にする
やるべきこと:
– 画像をWebP形式に変換
やってはいけないこと:
– HTMLの自動書き換え
– JavaScriptによる画像差し替え
– テーマの画像制御への介入
SWELLを使っているなら、表示制御は完全にテーマに任せ
3. CDNは「盛らない」
Cloudflare導入時のルール:
– 初期は設定を触らない
– 異常値が出ても慌てて削除しない(キャッシュが温まるまで待つ)
– 「これも有効にしたら速くなるかも」という誘惑に負けない
.4. 遅い人を”消そう”としない
間違った考え:
「遅い人はごく一部だから、無視して速い人をより速くしよう」
正しい考え:
「遅い人も必ず存在する。その人たちを異常に遅くしないことが全体の安定につながる」
5.体感とデータがズレたら、データを信じる
自分の環境では「前の方が速かった」と感じても、実際のユーザーデータが改善していればそれが正解。
日本語情報が少ない理由
この視点の情報が日本語で少ない理由は:
1. Lighthouse(PageSpeed)信仰が強い
– スコア90点以上を目指す記事ばかり
2. RUM(実ユーザーデータ)の読み方が共有されていない**
– Search Consoleのデータの見方を解説する記事が少ない
3. 「速く見せる」話ばかり
– 「遅い人を増やさない」視点がない
これは海外(特にGoogle Chrome チーム)の思想に近い考え方です。
現在の状況
設定変更から約2ヶ月:
– LCP良好率: 安定して85〜92%
– 月間PV: 約1万 （サイト運営から６月後）
– 検索順位: 「尼崎 税理士」で上位表示
何も起きない、安定したサイト運営ができています。
最後に
WordPressサイトの高速化は、派手な数字や体感速度ではなく、全体の安定性が重要だと学びました。
特にSWELLのような高機能テーマを使う場合:
– テーマの設計思想を理解する
– 余計なプラグインで介入しない
– データ(RUM)を信じる
この3つが成功の鍵でした。
同じように試行錯誤している方の参考になれば幸いです。
関連する設定や具体的なプラグインについては、別記事で解説予定です。
