【SWELL】高速化とPageSpeed Insightsのスコアを改善する方法

このブログでPageSpeed Insightsのスコア改善に効果のあったSWELLの設定をまとめておきます。

対策後のスコア

このブログのトップページは、対策前のスコアが携帯電話は60前後、デスクトップは80前後だったのですが、SWELL設定と画像を少し見直すことで、どちらも90前後まで改善することができました。

また、Google Search Consoleのページエクスペリエンスが良好なURLも100%に改善されました。

個別ページについてはまだまだ改善の余地があるのですが、トップページのスコアはサイト全体にも影響していることがほとんどなので、スコアを改善するために行った設定をまとめておこうと思います。

但し、同じ施策をしたからといってスコアが上がるとは限りません。また、設定を変更した時は、ご自身でもスコアの確認とレイアウト崩れがないかを必ず確認して下さい。

PageSpeed Insights

SWELL設定

管理画面のSWELL設定から変更できる項目です。

【高速化】画像等のLazyload

動作に支障がなければ、画像の遅延読み込みは「スクリプト(lazysizes.js)」がおすすめです。

管理画面 ▶ SWELL設定 ▶ 高速化 ▶ 遅延読み込み機能

WordPressデフォルトの機能「loading="lazy"を使用する」では、SWELLのブログカードや広告タグで挿入した画像のimgタグにloading="lazy"が挿入されません。多様しているページでは、スコアが落ちてPageSpeed Insightsの改善できる項目に「オフスクリーン画像の遅延読み込み」が表示されます。

スコアに影響が出ないページもありますが、万能なのは「スクリプト(lazysizes.js)」の方です。

但し、画像の遅延読み込みと相性の悪いプラグイン（Twenty20 Image Before-After等）もあるので、正常に動作しない時は「loading="lazy"を使用する」を選択して下さい。

【高速化】スクリプトの遅延読み込み

スクリプトの遅延読み込み機能をONにして、遅延読み込みさせたいスクリプトのキーワードを入力します。

管理画面 ▶ SWELL設定 ▶ 高速化 ▶ 遅延読み込み機能

このブログでは、携帯電話のスコアが30前後改善されたので、SWELLで極端にスコアが低い方は確認してみることをおすすめします（デスクトップのスコアはそこまで影響がなかった）。

詳しい使い方は、「スクリプトの遅延読み込み」機能の使い方についてで確認できますが、実際の設定例でも紹介されている下記のキーワードを追加するだけでもスコアは改善されるはずです。

また、PageSpeed Insightsの「レンダリングを妨げるリソースの除外」や「使用していない JavaScript の削減」で広告やプラグインのJavaScriptがあれば、キーワードを追加して遅延読み込みさせるとスコアが改善します。

但し、遅延読み込みさせることで正常に動作しなくなるスクリプトもあるので、実際にサイトを表示した時に違和感を感じるのであれば、スクリプトの遅延読み込みをOFFにする及び対象のキーワードを削除して下さい。

遅延させる秒数は（僕は）4秒に設定しています。

「スクリプトの遅延読み込み」機能の使い方について | WordPressテーマ SWELL

【機能停止】ページ表示時のアニメーションを停止する

画面がふわっと表示されるお洒落な機能をOFFにします（チェックを入れる）。

管理画面 ▶ SWELL設定 ▶ 機能停止 ▶ SWELLの機能

この機能を停止させるだけでもスコアは5前後改善されました。SWELL公式サイトでもOFFになっています。

カスタマイザー

SWELLのカスタマイザーから変更できる項目です。

【トップページ】スライダーを設置しない

スライダーを設置している場合は、スライダーを外すとスコアが改善される可能性があります。

カスタマイザー ▶ トップページ ▶ 記事スライダー

このブログでは、携帯電話のスコアが10前後改善されました（デスクトップはほとんど影響なし）。

デザインの問題なので、スコア改善のためだけに外す必要はないと思いますが、僕の様にスライダーに設置した記事のアクセスが増えている訳ではない＆なんとなくお洒落っぽいから設置しているだけなら、スライダーを外す及びピックアップバナーに切り替える方法を検討してみて下さい。

ピックアップバナー機能の使い方 | WordPressテーマ SWELL

【基本デザイン】フォント設定

フォント設定は、「游ゴシック」または「ヒラギノゴシック > メイリオ」を選択します。

カスタマイザー ▶ サイト全体設定 ▶ 基本デザイン ▶ フォント設定

初期設定は「游ゴシック」になっているので、変更していなければ設定不要ですが、「Noto Sans JP」及び「明朝体（Noto Serif JP）」に変更している場合は、PageSpeed Insightsの「レンダリングを妨げるリソースの除外」に下記の第三者リソースが表示されて、スコアが大幅に落ちる可能性があります。

WordPress

SWELLの設定ではありません（全てのテーマ共通）。

画像の最適化

PageSpeed Insightsの改善できる項目に「適切なサイズの画像」や「次世代フォーマットでの画像の配信」が表示されている時は、画像を最適化するとスコアが改善される可能性があります。

テーマに依存する部分もありますが、ウィジェットに配置しているプロフィール画像や背景画像、メインビジュアルの画像等が無駄に大きすぎないか確認してみて下さい。また、最適化ツールを使って画像を圧縮する及び次世代フォーマットの画像（WebP）で配信する方法でファイルサイズを小さくすることもできます。

オンラインイメージ最適化ツール | Optimizilla

デザインを見直す

シンプルに不要なもの削除するだけでスコアが改善される可能性があります。

まずは、SWELL公式サイトで推奨プラグインと非推奨・不要・注意すべきプラグインを確認して下さい。

他のテーマからSWELLに変更した場合は、プラグインの機能とSWELLに最初から実装されている機能が重複している可能性があります。また、SWELLの高速化機能だけでも十分スコアは改善できるので、キャッシュ系のプラグインは必要ないと思います（スコアが下がる＆不具合が起きる可能性の方が高い）。

他にも、サイドバーのウィジェットは、スマホでは画面の一番下に追いやれれてしまうので、不要であれば、条件分岐を利用してスマホで非表示にするとスコア改善に繋がる可能性があります。

推奨プラグインと非推奨・不要・注意すべきプラグインについて | WordPressテーマ SWELL

レンタルサーバー

スコア改善の対策をしたにも関わらず、改善できる項目に「最初のサーバー応答時間を速くしてください」が頻繁に表示される場合は、レンタルサーバーが原因の可能性もあります。

常に表示されている場合は、PHPのバージョンやプラグインの可能性もありますが、表示されたり、されなかったりの場合は、高速を謳っているレンタルサーバー及び上位のプランへの変更も検討してみて下さい。

僕が使っているエックスサーバーのスタンダードプランでは、ほとんど表示されることはありません。

このブログの設定

SWELL設定の高速化機能を利用する時は、必ずご自身のサイトにあった設定を選択して下さい。

とりあえず全て有効にしておけばいいや！では、サイトの表示が崩れる可能性があります。また、他人のサイトの設定が必ずしもご自身のサイトの最適な設定になるとは限らないので注意して下さい。

キャッシュ機能

このブログでは、サイドバーに設置した「最近のコメント」ウィジェットの最新コメントが反映されなくなったので、「サイドバーをキャッシュする」だけ無効にしています。

SWELLで使用できるキャッシュ機能について | WordPressテーマ SWELLには、下記のように記載されているので、全てにチェックを入れて、正常に動作しなくなったエリアはOFFにして下さい。

特別なカスタマイズや独自の高速化などを行っていなければ、全てオンにすることをおすすめします…！

ファイルの読み込み

このブログでは、「SWELLのCSSをインラインで読み込む」のみチェックを入れています。

動作に支障がなければ、「コンテンツに合わせて必要なCSSだけを読み込む」にもチェックを入れた方がスコアは改善されると思いますが、このブログでは（プラグインで実装した）ウィジェットの分岐や一部のプラグインが動作しなくなったのでOFFにしています。

遅延読み込み機能

このブログでは、「コンテンツの遅延読み込み」を有効にすると、（プラグインで実装した）ウィジェットの条件分岐が効かなくなったので、どちらもOFFにしています。また、「スクリプト(lazysizes.js)」を使うと、画像比較系のプラグインのレイアウトが崩れたので、コアのLazyloadを使用しています。

効果の高い「スクリプトの遅延読み込み」のキーワードは、公式サイトの実際の設定例を参考にしました。

PageSpeed Insightsのスコア改善には、「スクリプトの遅延読み込み」の設定は必須だと思います。

ページ遷移高速化

このブログでは、「Prefetch」を使用するとスコアが落ちたので、ページ遷移高速化は使用していません。

ページ遷移高速化機能（pjax）の使い方と注意点 | WordPressテーマ SWELLにも下記のように記載されているので、必要なければOFF推奨です。

あくまでもページの「遷移」が高速化するだけのものです。ファーストビュー時の表示速度は速くならない（むしろ、読み込むスクリプトが増える）ことに注意してください。

jQueryの読み込み

このブログでは、「jQueryを強制的に読み込む」だけOFFにしています。

ただ、「jQueryをwp_footerで登録する」を有効にすると、上手く動作しないプラグインもありました。

SWELLの機能

このブログでは、「ページ表示時のアニメーション」を停止させています。また、Lightbox系のプラグインを使っているので、「投稿画像をクリックで拡大表示する機能」も停止させています。

必要なければ、「ページ表示時のアニメーション」を停止させるだけでもスコアは若干改善されます。

リセット

キャッシュの設定を変更した時は、リセットからキャッシュのクリアも忘れないで下さい。

最後に

テーマSWELLを使っている方で、PageSpeed Insightsのスコアを改善させたい方は、まずはSWELLに最初から実装されている高速化機能を設定してみることをおすすめします。特に、Google AdSenseやGoogle Analyticsを使用している方は、スクリプトの遅延読み込みを設定するだけでスコアは大幅に改善されるはずです。

但し、高速化する時の最適な設定はサイトによって異なります。

このブログを含め他人のサイトを参考にする時は、必ずご自身のサイトでもスコア改善に繋がっているのか？表示崩れ等の不具合が起きていないか？を確認するようにして下さい。