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

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

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

目次

対策後のスコア

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

携帯電話のスコア

デスクトップのスコア

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

モバイルのページエクスペリエンス

パソコンのページエクスペリエンス

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

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

PageSpeed Insights

SWELL設定

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

【高速化】画像等のLazyload

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

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

画像等のLazyload

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

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

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

スクロールできます
imgタグの違い
loading="lazy" <img loading="lazy" src="https//……>
スクリプト(lazysizes.js) <img class="lazyloaded" src="https//……>

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

スクリプトの遅延読み込み機能を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

あわせて読みたい
EWWW Image OptimizerでWebP配信する方法 EWWW Image OptimizerでWebP(ウェッピー)配信する方法をまとめておきます。 【EWWW Image Optimizerの特徴】 先にEWWW Image OptimizerでWebP配信する時の特徴をまと...

デザインを見直す

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

不要なものがないか確認
  • 不要なプラグインを削除する
  • 不要なウィジェットを削除する
  • 携帯電話(スマホ)表示で不要なものは条件分岐で非表示にする

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

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

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

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

レンタルサーバー

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

最初のサーバー応答時間を速くしてください

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

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

あわせて読みたい
エックスサーバーのPHPを最新の推奨バージョンに変更する方法 エックスサーバーのPHPを最新の推奨バージョンに変更する方法をまとめておきます。 【PHP Ver.を見直す理由】 PHPのバージョンは、WordPressをインストールした際に設定...

このブログの設定

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

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

キャッシュ機能

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

キャッシュ機能

スクロールできます
キャッシュ機能 設定
動的なCSSをキャッシュする
ヘッダーをキャッシュする
サイドバーをキャッシュする なし
下部固定メニューをキャッシュする
スマホ開閉メニューをキャッシュする
トップページコンテンツをキャッシュする
内部リンクのブログカードをキャッシュする
外部リンクのブログカードをキャッシュする
ブログカードのキャッシュ期間 30日

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

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

ファイルの読み込み

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

ファイルの読み込み

スクロールできます
ファイルの読み込み 設定
SWELLのCSSをインラインで読み込む
コンテンツに合わせて必要なCSSだけを読み込む なし
フッター付近のCSSを遅延読み込みさせる なし

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

遅延読み込み機能

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

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

遅延読み込み機能

スクロールできます
遅延読み込み機能 設定
記事下コンテンツを遅延読み込みさせる なし
フッターを遅延読み込みさせる なし
画像等のLazyload loading="lazy"を使用する
スクリプトの遅延読み込み
スクリプトの遅延読み込み機能をオフにするページ なし
遅延させる秒数 4秒

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

ページ遷移高速化

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

ページ遷移高速化

ページ遷移高速化 設定
高速化の種類 使用しない

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

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

jQueryの読み込み

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

jQueryの読み込み

jQueryの読み込み 設定
jQueryをwp_footerで登録する
jquery-migrateを読み込まない
jQueryを強制的に読み込む なし

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

SWELLの機能

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

SWELLの機能

スクロールできます
SWELLの機能 設定
「ページ表示時のアニメーション」を停止する

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

リセット

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

キャッシュのクリア

最後に

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

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

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

コメント

コメントする

目次