「PageSpeed Insights」で90点以上取る方法【cocoon高速化】

「PageSpeed Insights」で90点以上取る方法【cocoon高速化】ブログ運営
ブログ運営

ブログ運営において、サイトの読み込み速度はSEO面で重要な要素の1つです。今回はWordPressのcocoonテーマにおいて、「PageSpeed Insights」の測定でモバイル・デスクトップ共に90点取る方法について紹介します。

スポンサーリンク

「PageSpeed Insights」での速度

「PageSpeed Insights」でトップページの速度を計測した結果、スマホは94点デスクトップは99点でした。

ちなみに当サイトのサーバーは「ロリポップ」の一番安いプランです。単に読み込み速度を向上させるには、お高いレンタルサーバーの高額プランを契約することが一番単純に大きな効果を挙げます。しかし、みなさん予算がある中で運営しているでしょうので、それ以外でお金を掛けずに高速化を目指す方法を取り上げたいと思います。

読み込み速度を向上させるための施策

当サイトで行っている高速化の施策を紹介していきます。(随時更新中)

Googleアドセンスを使用していて、尚且つサイトを高速化したい人向けになります。

その1:cocoon設定で高速化の設定を行う

cocoon設定」→「高速化」で全ての機能にチェックをつけます。意図しない挙動が発生しない限り、基本的に全部にチェックを付けるのをおすすめします。

その2:不要なプラグインの削除

プラグインは必要最低限の物以外はなるべく減らすようにしましょう。インストールされているプラグインの数が多いと、読み込み速度が低速化する原因になりやすいからです。わざわざプラグインを入れなくても、多機能な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面で効果があるので、基本的に導入推奨です。

その3:問い合わせフォーム用のプラグインを廃止する

お問い合わせページの送信フォーム用のプラグインは「Contact Form 7」などが有名ですね。こちら便利なのですがプラグイン自体が重く、導入すること速度が低下してしまいます。こちらのプラグインを廃止して、代わりに「Googleフォーム」を利用してプラグイン無しで問い合わせ機能を作成します。

詳しい方法は割愛しますが、「お問い合わせフォーム Googleフォーム」などで検索すると色々とやり方が紹介されているので参考になります。

その4:SNS系ボタン・タイムライン表示を消す

特にTwitterのタイムラインに言えることですが、これをサイドバーなどで全ページで表示させることで速度がかなり低下してしまいます。Twitterの表示が必要な投稿ページ以外は削除しましょう。僕の場合ろくにツイートもしていなくて、タイムラインがあっても無意味だと思ったので外しました。

SNSのフォローボタンも同様に必要ないと判断しました。ブログのプロフィール欄でTwitterとgithubのみリンクボタンを置いています。

その5:PHPの設定を最新化する

PHPの設定を最新化することで速度向上が見込めます。WordPressをインストールしているレンタルサーバー(当サイトで言うとロリポップ)の管理画面でバージョン変更ができます。

ここで注意したいことが、PHP8.0以上のバージョンに対応していないプラグインを導入した状態で、PHPのバージョンを上げてしまうとエラーが発生してしまうことがあります。(アクセスすると「このサイトで重大なエラーが発生しました。」とのみ表示される)

先ほど紹介した4つのプラグインは対応しているのでPHP8.0以上にバージョンアップ可能です。

まとめ

今回はページ読み込み速度の向上についてまとめました。サイトの高速化についてはいまだ模索中なところもあるので、随時更新していきたいと思います。

特にプラグインの整理で速度が大きく改善されたと感じたので、とりあえず見直してみるだけで違うと思います。

なにかしら参考になることがあれば幸いです。以上で記事を終わりにします。

スポンサーリンク
Dim雑記
タイトルとURLをコピーしました