このブログでPageSpeed Insightsのスコア改善に効果のあったSWELLの設定をまとめています。
高速化するメリット
SWELLの高速化を行うことで、PageSpeed Insightsのスコアを改善できます。
![PageSpeed Insightsのスコア](https://affilabo.com/wp-content/uploads/2022/09/40275e44854f39ff3dc6c1d75bfb37f0.png)
また、Google Search Console「ページエクスペリエンス」の良好URLが改善されます。
![モバイルのページエクスペリエンス](https://affilabo.com/wp-content/uploads/2022/09/d504d1190308dc2fc798b483621b9d87.png)
但し、高速化してスコアで100点を取っても、SEOで有利になるとは限りませんし、「スコアが高い = ページの表示速度が速い」とは限らないので、そこまでスコアに拘る必要はないと思います。
また、検索エンジンで上位表示されているサイトを調べてみると分かりますが、スコアが真っ赤でも上位表示されているサイトはたくさんありますから、上位表示目的で対策に時間をかけるのもおすすめしません。
個人的には、致命的なエラーやすぐに改善できる項目は対策すべきだと思いますが、キャッシュ系のプラグインを追加してまで改善する必要はないと思います。また、サイトによって最適な設定は異なりますから、他のサイトで紹介されている設定を真似しても、スコアが上がるとは限らない点にも注意して下さい。
SWELL設定
管理画面の「SWELL設定」から変更できる項目です。
このブログの設定を紹介しますが、必ずご自身のサイトにあった設定を選択して下さい。
![](https://affilabo.com/wp-content/uploads/2023/07/6b9d287df4493c11de01e13fb172d392-300x200.png)
キャッシュ機能
全てにチェックを入れて、正常に動作しなくなったエリアはOFFにして下さい。
![キャッシュ機能](https://affilabo.com/wp-content/uploads/2022/09/3501c9c9b50f1ccfaf8ad83b0c31dfc5.png)
キャッシュ機能 | 設定 |
---|---|
動的なCSSをキャッシュする | ✔ |
ヘッダーをキャッシュする | ✔ |
サイドバーをキャッシュする | なし |
下部固定メニューをキャッシュする | ✔ |
スマホ開閉メニューをキャッシュする | ✔ |
トップページコンテンツをキャッシュする | ✔ |
内部リンクのブログカードをキャッシュする | ✔ |
外部リンクのブログカードをキャッシュする | ✔ |
ブログカードのキャッシュ期間 | 30日 |
このブログでは、サイドバーに設置した「最近のコメント」ウィジェットの最新コメントが反映されなくなったので、「サイドバーをキャッシュする」だけ無効にしています。
特別なカスタマイズや独自の高速化などを行っていなければ、全てオンにすることをおすすめします…!
SWELLで使用できるキャッシュ機能について | WordPressテーマ SWELL
ファイルの読み込み
このブログでは、「SWELLのCSSをインラインで読み込む」にのみチェックを入れています。
![ファイルの読み込み](https://affilabo.com/wp-content/uploads/2022/09/9a90d917e11741b5c215b8c0b39ea3fe.png)
ファイルの読み込み | 設定 |
---|---|
SWELLのCSSをインラインで読み込む | ✔ |
コンテンツに合わせて必要なCSSだけを読み込む | なし |
フッター付近のCSSを遅延読み込みさせる | なし |
動作に支障がなければ、「コンテンツに合わせて必要なCSSだけを読み込む」にもチェックを入れた方がスコアは改善されますが、このブログではウィジェットの分岐が効かなくなったのでOFFにしています。
遅延読み込み機能
このブログでは、コンテンツの遅延読み込みを有効にすると、(プラグインで実装した)ウィジェットの条件分岐が効かなくなったので、どちらもOFFにしています。また、「スクリプト(lazysizes.js)」を使うと、画像比較系のプラグインのレイアウトが崩れたので、コアのLazyloadを使用しています。
スクリプトの遅延読み込みは、公式サイトの実際の設定例を参考にしました。
![遅延読み込み機能](https://affilabo.com/wp-content/uploads/2022/09/d7fb6c852ded1b57c97231fa7a9354e6.png)
遅延読み込み機能 | 設定 |
---|---|
記事下コンテンツを遅延読み込みさせる | なし |
フッターを遅延読み込みさせる | なし |
画像等のLazyload | loading="lazy"を使用する |
スクリプトの遅延読み込み | ✔ |
スクリプトの遅延読み込み機能をオフにするページ | なし |
遅延させる秒数 | 5秒 |
twitter.com/widgets.js,
instagram.com/embed.js,
connect.facebook.net,
assets.pinterest.com,
googletagmanager.com/gtag/js,
gtag(,
set_urlcopy.min.js,
luminous.min.js,
set_luminous.min.js,
rellax.min.js,
set_rellax.min.js,
prism.js,
PageSpeed Insightsのスコア改善には、「スクリプトの遅延読み込み」の設定は必須です。
また、PageSpeed Insightsの「レンダリングを妨げるリソースの除外」や「使用していない JavaScript の削減」でスコアを下げているスクリプトがあれば、キーワードを追加して遅延読み込みさせるとスコアが改善します。
但し、遅延読み込みさせることで正常に動作しなくなるスクリプトもあるので、実際にサイトを表示した時に違和感を感じるのであれば、スクリプトの遅延読み込みをOFFにする及び対象のキーワードを削除して下さい。
![](https://affilabo.com/wp-content/uploads/2023/07/27233f54de5cfa5cbb3e98d936b3deac-300x200.jpg)
ページ遷移高速化
このブログでは、「Prefetch」を使用するとスコアが落ちたので、ページ遷移高速化は使用していません。
![ページ遷移高速化](https://affilabo.com/wp-content/uploads/2022/09/ff47635a8d46deec6f26d5e3aaa6c628.png)
ページ遷移高速化 | 設定 |
---|---|
高速化の種類 | 使用しない |
公式サイトにも下記のように記載されているので、必要なければOFF推奨です。
あくまでもページの「遷移」が高速化するだけのものです。ファーストビュー時の表示速度は速くならない(むしろ、読み込むスクリプトが増える)ことに注意してください。
ページ遷移高速化機能(pjax)の使い方と注意点 | WordPressテーマ SWELL
jQueryの読み込み
このブログでは、「jQueryを強制的に読み込む」だけOFFにしています。
![jQueryの読み込み](https://affilabo.com/wp-content/uploads/2022/09/bd5990d01004c4a42f62d105b2bfaf4d.png)
jQueryの読み込み | 設定 |
---|---|
jQueryをwp_footerで登録する | ✔ |
jquery-migrateを読み込まない | ✔ |
jQueryを強制的に読み込む | なし |
ただ、「jQueryをwp_footerで登録する」を有効にすると、上手く動作しないプラグインもありました。
SWELLの機能の停止
このブログでは、「ページ表示時のアニメーション」を停止させています(他の設定は全て初期設定のまま)。
![SWELLの機能](https://affilabo.com/wp-content/uploads/2022/09/66b42e0b4974a3cfb4bb50d3da07fcaa.png)
SWELLの機能 | 設定 |
---|---|
「ページ表示時のアニメーション」を停止する | ✔ |
必要なければ、「ページ表示時のアニメーション」を停止させるだけでもスコアは若干改善されます。
リセット
SWELL設定を変更した時は、リセットから一度キャッシュをクリアして下さい。
![キャッシュのクリア](https://affilabo.com/wp-content/uploads/2022/09/70f57f2a352605d8c13f736592d7bb40.png)
他の設定も同様、設定の変更が反映されない時は、一度キャッシュを削除してみて下さい。
WordPressの設定
SWELLの設定だけで改善されない時は、WordPressの設定を見直してみて下さい。
画像の最適化
PageSpeed Insightsの改善できる項目に「適切なサイズの画像」や「次世代フォーマットでの画像の配信」が表示されている時は、画像を最適化するとスコアが改善されます。
![適切なサイズの画像](https://affilabo.com/wp-content/uploads/2022/09/6a55d360b3bc8ee7a108aaa63180e880.png)
テーマに依存する部分もありますが、ウィジェットに配置しているプロフィール画像や背景画像、メインビジュアルの画像等が無駄に大きすぎないか確認してみて下さい。また、最適化ツールを使って画像を圧縮する及び次世代フォーマットの画像(WebP)で配信する方法もあります。
![](https://affilabo.com/wp-content/uploads/2022/09/69a3cb6473856bf3dd1cd238b8baf017-300x200.jpg)
不要なプラグインやウィジェットを削除する
シンプルに不要なもの削除するだけでスコアが改善される可能性があります。
- 不要なプラグインを削除する
- 不要なウィジェットを削除する
- 携帯電話(スマホ)表示で不要なものは条件分岐で非表示にする
まずは、SWELL公式サイトで推奨プラグインと非推奨・不要・注意すべきプラグインを確認して下さい。
他のテーマからSWELLに変更した場合は、プラグインの機能とSWELLに最初から実装されている機能が重複している可能性があります。また、SWELLの高速化機能だけでも十分スコアは改善できるので、キャッシュ系のプラグインは必要ないと思います(スコアが下がる&不具合が起きる可能性の方が高い)。
他にも、サイドバーのウィジェットは、スマホでは画面の一番下に追いやれれてしまうので、不要であれば、スマホ用のウィジェットを設定する及び条件分岐を利用してスマホで非表示にするとスコア改善に繋がります。
レンタルサーバーの設定
スコア改善の対策をしたにも関わらず、改善できる項目に「最初のサーバー応答時間を速くしてください」が頻繁に表示される時は、レンタルサーバーが原因の可能性もあります。
![最初のサーバー応答時間を速くしてください](https://affilabo.com/wp-content/uploads/2022/09/ab1b25eb83eabd1a56b5cbc555226557.png)
常に表示されている場合は、PHPのバージョンやプラグインの可能性もありますが、表示されたり、されなかったりの場合は、高速を謳っているレンタルサーバー及び上位のプランへの変更も検討してみて下さい。
僕が使っているエックスサーバーのスタンダードプランでは、ほとんど表示されることはありません。
- サーバーの高速化機能をONにする
- 最新のPHPバージョンに更新されているか確認する
![](https://affilabo.com/wp-content/uploads/2018/10/61db2395a7779ddf05728510a74b7069-300x200.jpg)
![](https://affilabo.com/wp-content/uploads/2018/07/be825f7c3f6831ac6b1e1a2383acaf4e-300x200.jpg)
スコアが落ちる設定
PageSpeed Insightsのスコアが落ちる設定とその改善策についてもまとめておきます。
フォント設定(ベースとなるフォント)
フォント設定で、「Noto Sans JP」及び「明朝体(Noto Serif JP)」を選択するとスコアが落ちます。
![フォント設定](https://affilabo.com/wp-content/uploads/2022/09/b7c112c3d3e6d1242f652aca96ae4898.png)
初期設定は「游ゴシック」になっているので、変更していなければ設定不要ですが、「Noto Sans JP」及び「明朝体(Noto Serif JP)」を選択すると、Googleフォントを読み込むため、スコアが落ちる可能性があります。
個人的には、「游ゴシック」または「ヒラギノゴシック > メイリオ」をおすすめします。
プロフィールウィジェットのSNSアイコンリスト「丸枠なし」
プロフィールウィジェットのSNSアイコンリストで、「アイコンを丸枠で囲む」のチェックを外していると、携帯電のSEO項目で「タップ ターゲットのサイズが適切に設定されていません」と表示されることがあります。
![SNSアイコンリストの丸枠なし](https://affilabo.com/wp-content/uploads/2022/09/301bb535fc10236718b45f96eaf4894e.png)
そこまで重要な項目ではありませんが、スコアを改善したい時は、「アイコンを丸枠で囲む」の設定をONにする及びスマホ表示の時のアイコンサイズをCSSで大きくして下さい。
![](https://affilabo.com/wp-content/uploads/2023/07/9ee0f33c4202cd029e8893593accd397-300x200.png)
ページャーのデザイン「背景グレー」
ページャーのデザインで「背景グレー」を選択すると、ユーザー補助の項目で「背景色と前景色には十分なコントラスト比がありません」と表示されることがあります。
![ページャーのデザイン「背景グレー」](https://affilabo.com/wp-content/uploads/2022/09/295344e4d1fb7d7b3b841195e4b552d1.png)
スコアを改善したい時は、ページャーのデザインを「枠線付き」に変更する及びCSSでフォントと背景のカラーを変更して下さい。
![](https://affilabo.com/wp-content/uploads/2023/07/8835120a2bb9a2946b7b629a8f9f8966-300x200.png)
最後に
テーマSWELLを使っている方で、PageSpeed Insightsのスコアを改善させたい方は、まずはSWELLに最初から実装されている高速化機能を設定してみることをおすすめします。特に、Google AdSenseやGoogle Analyticsを使用している方は、スクリプトの遅延読み込みを設定するだけでスコアは大幅に改善されるはずです。
但し、高速化する時の最適な設定はサイトによって異なります。
このブログを含め他人のサイトを参考にする時は、必ずご自身のサイトでもスコア改善に繋がっているのか?表示崩れ等の不具合が起きていないか?を確認するようにして下さい。
コメント