【検証】SWELLの速度設定を全部試したらむしろ遅くなった話

WordPressテーマSWELLの速度設定を検証した結果、遅くなったことを示すまめすけ
目次

〜スクリプト遅延・Prefetch・フッター遅延を実測〜

まめすけ

SWELLには速度改善のための設定がいろいろあるなぁ。
全部ONにしたら速くなるよね?!

そう思って試してみたら…全部逆効果でした。

このブログ「ウェブlog」でPageSpeed Insightsのスコア改善に取り組む中で、SWELLの高速化設定を1つずつ検証した結果を正直に公開します。

「設定をいじったら遅くなった」「何が原因かわからない」という方の参考になれば幸いです。

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

検証環境

  • サーバー:シン・レンタルサーバー
  • WordPressテーマ:SWELL
  • 計測ツール:PageSpeed Insights(モバイル)
  • ベーススコア:59点(TypeSquare削除後・OMGF導入前)

検証は1つずつ変更→キャッシュクリア→計測の順で実施しています。

検証結果サマリー

TypeSquare Webfonts無効化1
検証①前の数値
Googleフォント読み込みの変更(OMGFパターン)1
検証②、③前の数値
設定変更前変更後結果
スクリプトの遅延読み込み ON59点58点逆効果
Prefetch(ページ遷移高速化)83点72点逆効果
フッター・記事下の遅延読み込み ON83点63点大幅逆効果

3つ全て逆効果という衝撃の結果になりました。それぞれの原因と詳細を解説します。

検証①:スクリプトの遅延読み込み

設置場所

SWELL設定 → 高速化 → 遅延読み込み機能 → スクリプトの遅延読み込みさせる → ON

期待していた効果

PageSpeed Insightsで「レンダリングをブロックしているリクエスト — 推定削減時間5,400ms」と指摘されていました。JSを遅延読み込みにすることでこのブロックが解消されると期待していました。

実測結果

TypeSquare Webfonts無効化1
スクリプト遅延読み込み設定後1
指標変更前変更後変化
スコア59点58点-1点
FCP6.9秒7.4秒悪化
LCP8.1秒12.8秒大幅悪化
TBT10ms20ms悪化

原因の考察

LCPが8.1秒→12.8秒と大幅に悪化しました。

SWELLのメインビジュアル(ヒーロー画像)の読み込みに使われているlazysizes.jsが遅延対象に含まれてしまい、画像の表示が大幅に遅れたことが原因と考えられます。

SWELLのメインビジュアルを使っている場合、スクリプト遅延読み込みはLCPを悪化させる可能性が高いです。

検証②:Prefetch(ページ遷移高速化)

設置場所

SWELL設定 → 高速化 → ページ遷移高速化 → Prefetch を選択

期待していた効果

Prefetchはリンクにマウスが乗った瞬間に次のページを先読みする機能です。ユーザーがリンクをクリックする前に読み込みが始まるため、体感的なページ遷移速度の向上が期待できます。

実測結果

Googleフォント読み込みの変更(OMGFパターン)1
Prefetch(ページの先読み込み)1
指標変更前(OMGF導入後)変更後変化
スコア83点72点-11点
FCP1.1秒1.8秒悪化
LCP4.5秒8.8秒大幅悪化
TBT50ms100ms悪化

原因の考察

スコアが83→72と11点も下がりました。

PrefetchのためのJSがページ読み込み時に追加で実行されることで、レンダリングへの影響が出たと考えられます。

PageSpeed Insightsはあくまで「最初のページ読み込み」を計測するツールのため、2ページ目以降の先読みを目的とするPrefetchの効果は計測されず、むしろJSの追加負荷がマイナス評価につながります。

Prefetchは実際のユーザー体験(ページ遷移の速さ)には効果があります。PageSpeed Insightsのスコアと実体験は別物という点は意識しておくと良いでしょう。

検証③:フッター・記事下コンテンツの遅延読み込み

設置場所
  • SWELL設定 → 高速化 → 遅延読み込み機能 → 記事下コンテンツを遅延読み込みさせる → ON
  • SWELL設定 → 高速化 → 遅延読み込み機能 → フッターを遅延読み込みさせる → ON
期待していた効果

フッターや記事下のコンテンツはユーザーがすぐ見る部分ではありません。これらの読み込みを後回しにすることで、ファーストビューの表示が速くなると期待していました。

実測結果

Googleフォント読み込みの変更(OMGFパターン)1
フッター読み込み遅延1
指標変更前(OMGF導入後)変更後変化
スコア83点63点-20点
FCP1.1秒3.4秒大幅悪化
LCP4.5秒9.7秒大幅悪化
Speed Index3.3秒5.9秒大幅悪化

原因の考察

スコアが83→63と20点もの大幅悪化。

これが今回の検証で最も衝撃的な結果でした。

このブログのトップページにはフッター内にお問い合わせフォームが設置されています。遅延読み込みを有効にするとこのフォームの読み込みが後回しになり、PageSpeed InsightsがこれをLCPの対象として計測してしまったことが原因と考えられます。

トップページにフォームや大きなコンテンツがフッターに含まれている場合、遅延読み込みは逆効果になる可能性が高いです。

なぜ「良さそうな設定」が逆効果になるのか

今回の検証を通じて学んだことは、速度改善の設定は「サイトの構成に依存する」ということです。

一般的なWordPressサイトで効果的な設定でも、SWELLの独自機能(メインビジュアル・記事スライダー・キャッシュ機能など)と組み合わさると、想定外の干渉が起きることがあります。

特にSWELLで注意が必要なケース

特にSWELLで注意が必要なケース
  • メインビジュアル(ヒーロー画像)を使っている → スクリプト遅延は要注意
  • トップページにフォームや重いウィジェットがある → フッター遅延は要注意
  • SWELL独自のキャッシュ機能を使っている → 他のキャッシュプラグインと競合することも

速度改善の正しいアプローチ

今回の失敗から学んだ、速度改善に取り組む際の鉄則を紹介します。

① 必ず1つずつ変更する

複数の設定を一度に変更すると、どれが原因で変化したかわからなくなります。1つ変更 → キャッシュクリア → 計測、のサイクルを守りましょう。

② キャッシュクリアを忘れない

設定変更後にキャッシュが残っていると正確な計測ができません。SWELLのキャッシュクリアとキャッシュプラグインのクリアを両方やることが重要です。

③ 複数回計測して平均を見る

PageSpeed Insightsのスコアは計測のたびに5〜10点程度ブレます。1回の結果で判断せず、2〜3回計測して傾向を見ましょう。

④ スコアより各指標を見る

総合スコアより、FCP・LCP・TBTなどの個別指標を見た方が原因が特定しやすいです。どの指標が悪化したかを確認することで、何が問題かが見えてきます。

まとめ:SWELLで逆効果だった設定3つ

設定推奨理由
スクリプトの遅延読み込みOFF推奨メインビジュアルのLCPが悪化
Prefetchスコア目的ならOFFPSIスコアは下がるが体感速度は上がる
フッター・記事下の遅延読み込みOFF推奨フッターのコンテンツがLCPに影響

SWELLはデフォルト状態でもかなり高速化されているテーマです。むやみに設定を変えるより、Googleフォントのローカル配信や画像最適化など、根本的な原因に取り組む方が効果的でした。

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

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

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

この記事を書いた人

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

コメント

コメントする

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

目次