ページ表示速度を計測しよう!【サイト高速化がSEO的に超重要】

ブログ

どうも、アンパパです!

アンパパはこれまで、記事を書くのに精一杯で、サイトの高速化なんて無関心でした。

しかし!調べてみると、サイトの高速化はSEO的にはかなり重要項目ということがわかりました。

確かに、実際見る人の立場になって考えてみると、重たい画像だらけのサイトは、表示するのに時間がかかってしまいイライラしてしまいますよね。

というわけで、今日は、実際にページ表示速度を測定し、簡単に改善できそうなところは改善してみたいと思います!

スポンサーリンク

サイト高速化の重要性

これは、Googleさんが公言しております。

Googleウェブマスター向け公式ブログにはこのように書かれています。

 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。

Googleウェブマスター向け公式ブログ


ページ読み込み速度が遅いと、モバイル検索の順位に影響がでるそうですね。

ただ、以下のようなことも書かれているため、よっぽど遅くなければ大丈夫そうです。

 この ”Speed Update” (と私たちは呼んでいます)は、ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し、ごくわずかな割合のクエリにしか影響しません。

Googleウェブマスター向け公式ブログ


ただ、その「遅さ」は明記されていないため、どのくらい速ければいいかは正直わかりません。

とはいえ、サイトのページ表示速度が重要であることは間違いなさそうです。


Googleさんの検索順位にも影響しますが、ページが遅いと見る人にとっても辛いですよね。

アン<br>パパ
アン
パパ

そもそも、表示速度があまりにも遅いと、途中で見るのやめたくなるかもしれません。

離脱率にもつながるので、ページの表示速度の高速化はやはり重要です!

ページ表示速度を計測しよう!

ページ表示速度を計測できるサイトはいくつかあります。

実際には、速度というよりは、他のサイトに比べて速いか遅いか点数で表示してくれます。

今回は、3つサイトを紹介したいと思います。

GTmetrix

GTmetrixは、サイトのパフォーマンスをチェックし、どこが遅いか教えてくれるツールです。


さっそく、前回のこちらの記事でチェックしてみたいと思います。


さきほどのGTmetrixのサイトに、URLを入力すると結果がでます。



結果はこちら


オーマイガー!E判定!

PageSpeed Scoreの平均点は現時点で72%とのことですので、平均以下という結果に絶望(泣)


絶望しても仕方ないので、どこが悪いか見てみましょう。


これによると「Optimize images」がF評価(0点)ですね。

つまり画像が重い!とのことです。これは改善要ですね。はい。


PageSpeed Insights

続いて紹介するのは、Googleのツールである「PageSpeed Insights」です。


これも、サイトの速さを100点満点で評価してくれます。

使い方もURLを入力するだけです。先ほどと同じ記事でチェックしてみましょう。

モバイルの結果がこちら。


50点です。赤色ではないから少しはマシなのでしょうか。

続いて、パソコンの結果がこちら。


おっ、こちらは82点。マーマーといったところでしょうか。

しかし改善の余地はありそうですね。

改善できる項目はこんな感じで見ることができます。


やはり「画像」に指摘がありますね。指摘内容は、GTmetrixと同じような内容でした。


Test my site

最後は、こちらもGoogoleのツール「Test my site」。


モバイルサイトの速度を簡単に測定できるツールです。

前回の記事のURLはまだ認識できなかったので、トップページで測定しました。

果たして、結果は?


判定:「遅い

遅いってダイレクトで言われるとショックですね。4.1秒とリアルな数字もでてきました。

一般的にはウェブサイトは3秒以内にしろ!とよく言われているので、4秒だと人によっては遅いと感じそうな時間です。

これは改善しなければなりませんね…


表示速度を改善しよう!

GTmeterixでも、PageSpeed Insightsでも、「画像」に関する指摘がありました。


画像については、簡単に改善できそうですので、まずはここを変えてみたいと思います。

アン<br>パパ
アン
パパ

そういえば、記事を書くことに夢中で、画像は圧縮せずそのままアップロードしていました。反省です。


ちなみに、改善前はどのくらいの容量があったのでしょうか。

前回の記事で使われた画像の容量を調べてみたいと思います。

えーっとどれも数百KB。トータルでなんと2,482KB

自分のマンションの回線は、遅い時250KB/秒くらいの速度なので、このページを見るだけで10秒かかる計算ですね。

これではまずい!

というわけで、ツールを使って圧縮しましょう。

今回は、Googleが提供しているSquooshという画像圧縮ツールを使ってみましょう。


このサイトにアクセスして、画像をドラック&ドロップするだけです。


ドラック&ドロップすると、こんな画面がでてきます。


左側がオリジナルの画像、右側が圧縮後の画像です。

特に難しい操作をしなくても、「MozJPEG」を選択して、Qualityを70にするだけで70%も容量を削減できてしまいます!

サイズ変更(Resize)などもこの画面でできるのが嬉しいですね。右下のダウンロードのマークを押せば圧縮後の画像が手に入ります。

とても簡単ですね!

細かいことができてGoodなのですが、一括で複数画像できないのが欠点ですね。

もし、複数画像一気に圧縮したい場合は、「tinypng」というサイトもオススメです。



さてさて、画像圧縮後どのくらいサイズが減ったのでしょうか。


圧縮前は2,482KBでしたが、なんとトータルで566KBまで圧縮できました!なんと77%の圧縮です

さて、もう一度、圧縮後の画像をアップロードし直して、GTmetrixで計測してみましょう。

結果は…


改善前はE判定でしたが、画像を圧縮しただけで、C判定になりました!


改善前は「Optimize image」はF判定でしたが、D判定まであげることができました。


今回画像の圧縮をしましたが、手軽にページ表示速度の改善ができますね。

これはオススメです。

まとめ

なかなか、ブログを始めたばかりだと、記事に書くのに夢中になり、ページの速度まで頭が回らないと思います。

ただ、ページが遅いと以下のデメリットがあります。

遅いサイトのデメリット
  • 検索インデックスに影響がでる可能性がある。
  • ユーザが離脱してしまう。


ページ表示測定は、今回紹介したように簡単にできますので、どこかのタイミングで測定することをオススメします。

測定すると、何が原因かわかりますので、その指摘を見てみましょう。


特に、私のサイトのように重い画像を使っていた場合は、簡単に改善することができます。


ブログはもちろん内容が一番ですが、二番はサイトの速さといってもいいくらい重要なものだと思います。

アン<br>パパ
アン
パパ

今回は画像を見直しましたが、もっと時間をかけてじっくりとサイトの高速化をしていきたいですね!



それでは、また! アンパパでした。

ブログを書いている人
アンパパ

ブログがとにかく好き | 4ブログ運営で1万記事目指す | ブログ飯が目標 | 1歳9ヶ月の娘が大好き | 「人生をより楽しく幸せに」がテーマのアンパパブログ執筆中 | ブログ運営ノウハウ発信 | お得情報発信 | 育児便利ネタ発信 | 詳しいプロフィールはコチラ
  \フォロー、はてブお願いします/

アンパパをフォローする
ブログ
スポンサーリンク
アンパパをフォローする
アンパパブログ
タイトルとURLをコピーしました