こんにちは、あぶこです。
ページの表示速度を計測してくれる PageSpeed Insights ですが
最初に使ったときは、「こんなに表示されるのに時間がかかってるの？」と驚きました。
あまり遅いと思ったことはないのですが
数値化されると、もっといい評価にしないと！と思ってしまいます。
ページの表示速度は、Googleの評価でも重要視される部分なので
速いことに越したことはありません。
それでは、PageSpeed Insights の使い方や
表示速度を速くすることのメリット、
改善方法について紹介していきたいと思います。
PageSpeed Insights の使い方
PageSpeed Insights の使い方を紹介します。
PageSpeed Insights のサイトへは、こちらから。
このように、ページが表示されますので
「ウェブぺージのURLを入力」と書かれた場所に、あなたのサイトのURLを入力し
「分析」ボタンをクリックします。
少し待つと、サイトの分析結果が表示されます。
０～４９が赤色
５０～８９がオレンジ色
９０～１００が緑色です。
サイトの表示速度を改善するメリット３つ！
では、なぜ表示速度が速い方がいいのか、メリットについて考えてみます。
最近は、ページをスマホで見る方が多いですので、モバイルを重視した内容になっています。
ユーザーの直帰率の改善
Googleのデータによると、ページの表示速度が遅いとユーザーの直帰率につながるという結果があります。
確かに、ページを開くたびに待ち時間があると、なんか無駄じゃない？
次のページも気になるけど…もういいや！ってなっちゃう気持ち、わかるなぁ。
ページの表示スピードが上がれば、直帰率を減らすことができますよね。
コンバーションの向上
あとは、ページの表示速度は、コンバーションの確保にも影響が出てしまいます。
コンバーション
コンバーションとは、 ECサイトや企業ウェブサイトなどで求められる最終的な成果。
具体的には、閲覧者による商品購入・会員登録・資料請求など、収益に結びつく行動を指す。
つまり、読者さんがページの表示速度が遅いなぁと感じると
最終的な目的地（あなたが読者さんにしてほしいこと）までたどり着かなくなってしまうんです。
もっと具体的に言うと、一般に
表示が遅れると、コンバーション率・顧客満足度は大幅に低下し
表示に３秒以上かかると４０％のユーザーは離脱してしまうとさえ言われています。
でも、逆に言うと、ページの表示速度が改善できれば、コンバーション率や顧客満足度は上昇するということですよね。
さらに、直帰率も下がるなんて、いいことづくめですね。
SEOをあげる
Googleが２０１８年７月のアップデートで始めたのは、ページの表示速度によるSEO評価です。
Googleがユーザビリティを評価する方針になったということです。
読者さんにとって、使いやすい・見やすいサイトは、どんどん上位表示させてオススメしていくってことですね。
ページの表示速度が改善されれば、今より評価されて、検索順位が上がりやすくなります。
検索順位が上がれば、それだけユーザーがあなたのサイトを訪問する機会が増えるわけで。。。
３つをまとめると、ページ速度の改善はコンバーションだけでなく
SEO効果もあるので、数値が低いようならば、改善するべきですね。
改善できる項目を見ながらサイトを改善！
PageSpeed Insights には、評価の下に
「改善できる項目」という改善のヒントが表示されます。
Reduce initial server response time
これは、サーバーの応答時間が 200 ミリ秒以上であることを PageSpeed Insights が検出した場合に表示されます。
そこで、「Autoptimize」プラグインを入れてみます。
Autoptimize
プラグイン「Autoptimize」は、JavaScript コード、CSSコード、HTMLコードを最適化して
リソース（動作の実行に必要な処理システムの要素）を軽量化してくれます。
このプラグイン導入で、６４ →６６に。
そんなに変わっていないかもしれませんが、「短縮できる時間」では
２.４５ → ０.５８（秒）と大幅に改善しました。
次世代フォーマットでの画像の配信
JPEG 2000、JPEG XR、WebP などの画像フォーマットは
PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができるので
そっちを使ってね…ということでしょう。
いや、でもいきなりそんなこと言われても困りますよね。
●「EWWW Image Optimizer」プラグインの導入
こちらは、画像ファイルサイズを縮小してくれるプラグインです。
過去のアップロードした画像は、メディア → 一括最適化できます。
プラグインも簡単なのですが、
もっと画像のサイズを小さくしようと思うなら
こちらで軽量化するのがオススメです。
こちらでは、JPEG / JPG
「パンダ 圧縮」でヒットするくらい、パンダが目印のツールです。
ダウンロードも必要ないので、かなり便利です。
「EWWW Image Optimizer」でも小さくできますが
私のサイトだと、多くて２５％くらいの減少でした。
TinyPNGだと、７０％くらい減少したので
ちょっと面倒でも、プラグインだけではなく
パンダさんにもお願いした方がいいかもしれませんね。
全ての画像はちょっと難しい…という方なら
アイキャッチだけでもサイズを減少させておく方がいいかもしれません。
追加：プラグインを削除も有効！
有効化していないプラグイン、停止にしたままで、そのままにしていませんか？
例えば、ワードプレスの最初に入っているプラグイン「hallo～」。
使わないから、有効化は外したものの、そのままになっていませんか？
私は、有効化していないプラグインを７つ削除しただけで
６５ → ６９ になったので、「停止」→「削除」することをオススメします。
また、TinyPNGで軽量化した画像を、再びアップロードしてブログに使用し
軽量化前にアップロードして今まで使っていた画像は削除しておきましょう。
それでも改善されないようなら
私が、PageSpeed Insights を使って思ったのは
改善すると、すぐに数値が上がる半面、
「ヘッダー変更したのに直ってない！」というように
画像系の変更がすぐに行われていないこと。
例えば、ヘッダーの変更や
「次世代フォーマットによる画像の配信」の詳細で出ていた画像を
削除したにもかかわらず、ずっと出てきている…という感じ。
少し時間をおいてから、また診断してもらう方がいいのかもしれません。
私も後日、再度診断したところ、８３にまで上がっていました。
しかし、表示速度のスピードが速いことはメリットがたくさんありますので
手詰まりになってしまったようでしたら、有料テーマをオススメします。
このブログは、AFFINGER5で作られていますが
「吹き出し」や「コピー防止」、「関連記事」」や「人気記事」や「コピー防止」といった
欲しい機能ののプラグインを入れる必要がなく、そのままテーマでの設定で変更することができます。
その分だけ、プラグインを減らすことができるのでオススメです。
興味があれば、こちらのページでAFFINGER5を紹介しています。
-
AFFINGER５(WING）初心者にオススメの有料テーマ
続きを見る
とにかく、表示速度が速いとメリットがいっぱいなので、
PageSpeed Insightsで計測して、いい評価がでるようにしたいですね。