サイトの高速化をすべき理由と方法

🍟

このメディアはロリポップ!のハイスピードプラン+WordPressで運用しています。
WordPressについてはGatsbyという静的サイトジェネレーターを活用し、超高速でのページ表示を実現しています。
詳しい実装方法についてはペパボテックブログをご確認ください。

2020-07-17

サイト運営をして行く中で、色々な指標が出て来て、気になることかと思います。サイトの規模を成長させる、売上を伸ばすなど各種結果に、大きな影響を及ぼすものとして、サイトスピードというものがあります。今回は、サイトスピードをどのように計測して、どのように改善するのか?をご説明していきたいます。

■サイトスピードとは

サイトを高速化するためにも、現在のサイトスピードがどの程度のものなのか?を定量的に分析することが必要です。サイトスピードとは、具体的にどのように計測されるものなのでしょうか?

Googleが公式に発表をしているものとしては、下記です。

内容が難しいと感じるなら読み飛ばしていただいても構いません。簡単に説明すると「ユーザーが快適にサイトを閲覧して情報を取得できるか? 商品を購入できるか?などの利便性を担保できているか?」ということが評価となるようです。

「サイトの速度」カテゴリのレポートには、コンテンツの読み込み速度や応答速度が表示されます。改善が必要な領域を特定したうえで、改善の程度をトラッキングすることができます。

サイトの速度レポートでは、以下の 3 種類の反応時間を測定します。

  • サイト上でサンプルに設定したページビューの表示時間。複数のディメンションを基準にデータを表示し、さまざまな観点からページの読み込み速度を確認できます(ブラウザ別、国別など)。これらのデータはページ速度レポートに表示されます。
  • トラッキングの対象にしている個々のクリック、イベント、ユーザー操作の実行速度または読み込み時間(画像の表示時間やボタンのクリックの反応時間など)。カスタム速度レポートで参照できます。
  • ブラウザがドキュメントを解析し、ユーザーの操作が可能になるまでの時間。このデータを参照するのに追加の設定は必要ありません。このデータは、[ページ速度] レポートの [DOM 速度] サブタブで参照できます。

■サイトスピードは何に影響するのか?高速化するべき理由

・Googleの検索結果の表示順位

2018年にモバイルページの検索順位の評価付け(速度が遅いとマイナスの評価を付けるということですが)として、サイトスピードを評価項目に取り込むと発表しました。また、先日2020年6月にも改めてGoogleウェブマスター向け公式ブログで「より快適なウェブの実現に向けたページ エクスペリエンスの評価」 という記事を発表して、サイトスピード(ページの読み込み速度)の重要性を訴えました。ユーザービリティ/快適さなどが強く求めれているので、今後より一層この指標は重要になると思われます。

・ユーザーの離脱/売上の減少

皆さんがお客様視点に立って考えて頂くとご理解頂けるかと思いますが、サイトスピードが遅いと、お客様は苛立ち、表示される途中でサイトから離れてしまいます。また、ECなどの物を購入することを目的としているサイトの場合には、お客様は快適に買い物ができずに、カートなどに商品を入れて、途中で買い物を取りやめてしまいます。これは、結果的に皆さんの売上の減少にも繋がることです。

ちなみに、一般的には、3秒以内には目的のページが開ける状態が望ましいと言われています。この秒数を超えると、上記に記載したような離脱や売上減少が懸念されます。

・表示速度が〇秒落ちると、売り上げに〇%影響する

Googleが2017年2月に公開したフォーラムによれば、

出典:Google / SOASTA Research、2017年。

表示速度が1秒から3秒に落ちると、直帰率は32%上昇する。 表示速度が1秒から5秒に落ちると、直帰率は90%上昇する。 表示速度が1秒から6秒に落ちると、直帰率は106%上昇する。 表示速度が1秒から10秒に落ちると、直帰率は123%上昇する。

といったデータが公表されています。

数秒の遅さが、PVに影響し、ひいては売上(コンバージョン)に影響することになります。

■サイトスピードを計測する方法

Googleが提供するPageSpeedInsightで、サイトスピードを計測することができます。サイトにアクセスをして、検索窓にURLを入力すると、下記のようなレポート結果が表示されます。

また、本レポートでは詳細に、どのような項目を対策をするべきか?を個別に指摘をしてくれます。Googleは対策が直接的にPageSpeedには影響しないとは書いていますが、「ページの読み込み時間を短縮できる可能性があります」とGoogleも記載をしているため、対応として外せないところと考えるべきです。

■サイトスピードの対策として何を行うべきか?高速化する方法

「画像の最適化」「ブラウザのキャッシュを活用する」「CSS、HTML、JavaScriptを縮小する」「サーバーの応答時間を短縮する」などの各種アドバイスがGoogle PagSpeedInsightからは受けられると思います。

1.画像サイズを軽減する

画像は、ページをダウンロードする際のデータ量の大部分を占めることがよくあります。画像の圧縮などでサイズを軽減することでページの表示速度が改善されることがあります。

2.ブラウザのキャッシュを活用する

一度表示したページのデータを保存し、再度同じページを表示する時にそのデータを利用し都度サーバーから大量の情報を取得する必要がなくなり、サーバーへのリクエスト数が減り、ページをより速く表示することができるようになります。

3.CSS、HTML、JavaScriptを縮小する

容量を小さくするために、不要なスペース、改行、スペースなどを取り除きます。縮小、圧縮することでダウンロード、表示までの速度が改善します。気を付けるべき点は、縮小することで可読性は著しく損なわれるので、後々サイトソースを読む際に、煩雑になるという懸念があります。

4.サーバーの応答時間を短くする

この項目がサーバー側での対応などが一番必要になる項目ですが、Googleは下記のような対応を推奨しています。

「サーバーの応答時間は 200 ミリ秒以下に抑える必要があります。 サーバーの応答が遅くなる要因としては、さまざまな理由が考えられます。たとえば、速度の遅いアプリケーション ロジック、遅いデータベース クエリ、遅いルーティング、フレームワーク、ライブラリ、リソースによる CPU の消費、メモリ不足などです。サーバーの応答時間を改善するには、こうした要因をすべて検討する必要があります。 サーバーの応答時間がなぜ遅いのかを解明するには、まず測定を行います。次に、データを参照しながら、問題の対処方法に関する適切なガイドを確認します。問題が解決した後もサーバーの応答時間を継続的に測定して、パフォーマンスのボトルネックが発生したら対応する必要があります。」

https://developers.google.com/speed/docs/insights/Server?hl=ja

上記の2項目と異なり、サーバー自体の選定に関わる話で、他の項目を対応しても改善しない場合には、まずは計測、その上で改善策に着手されることをお薦め致します。

上記にて、サイトスピードの重要性と計測・対応方法について説明させて頂きました。コンテンツが表示されるのが速かったり、快適にお買い物が出来たりするのが、良いことは、皆さんもイメージして頂けるかと思います。お客様に快適な体験をしてもらうためにも、欠かさず対応を行っていきましょう。

ロリポップは、ロリポップ!アクセラレータで、「キャッシュサーバー」に一時的に記録(キャッシュ)しサイトスピードの改善を行います。

ロリポップ!のお申し込みはこちら

記事一覧に戻る