記事の詳細
WordPressを高速化。Page Speed Insightsのスピードテストで高得点を出す方法
WordPressのバージョンアップに伴って、対スピードテストもいろいろと変化しつつあります。
前までは高得点だったのに、今では見る影もない……という方も多いかと思います。インクループでも様々にテーマを試しながら、いったいどのようなテーマがスピードテストで高得点を取れるのか、ということを検証しています。
以下もご参照ください。
今回のブログの見出しはコチラです！
Page Speed Insightsについて
PageSpeed Insights API（PSI）は、モバイル端末向けとパソコン向けの両方のページにおけるパフォーマンスに関するレポートと、そのページを改善する最適化案を提供するGoogleのデベロッパーツールです。
ページのパフォーマンスがよい＝速さと表示上が高得点となり、近年ではこの速さがGoogleの評価に繋がっていると言われています。SEOを行う上で、Page Speed Insightsで高得点を出すことは大変重要です。
スコアが 90 以上であれば速い、50～90 であれば平均的と見なされます。50 未満は遅いと見なされます。
近年のWordPressを利用したPage Speed Insightsスピードアップの定石は？
WordPressを利用したWEBサイトでPage Speed Insightsをスピードアップするには以下のような事が必要でした。
伴ってよく利用されるプラグインをご紹介します。
- 画像の最適化
EWWW Image Optimizer
Smush - コードを圧縮
Autoptimize - キャッシュを利用した高速化
W3 Total Cache
WP Fastest Cache
上記の対策を行うと、プラグインがどんどん増えていきます。利用している他のプラグインと衝突し、表示がおかしくなることも多々。
WordPressでプラグインを多用したサイトは、Page Speed Insightsで高得点を出すことは難しいです。ですが、高得点のためにはプラグインをいれなければならない、という矛盾があります。
目的は「Page Speed Insightsで高得点を出すこと」ですか？ それとも「ユーザーエクスペリエンス（UX）を高めること」ですか？
以下の6項目を改善できれば、Page Speed Insightsで高得点を獲得することができます。
WEBを表示する際、もっとも時間を消費するのは「JavaScript」。JavaScriptが多い、あるいは内容の記述が多いサイトほど低得点となります。
ですが、JavaScriptはサイトを良くする上で利用していることがほとんど。削減するにも限度があります。また、WordPressのプラグインはだいたいJavaScriptが利用されているケースが多いです。プラグインを多用すると、Wordpressを使ったサイトのスピードは遅くなっていきいます。
このため、ユーザーエクスペリエンス（UX）のためにプラグインを採用しているなら、Page Speed Insightsで高得点を出すことに躍起になる必要はないでしょう。
Page Speed Insightsで高得点を出すなら
JavaScriptを徹底的に削除する。
挿入するJavaScriptは最低限に。また、WordPressの定義済み関数を効率よく使いましょう。
JavaScriptやjQueryは<?php wp_head(); ?>ではなく<?php wp_footer(); ?>で読み込みましょう。
|
1 2 3 4 5 6 |
function my_load_widget_scripts() { wp_enqueue_script('widgets_js', 'ここにパス.js', array()); wp_enqueue_script('hatebu', 'ここにパス.js', array()); } add_action('wp_footer', 'my_load_widget_scripts'); |
また、「Scripts-To-Footer」を利用してJavaScriptを一括でサイトフッターで読み込ませることができます。
ただ、全てのJavaScriptをフッターで読み込ませてしまうと、サイトの表示でエラーが出る可能性があります。特にjQueryは<?php wp_head(); ?>で読み込まないと、動かないプラグインも……。様子を見ながら利用しましょう。
Google fontsを利用しない。
Google fontsを利用するとPage Speed Insightsは遅くなります。「display=swap」の記載があっても、CSSの読み込みは遅く、Page Speed Insightsで指摘を受けます。いまのところ解決方法は判明していません。
読みやすさというUXよりもスピードを取る場合は、Google Fonts以外のフォントを利用しましょう。
ゴシック
|
1 |
font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; |
明朝
|
1 |
font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif; |
画像の圧縮はプラグインを利用しない
以下のオンラインサイトなどを利用しましょう。
- https://www.iloveimg.com/ja/compress-image
- https://compressjpeg.com/ja/
- https://imagecompressor.com/ja/
サーバーは高性能なレンタルサーバーを。
特に下記がおすすめです。
テーマ選びは慎重に。
WordPress5.3からデフォルトテーマになっているTwenty TwentyはGutenbergに対応しており、非常に高速なテーマです。何も手を加えていない状態だと、PageSpeed Insightsで必ず高得点を叩き出します。
その他にも以下のようなテーマがあります。
PHPのバージョンは可能な限り最新版に！
サーバーによって異なりますが、細かく確認していきましょう。
過度にPage Speed Insightsで点数を上げることにこだわらない！
あまり点数を上げることにこだわってしまうと、UXが良いとは言えないサイトになってしまいます。モバイルファースト対応や画像の遅延表示などできることはするべきですが、必ず90点以上を出さなければならないというわけではありません。
程よく折り合いをつけていきたいですね。
この記事であなたの課題を解決することができましたか？
疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。
ほかの投稿も読んでみませんか？
相模原のお店やサービスをどんどん紹介！
飲食店
サービス
