【実録】WordPressのモバイルスコアを58 → 94 に上げた全工程を公開

【実録】WordPressのモバイルスコアを58 → 94 に上げた全工程を公開
目次

〜SWELLテーマ × シン・レンタルサーバーでの実践記録〜

まめすけ

ブログの表示速度が気になっているんだ。SEOにも影響あるよね?

まめすけ

でも何をしたらいいのかよくわかってないんだよね…

今回は実際にこのブログ「ウェブlog」のPageSpeed Insightsスコアをモバイルで58点から94点に改善した全工程をそのまま公開します。

大事なのは「やってみたら効果がなかった施策」も正直に記録していること。失敗も含めてリアルな検証記事です。

SWELLの導入をまだ検討中の方はこちらも参考にしてください。→ SWELLの評判・口コミを正直レビュー|Cocoonとの違いと乗り換えるべき人を徹底解説

まず結果から:Before / After

改善前1
改善前
ヘッダー画像最適化1(最終値)
改善後
指標改善前(Before)改善後(After)変化
総合スコア(モバイル)58点94点+36点
FCP(最初の描画)7.1秒1.1秒-6.0秒
LCP(最大要素の描画)9.2秒2.9秒-6.3秒
TBT(ブロック時間)20ms30msほぼ同じ
Speed Index7.1秒3.1秒-4.0秒
CLS(レイアウトずれ)00変化なし

PageSpeed Insightsのスコアは計測のたびに5〜10点程度ブレることがあります。複数回計測して傾向を見るようにしましょう。

検証環境

  • サーバー:シン・レンタルサーバー
  • WordPressテーマ:SWELL
  • 計測ツール:PageSpeed Insights(モバイル)
  • 計測ページ:トップページ

検証した施策と結果一覧

施策採用スコア変化ひとこと
TypeSquare Webfonts削除採用+1点使っていないプラグインは削除
スクリプト遅延読み込み ON不採用-2点メインビジュアルが遅くなった
Googleフォントをローカル配信(OMGF)採用+24点最大の効果!
手動フォントローカル配信比較用OMGFより-5点仕組み理解には最適
追加の調整が必要
Prefetch(ページ遷移高速化)不採用-11点PSIには逆効果
フッター・記事下の遅延読み込み不採用-20点トップページでは逆効果
メインビジュアル画像の最適化採用+11点1MBを軽量WebPに差し替え

実際行った6つの検証

検証①:TypeSquare Webfontsプラグインの削除

TypeSquare Webfonts無効化1
TypeSquare Webfonts無効化2
検証①後の数値

まず最初にやったのがプラグインの棚卸しです。インストール済みプラグインを見直したところ、「TypeSquare Webfonts for エックスサーバー」が有効になっていました。

このプラグインはXサーバー系列のWebフォントを読み込むためのものですが、SWELLのフォント設定を確認したところ「Noto Serif JP(Googleフォント)」を使っており、TypeSquareのフォントは実際には使われていませんでした。

確認方法
  • 外観 → カスタマイズ → フォント設定 を確認
  • TypeSquareのフォントが選択されていなければ → 不要
  • 一時的に無効化して見た目が変わらなければ → 削除OK

削除後の結果:スコア 58 → 59(LCPが9.2秒→8.1秒に改善)

検証②:スクリプト遅延読み込み(効果なし・むしろ悪化)

スクリプト遅延読み込み設定後1
スクリプト遅延読み込み設定後2
検証②の後数値

SWELL設定の「スクリプトを遅延読み込みさせる」をONにしてみました。PageSpeed Insightsでレンダリングブロックが5,400ms削減できると指摘されていたため期待していましたが…

結果:LCPが9.2秒→12.8秒(大幅ダウン)

結果はLCPが9.2秒→12.8秒と大幅悪化。メインビジュアルの読み込みに使うlazysizes.jsが遅延対象になってしまったことが原因と考えられます。

教訓:

「スクリプト遅延」はサイトの構成によって逆効果になることがある。SWELLのメインビジュアルを使っている場合は注意が必要。

検証③:Googleフォントのローカル配信(最大の効果)

このブログではSWELLのフォント設定で「Noto Serif JP」(Googleフォント)を使用しています。Googleフォントは外部サーバーから読み込むため、その通信コストがFCPを大幅に遅延させていました。

これを自分のサーバーから配信(ローカルホスティング)することで劇的に改善されました。

方法A:プラグイン「OMGF」を使う(採用)

Googleフォント読み込みの変更(OMGFパターン)1
Googleフォント読み込みの変更(OMGFパターン)2
検証③(OMGFパターン)後の数値

「OMGF | Host Google Fonts Locally」をインストールして有効化するだけ。自動でGoogleフォントを検出してサーバーに保存してくれます。

設定の流れ
  • プラグイン → 新規追加 → 「OMGF」で検索 → インストール・有効化
  • OMGF設定画面でNoto Serif JPが検出されていることを確認
  • 「Load Early」にチェック → Save & Optimize

結果:スコア 59 → 83(FCP 7.1秒 → 1.1秒!)

方法B:手動でフォントをローカル配信(比較用)

Googleフォント読み込みの変更(CSSパターン)1
Googleフォント読み込みの変更(CSSパターン)2
検証③(CSSパターン)後の数値

プラグインを使わず手動でやる場合の手順です。仕組みを理解したい方や、プラグインを増やしたくない方向け。

設定の流れ
  • https://gwfh.mranftl.com/fonts/noto-serif-jp でwoff2ファイルをダウンロード
  • wp-content/themes/swell/assets/fonts/ にアップロード
  • 追加CSSに @font-face を記述

結果:スコア 78(OMGFより-5点)。preload指定がない分、フォントの優先度が下がることが原因と考えられます。

OMGFはpreloadを自動で設定してくれるため、手動より優秀な結果になりました。

検証④:Prefetchの検証(効果なし)

Prefetch(ページの先読み込み)1
Prefetch(ページの先読み込み)2
検証④後の数値

SWELL設定の「ページ遷移高速化 → Prefetch」を有効にしてみました。リンクにマウスが乗った瞬間に次のページを先読みする機能で、実際のユーザー体感速度には効果があります。

結果:スコア83 → 72(大幅ダウン)

しかしPageSpeed Insightsのスコアは83 → 72と大幅ダウン。PrefetchのJSがレンダリングをブロックしているとPageSpeed Insightsが判断したためと思われます。

PageSpeed Insightsのスコアと実際のユーザー体験は別物です。Prefetchは体感速度には有効ですが、スコア改善目的には不向きということですね。

検証⑤:フッター・記事下の遅延読み込み(逆効果)

フッター読み込み遅延1
フッター読み込み遅延2
検証⑤後の数値

SWELL設定の「フッターを遅延読み込みさせる」「記事下コンテンツを遅延読み込みさせる」を試しました。

結果:スコア 83 → 63(大幅ダウン)

結果はスコア 83 → 63と大幅悪化。トップページではフッターのお問い合わせフォームなどがLCPの計算対象になってしまったことが原因と考えられます。

この設定は記事ページでは有効に働く可能性があります。トップページでの使用には注意が必要です。

検証⑥:メインビジュアル画像の最適化(大きな効果)

ヘッダー画像最適化1(最終値)
ヘッダー画像最適化2
検証⑥後の数値

最後に手をつけたのがメインビジュアル画像の最適化です。元の画像は以下のスペックでした。

  • サイズ:2000×979px
  • ファイルサイズ:約1MB
  • 形式:JPEG

これをSquoosh(ブラウザ上で簡単画像加工できます)で最適化してWebP形式で再アップロードしました。

  • 横幅:1200pxに縮小
  • 形式:WebP
  • ファイルサイズ:180KB(大幅削減)

結果:スコア 83 → 94(LCP 4.5秒 → 2.9秒!)

メインビジュアル1枚の差し替えだけでここまで変わるとは驚きでした。

まとめ:このサイトで効果があった施策

優先度施策難易度効果
★★★Googleフォントのローカル配信(OMGF)低(プラグインのみ)超大
★★★メインビジュアル画像の最適化低(画像差し替え)
★☆☆不要プラグインの削除

SWELLが標準で高速化の基盤をしっかり作ってくれているため、追加でやるべきことは意外とシンプルでした。

特にGoogleフォントのローカル配信は、Googleフォントを使っているWordPressサイトなら必須レベルの施策と言えます。

逆効果だった施策(注意!)

  • スクリプトの遅延読み込み → メインビジュアルが遅くなった
  • Prefetch → PageSpeed Insightsのスコアが下がった
  • フッター・記事下の遅延読み込み → トップページでは逆効果

「良さそう」に見えても、サイトの構成によっては逆効果になることがあります。必ず1つずつ変更して計測することが重要です。

おわりに

今回の改善作業を通じて一番学んだことは「計測→変更→再計測」を1つずつ丁寧に繰り返すことの大切さです。

PageSpeed Insightsのスコアは毎回5〜10点程度ブレるので、1回の計測で一喜一憂せず、複数回の平均で判断することも重要です。

この記事が同じようにサイト速度改善に取り組む方の参考になれば嬉しいです!

このサイトはテーマ「SWELL」を使っています

「SWELL」はWordpress初心者も慣れた人も使い続けられるテーマだと思います。

よかったらシェアお願いします!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

事業で使うサイトを企業に依頼し作成したものの、全く機能せず自分で作り直したのがきっかけでウェブの世界に飛び込む。
Wordpress、コーディング、マーケティングなどウェブlogにアウトプットすることで誰かの問題解決につながれば嬉しいです。

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

目次