\ 夏のPayPay祭グランドフィナーレ攻略法! /

【サイトスピード改善】初心者でもできる6つの方法

【サイトスピード改善】初心者でもできる6つの方法
ぶち
ぶち

ご覧いただきありがとうございます。

ブログを運営していく上で欠かせない、サイトスピードの改善に悩んでいませんか?「読み込みスピードが遅い」という理由で記事を読んでもらえなくなるのは残念ですよね。

私自身も改善に四苦八苦しましたが、模索した結果、6つの方法を組み合わせてようやくPageSpeed Insightsの赤色を脱出することができました

本記事では、そんな私が実践したサイトスピードの改善方法をまとめてご紹介します。

こんな人におすすめ

✔️サイトスピードが上がらなくて困っている人
✔️ブログ初心者でもできる改善方法を知りたい人

ぶち
ぶち

「難しい設定はちょっと…」という初心者の方でもできるものばかりです。諦める前に、ぜひ1度試してみてください♩

スポンサーリンク

PageSpeed Insightsで現在の状態を計測

サイトスピードの確認は、PageSpeed Insightsというサイトで計測することができます。

使い方は簡単で、ご自分のサイトのURLを貼り付けて「分析」をクリックします。

PageSpeed Insights 分析方法

当ブログを分析した結果はこちらです。

PageSpeed Insights 最初の結果 モバイル
モバイル
PageSpeed Insights 最初の結果 パソコン
パソコン
ぶち
ぶち

モバイルの結果が低すぎる…。

下にスクロールすると、改善できる項目が示されています。こちらを参考に、少しずつサイトを高速化させていきましょう。

PageSpeed Insights 改善できる項目
ぶち
ぶち

50点取れれば世界の半数のページより早いということになります。そのため、ひとまず50点、赤色の脱出を目指します!

スピード改善のために行ったこと

私が取り入れていることは以下の6つです。

✔️Cocoon設定の高速化の利用
✔️画像の圧縮
✔️画像を次世代フォーマットに変更
✔️ConoHa WINGのキャッシュ機能を利用
✔️使用していない JavaScript の削減
✔️レンダリングを妨げるリソースの除外

テーマの「Cocoon」やサーバーの「ConoHa WING」の機能も含まれています。

Cocoon設定の高速化の利用

まずはCocoonテーマで簡単にできる高速化設定です。「Cocoon設定」→「高速化」をクリック。

Cocoon設定 高速化設定

こちらに表示される7項目にチェックを入れて、「変更を保存」すればOKです。

✔️ブラウザキャッシュの有効化
✔️HTMLを縮小化する
✔️CSSを縮小化する
✔️JavaScriptを縮小化する
✔️Lazy Loadを有効にする
✔️Googleフォントの非同期読み込みを有効にする
✔️アイコンフォントの非同期読み込みを有効にする

「Lazy Loadを有効にする」にチェックを入れると、トップページに設定したカルーセルの表示が遅くなってしまいました。サイトスピードの結果もあまり変わらなかったため、私は「Lazy Loadを有効にする」のみ除外してあります。

ぶち
ぶち

カルーセルを設置している方は少し気にしてみると良いかと思います。

画像の圧縮

PageSpeed Insightsの改善できる項目、「適切なサイズの画像」という指摘を改善していきます。

画像の軽量化のために私が使用している画像圧縮ツールはこちらです。

✔️ ImageOptim
✔️ 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の改善できる項目、「最初のサーバー応答時間を早くしてください」という指摘を改善していきます。

こちらの指摘は、「サーバーの応答時間が遅いから早くしてね」というサインで、キャッシュ系プラグインを導入することで改善を図ることができます。

キャッシュとは?
ブラウザなどが、表示したウェブページのデータを一時的にコンピューターに保存しておく機能。次に同じページにアクセスしたときに、インターネット上のデータではなく、保存されたデータを参照するため、すばやく表示できます。
引用元:Yahoo! JAPAN
ぶち
ぶち

ですが、サーバーにConoHa WINGを使っている場合、プラグインをインストールしなくても標準でキャッシュ機能が搭載されているのでとても便利です!

使い方は簡単で、ConoHa WINGにログインし、上部の「WING」をクリック。

ConoHa WING キャッシュ機能設定

「サイト管理」→「サイト設定」→「応用設定」と進むと「コンテンツキャッシュ」「ブラウザキャッシュ」という項目があります。

ConoHa WING キャッシュ機能設定

「コンテンツキャッシュ」「ブラウザキャッシュ」を選択し、ONにします。

ONにするとサーバーの反応は速くなる一方、一定期間古いデータが保存されるため、デザインを変更したり、記事を公開・削除をしたときも、古いページデータが表示されてしまう場合があります。問題が生じた場合はOFFにしてください。
ぶち
ぶち

私は「ConoHa WING 自動キャッシュクリア」という初期プラグインと併用して使っており、そのおかげか、記事更新やデザイン変更の際も不具合なく使えています。

注意点として、他のキャッシュ系のプラグインと併用するのは避けましょう!

ConoHa WINGのキャッシュ機能をONにしたまま、他のキャッシュ系プラグイン(私の場合はWP Super Cache)を導入したら逆効果で、サイトスピードがグッと落ちてしまいました。併用すると問題が生じやすくなるようです。

サーバーにキャッシュ機能がない場合…
✔️WP Super Cache
✔️WP Fastest Cache
✔️W3 Total Cache
などのキャッシュ系プラグインが有名です。

使用していない JavaScript の削減

PageSpeed Insightsの改善できる項目、使用していない JavaScript の削減」という指摘を改善していきます。

JavaScriptとは?
Webサイトを表示するブラウザ上で動くプログラムのこと。JavaScriptに関連する動作を一気に読み込もうとすることで、サイトスピードが遅くなってしまいます。

こちらの指摘は、【Flying Scripts by WP Speed Matters】というプラグインを導入することで解決することができました。

Flying Scripts by WP Speed Matters プラグイン

詳しい導入方法・使い方はこちらの記事でご紹介しています。

ぶち
ぶち

簡単なので試してみる価値ありです♩

レンダリングを妨げるリソースの除外

最後に、PageSpeed Insightsの改善できる項目、レンダリングを妨げるリソースの除外」という指摘を改善していきます。

レンダリングを妨げるリソースの除外とは?
サイトを開いたとき、真っ先に不要なコードの読み込みが始まると、スクロールせずに表示できる部分のダウンロードが遅くなってしまうから改善してね、という指摘です。要因としては、JavaScript や CSSが考えられます。

こちらの指摘の改善には、【Autoptimize】というプラグインを導入することで改善が見られました。

Autoptimize プラグイン
ぶち
ぶち

CSS、JS、画像、Google フォントなどを最適化することでサイトの応答を高速化してくれるプラグインです。

詳しい導入方法・使い方はこちらの記事でご紹介しています。

JavaScript を最適化するという点は、上記でご紹介した【Flying Scripts by WP Speed Matters】と被るところがありますが、私は併用することでサイトスピードがさらに向上したため両方採用しております。

まとめ

以上、サイトスピードを向上させるために取り組んだ6つの方法のご紹介でした。

何をやってもPageSpeed Insightsの赤色を脱出することができなかった私が、ようやくこの組み合わせで抜け出すことに成功しました。同じような方の参考になれば幸いです。

PageSpeed Insights 最終的な結果
モバイル
PageSpeed Insights 改善後の結果 パソコン
パソコン
ぶち
ぶち

最後までご覧いただき、ありがとうございました!

↓ブログ村に登録しています。ポチッと押して応援していただけると嬉しいです♪

にほんブログ村
スポンサーリンク
スポンサーリンク
副業
よければフォローお願いします
ゆる主婦のラクする暮らし

コメント

タイトルとURLをコピーしました