【WordPress】PageSpeed Insightsで90点以上取る方法解説
今回はWordPress(cocoonテーマ使用)でPageSpeed Insightsの測定をモバイル・デスクトップ共に90点以上を取る方法について紹介します。
当ブログでは無料のcocoonテーマやGoogleアドセンスを導入しているのでそれに関連した設定方法も紹介していますが、それ以外の方でも高速化の参考になる内容となっています。
当サイトのPageSpeed Insightsでの速度
ブログ運営において、サイトの読み込み速度はSEO面で重要な要素の1つです。当サイトでもサイト速度を重視した設定にしています。
『PageSpeed Insights』で当サイトトップページの速度を計測した結果、スマホは94点、デスクトップは99点でした。
ちなみに当サイトのサーバーは「ロリポップ」の一番安いプランです。単に読み込み速度を向上させるには、お高いレンタルサーバーの高額プランを契約することが一番単純に大きな効果を挙げます。しかし、みなさん予算がある中で運営しているでしょうので、それ以外でお金を掛けずに高速化を目指す方法を取り上げたいと思います。
読み込み速度を向上させる方法
当サイトで行っている高速化の施策を紹介していきます。主にGoogleアドセンスを使用していて、尚且つサイトを高速化したい人向けになります。
結論としては、不必要な機能は削除するというのが一番サイトスピード向上に大事な要素になります。
不要なプラグインの削除
プラグインは必要最低限の物以外はなるべく減らすようにしましょう。インストールされているプラグインの数が多いと、読み込み速度が低速化する原因になりやすいからです。
わざわざプラグインを入れなくても、多機能なcocoonの設定でカバーできるところも多いです。また、古い(アップデートされていない)プラグインを無くすことで、後述する「PHPのバージョンを最新化する」ことも可能になります。
実際に、現在このブログで使用しているプラグインは以下の4つです。
- Category Order and Taxonomy Terms Order
- EWWW Image Optimizer
- Flying Scripts
- Google XML Sitemaps
プラグインを導入しないと実現できない、もしくは非常に手間が掛かるという機能に関してのみ厳選してインストールしています。例えば、今まで使っていたソースコードをハイライト表示させる「SyntaxHighlighter」系のプラグインはかなり重く、cocoonに搭載されているハイライト機能で充分だったのでアンインストールしました。
残ったのはスタンダードで有名なプラグインばかりになりました。一応各プラグインについてさらっと紹介します。
Category Order and Taxonomy Terms Order
カテゴリー・タグを並び替える機能を追加できます。これらの並べ替え機能はcocoonには無い機能なので導入しています。機能的に特に必要なければインストールする必要はありません。
EWWW Image Optimizer
自動でアップロードした画像をwebp形式に変換してくれます。(要設定)画像のwebp形式は軽くてほぼ全てのブラウザで対応しているため効果が大きく、導入推奨になります。
Flying Scripts
こちらは「PageSpeed Insights」の「改善できる項目」の「使用していないJavaScriptの削減」指摘の対策用プラグインになります。指定したJavaScriptを遅延読み込みさせることで、指摘の改善を見込めます。GoogleアドセンスやGoogleアナリティクスを導入している方は指摘されるので導入推奨です。
プラグインの設定で、「使用していないJavaScriptの削減」で指摘されたURLを貼り付けましょう。Timeoutは「4s」辺りに設定すると丁度いいと思います。
Google XML Sitemaps
XMLサイトマップ用のプラグインです。XMLサイトマップ作成はSEO面で効果があるので、基本的に導入推奨です。
問い合わせフォーム用のプラグインを廃止する
お問い合わせページの送信フォーム用のプラグインは「Contact Form 7」などが有名ですね。こちら便利なのですがプラグイン自体が重く、導入すること速度が低下してしまいます。こちらのプラグインを廃止して、代わりにGoogleフォームを利用してプラグイン無しで問い合わせ機能を作成します。
詳しい方法は割愛しますが、「お問い合わせフォーム Googleフォーム」などで検索すると色々とやり方が紹介されているので参考になります。
その他、コメント欄も似たような仕組みですので、サイトで使用していない場合は撤去を考えると良いと思います。
SNS系ボタン・タイムライン表示を消す
特にTwitterのタイムラインに言えることですが、これをサイドバーなどで表示させると全ページでそれらを読み込むことになり、結果的に速度がかなり低下してしまいます。
Twitterの表示が必要な投稿ページ以外は削除した方が速くなります。僕の場合、Twitterアカウントを作ったは良いものの、ろくにツイートもしていなくタイムラインがあっても無意味だと思ったので外しました。SNSのフォローボタンも同様に必要ないと判断しました。
PHPの設定を最新化する
PHPの設定を最新化することで速度向上が見込めます。WordPressをインストールしているレンタルサーバー(当サイトで言うとロリポップ)の管理画面でバージョン変更ができます。
ここで注意したいことが、PHP8.0以上のバージョンに対応していないプラグインを導入した状態で、PHPのバージョンを上げてしまうとエラーが発生してしまうことがあります(アクセスすると「このサイトで重大なエラーが発生しました。」とのみ表示される)。
先ほど紹介した4つのプラグインは対応しているのでPHP8.0以上にバージョンアップ可能です。
cocoon設定で高速化の設定を行う
cocoonテーマを使用している場合は、「cocoon設定」→「高速化」で全ての機能にチェックをつけます。意図しない挙動が発生しない限り、基本的に全部にチェックを付けるのをおすすめします。
今回はページ読み込み速度の向上についてまとめました。サイトの高速化についてはいまだ模索中なところもあるので、随時更新していきたいと思います。
特にプラグインの整理で速度が大きく改善されたと感じたので、とりあえず見直してみるだけで違うと思います。
なにかしら参考になることがあれば幸いです。以上で記事を終わりにします。