Webサイトのページスピード(表示速度)を改善！SEO的影響、測定方法
ブログなどWebサイトのページスピード（表示速度）について。
測定の仕方や、表示スピードアップの方法、SEO的な影響を調べました。
SEO的な影響
ページスピードが遅いほど直帰率が高くなる
一般に、ページの表示にかかる読み込み速度は3秒未満が適切と言われているようです。
ページ読み込みは「2秒以内」に - 3秒待てないモバイルユーザー、画像圧縮で表示速度改善を | Beyond（ビヨンド）
ページスピードが遅いほど、ユーザーのストレスとなり、ページを見る前に閉じられてしまう率は高まるようです。
つまり、表示速度が遅くなるほど直帰率や離脱率は悪化する、ということですね。
直帰率は検索順位に関係ない
直帰率・離脱率・滞在時間などが直接的に検索順位に影響をおよぼすことは、ないようです。
ただ結果的にページが読まれることなく離脱されてしまうので、ほかのページへの移動やPVが下がったり、Googleアドセンスやアフィリエイト広告などを貼っていてもクリックされる機会を逃してしまいます。
SEOの目的
SEOの目的は検索順位の上昇、クリック数の増加だけではありません。その先にある、CV（コンバージョン・広告のクリックや、資料請求のダウンロードなど）数を増やすことまで含まれます。
ページの表示スピードをアップすることは、そのぶん直帰率・離脱率が改善され、結果としてコンバージョン率の増加につながるわけですから、SEO的影響は間接的ではあるが大きいと言えるのではないでしょうか。
ページスピードの測定方法
ページ表示速度が計測できるツールはPageSpeed InsightsやTest My Sightなどいくつかありますが、Googleアナリティクスでもデータを見ることができます。
Googleアナリティクスの左メニューから[行動 > サイトの速度] を選択後、
- [ページ速度] - サイトの平均読み込み時間と、それに対する各ページごとのサイト平均との比較などが見られます。
- [速度についての提案] - ページごとのPageSpeed Insightsの提案個数が表示され、個数をクリックするとそこからPageSpeed Insightsの提案ページへと飛ぶことができます。
ページスピードの改善方法
ページの表示速度を改善する方法はいくつかありますが、ここでは主な3つの施策をご紹介します。
- 画像の圧縮
- 画像の遅延読み込み
- コードのminify化
画像の圧縮
画像サイズを圧縮することでダウンロード時間が短縮され、ページスピードの改善につながります。
TinyPNG – Compress PNG images while preserving transparency
こちらのツールはファイル形式がJPG・PNGまとめて一括で圧縮できます。圧縮を繰り返すほど圧縮率も高まりますが、画像の劣化も進みます。
回数を重ねて圧縮するときは、画像の劣化度も確認しながら進める必要があります。
コードのminify（ミニファイ）化
HTML、CSS、JavaScriptなどのソースコードには、ブラウザを描画するのには不要な空白や改行、コメントなどが含まれています。これらを取り除いてファイルサイズを縮小すれば、画像の圧縮と同じくダウンロードにかかる時間が縮まり、結果サイトの表示速度がアップします。
minify化したコードはすべてが1行にまとめられてしまうので、視覚的に修正しにくくなります。コード整形ツールやリファクタリングツールを使えば視覚的に編集しやすい形式に戻せます。
画像の遅延読み込み
PageSpeed Insightの[PageSpeedの提案] を見ると、改善できる項目として「オフスクリーン画像の遅延読み込み」というものがあります。
詳細を開くと現れる[Learn more.] のページに進むと、IntersectionObserver（インターセクション・オブザーバー）を利用した画像イメージの遅延読み込みが推奨されています。
IntersectionObserverを使用して、オフスクリーンイメージを遅延ロードするタイミングをインテリジェントに決定することを検討してください。たとえば、非常に長いページの下部にいくつかの画像があるとします。IntersectionObserverを使用すると、ユーザーがページの途中までスクロールした場合にのみ画像を読み込むことができます。
引用元 : Offscreen Images | Tools for Web Developers | Google Developers
IntersectionObserverの導入方法などに関しては、以前こちらの記事で書かせていただきました。
ただ、この方法だとCreate Linkというプラグイン（拡張機能）を使ってひとつひとつの画像ごとにコードを適用していくので、画像の数が多いと若干手間がかかります。
近いうちにあらためて、IntersectionObserverの導入手順をもうすこしわかりやすくまとめ、作業も簡略にできる方法を考えたいと思っています。
さいごに
今回はWebサイトのページスピード（表示速度）の測定・改善方法、SEO的な影響について私なりに学んだことを書かせていただきました。
PageSpeed Insightsは、URLを入力すればお手本にしているサイトやブログのページスピードを調べることもできますので、自分のサイト（ブログ）と表示時間や画像サイズなどにどのくらい違いがあるのか、くらべてみるのも面白いかと思います。
ここまで読んでいただき、ありがとうございました。
