ご覧いただきありがとうございます。
ブログを運営していく上で欠かせない、サイトスピードの改善に悩んでいませんか？「読み込みスピードが遅い」という理由で記事を読んでもらえなくなるのは残念ですよね。
私自身も改善に四苦八苦しましたが、模索した結果、6つの方法を組み合わせてようやくPageSpeed Insightsの赤色を脱出することができました。
本記事では、そんな私が実践したサイトスピードの改善方法をまとめてご紹介します。
✔️サイトスピードが上がらなくて困っている人
✔️ブログ初心者でもできる改善方法を知りたい人
「難しい設定はちょっと…」という初心者の方でもできるものばかりです。諦める前に、ぜひ1度試してみてください♩
PageSpeed Insightsで現在の状態を計測
サイトスピードの確認は、PageSpeed Insightsというサイトで計測することができます。
使い方は簡単で、ご自分のサイトのURLを貼り付けて「分析」をクリックします。
当ブログを分析した結果はこちらです。
モバイルの結果が低すぎる…。
下にスクロールすると、改善できる項目が示されています。こちらを参考に、少しずつサイトを高速化させていきましょう。
50点取れれば世界の半数のページより早いということになります。そのため、ひとまず50点、赤色の脱出を目指します！
スピード改善のために行ったこと
私が取り入れていることは以下の6つです。
✔️画像の圧縮
✔️画像を次世代フォーマットに変更
✔️ConoHa WINGのキャッシュ機能を利用
✔️使用していない JavaScript の削減
✔️レンダリングを妨げるリソースの除外
テーマの「Cocoon」やサーバーの「ConoHa WING」の機能も含まれています。
Cocoon設定の高速化の利用
まずはCocoonテーマで簡単にできる高速化設定です。「Cocoon設定」→「高速化」をクリック。
こちらに表示される7項目にチェックを入れて、「変更を保存」すればOKです。
✔️HTMLを縮小化する
✔️CSSを縮小化する
✔️JavaScriptを縮小化する
✔️Lazy Loadを有効にする
✔️Googleフォントの非同期読み込みを有効にする
✔️アイコンフォントの非同期読み込みを有効にする
「Lazy Loadを有効にする」にチェックを入れると、トップページに設定したカルーセルの表示が遅くなってしまいました。サイトスピードの結果もあまり変わらなかったため、私は「Lazy Loadを有効にする」のみ除外してあります。
カルーセルを設置している方は少し気にしてみると良いかと思います。
画像の圧縮
PageSpeed Insightsの改善できる項目、「適切なサイズの画像」という指摘を改善していきます。
画像の軽量化のために私が使用している画像圧縮ツールはこちらです。
✔️ EWWW Image Optimizer
「ImageOptim」はMac専用の画像圧縮ツールです。
✔️圧縮率がとても高い
✔️無料なのに無制限で使える
✔️様々な形式の画像を圧縮できる（JPEG・PNG・GIF）
✔️圧縮したい画像をドラッグ＆ドロップするだけなので操作が簡単
という理由で、Macユーザーにとって使わない手はないツールです。ブログに画像を載せる前に、「ImageOptim」で圧縮することをおすすめします。
ダウンロードや設定方法はこちらの記事に詳しく書いてありますので、よろしければ参考にしてみてください。
【Mac画像圧縮ツール】無料・無制限で使える「ImageOptim」がおすすめ
ダウンロードは必ず公式サイトから行ってください！
「EWWW Image Optimizer」はWordPressの定番プラグインです。初期設定が必要ですが、入れておくだけで画像サイズを小さくしてくれるのでこちらもおすすめ。
詳しい使い方はヒトデさんの記事を参考にさせていただきました。
【ヒトデブログ】EWWW Image Optimizerの最新設定方法と正しい使い方についてわかりやすく解説
画像圧縮ソフトとプラグインを併用して、画像を軽くしています。
画像を次世代フォーマットに変更
PageSpeed Insightsの改善できる項目、「次世代フォーマットでの画像の配信」という指摘を改善していきます。
画像の形式を次世代フォーマットに変更することで、サイトスピードを早くすることができるようです。私は上記でもご紹介した「EWWW Image Optimizer」というプラグインを利用してWebPというフォーマットに変換しました。
こちらの記事を参考にしたら、初心者の私でもきちんと設定することができました。
【ikuzoblog】2021年版 EWWW Image Optimizerの設定とWebPへの変換方法
画像を圧縮するために入れているプラグインで、次世代フォーマットに変更可能なので一石二鳥♩プラグインをあまり増やしたくない方にもおすすめの方法です。
ConoHa WINGのキャッシュ機能を利用
PageSpeed Insightsの改善できる項目、「最初のサーバー応答時間を早くしてください」という指摘を改善していきます。
こちらの指摘は、「サーバーの応答時間が遅いから早くしてね」というサインで、キャッシュ系プラグインを導入することで改善を図ることができます。
ですが、サーバーにConoHa WINGを使っている場合、プラグインをインストールしなくても標準でキャッシュ機能が搭載されているのでとても便利です！
使い方は簡単で、ConoHa WINGにログインし、上部の「WING」をクリック。
「サイト管理」→「サイト設定」→「応用設定」と進むと「コンテンツキャッシュ」「ブラウザキャッシュ」という項目があります。
「コンテンツキャッシュ」「ブラウザキャッシュ」を選択し、ONにします。
私は「ConoHa WING 自動キャッシュクリア」という初期プラグインと併用して使っており、そのおかげか、記事更新やデザイン変更の際も不具合なく使えています。
注意点として、他のキャッシュ系のプラグインと併用するのは避けましょう！
ConoHa WINGのキャッシュ機能をONにしたまま、他のキャッシュ系プラグイン（私の場合はWP Super Cache）を導入したら逆効果で、サイトスピードがグッと落ちてしまいました。併用すると問題が生じやすくなるようです。
使用していない JavaScript の削減
PageSpeed Insightsの改善できる項目、「使用していない JavaScript の削減」という指摘を改善していきます。
こちらの指摘は、【Flying Scripts by WP Speed Matters】というプラグインを導入することで解決することができました。
詳しい導入方法・使い方はこちらの記事でご紹介しています。
簡単なので試してみる価値ありです♩
レンダリングを妨げるリソースの除外
最後に、PageSpeed Insightsの改善できる項目、「レンダリングを妨げるリソースの除外」という指摘を改善していきます。
こちらの指摘の改善には、【Autoptimize】というプラグインを導入することで改善が見られました。
CSS、JS、画像、Google フォントなどを最適化することでサイトの応答を高速化してくれるプラグインです。
詳しい導入方法・使い方はこちらの記事でご紹介しています。
JavaScript を最適化するという点は、上記でご紹介した【Flying Scripts by WP Speed Matters】と被るところがありますが、私は併用することでサイトスピードがさらに向上したため両方採用しております。
まとめ
以上、サイトスピードを向上させるために取り組んだ6つの方法のご紹介でした。
何をやってもPageSpeed Insightsの赤色を脱出することができなかった私が、ようやくこの組み合わせで抜け出すことに成功しました。同じような方の参考になれば幸いです。
最後までご覧いただき、ありがとうございました！
↓ブログ村に登録しています。ポチッと押して応援していただけると嬉しいです♪
コメント