普段、インターネットでなにかを調べる際に、WEBページが開かずイライラした経験はありませんか？
「WEBページの表示速度が1秒から3秒に落ちると、直帰率は32％上昇する」という Googleの調査結果にもあるように、WEBページの表示スピードが遅いと、サイトを訪れたエンドユーザーのユーザー体験に悪い影響を与えることで直帰率、離脱率を上げてしまい、結果としてWEBサイトの運営目標としているコンバージョンに達するまでのエンドユーザーを少なくしてしまうことにつながります。
WEBサイトの入り口となる、トップページを含めたランディングページの表示速度も重要ですが、資料請求や予約・お問合せ・購入用ページなどの表示速度であったり、入力フォームの動作速度もユーザー体験に影響を与える要素の一つと考えることができます。
今回の記事では、エンドユーザーにより快適にWEBサイトを閲覧、利用していただくことを目的としたWEBページ表示速度の改善施策をご紹介いたします。
1.WEBページが表示される仕組み
WEBページの表示速度を改善するために、私たちが閲覧しているWEBページが、どのような仕組みで表示されているのかを、出来るだけ簡単にご説明いたします。
WEBページを表示するためにはまず、クライアント側から「このURLのページを表示したい」というリクエストをそのWEBページが格納されいてるサーバーに送ります。
リクエストを受け取ったサーバーは、WEBページを表示するために必要なリソースをクライアント側に返し（レスポンス）、受け取ったクライアント側のブラウザがそれらを表示します。
2.表示速度とエンドユーザーの環境
WEBページの表示速度に着目するとき、エンドユーザーの様々な環境を考慮する必要があります。
私は自宅に帰るとMacBook Proで家庭用wifiを使っていますが、週末や深夜などのBtoCにおけるピークタイム時には、表示速度が遅くなります。
ECサイト運営の場合、予約や購入フォームの表示や処理速度の遅延は、致命的な機会損失の増加につながります。
ロースペックのデバイスで且つ遅い回線を考慮した表示速度に対する調査と対策が重要となります。
例：エンドユーザーの環境
- スマートフォン ＋ モバイル回線
- タブレット ＋ 公衆wifi
- 家庭用ノートPC ＋ 家庭用wifi
- 業務用ハイスペックPC ＋ 業務用 高速回線 ← ここ視点のみの危険性
※2020年に開始され202X年に本格稼働が開始する5Gや、普及が進むHTTP/2など、WEBページの表示速度に関わる環境も日々、進化していきます。
その時々のエンドユーザー環境を正しく把握し、それにあわせたリソースを活用することが重要となります。
3.表示速度の視点における3つの処理
HTMLドキュメントやサブリソースを取得するネットワーク処理、ディスプレイへ表示するレンダリング処理、JavaScriptによるスクリプト処理と表示速度の視点においてWEBページを表示する処理を3つに分ける事ができます。
表示速度の改善施策の中でも今回は主に、ネットワーク処理の改善施策について、ご紹介いたします。
表示速度の改善施策
ネットワーク処理は、主にWEBページのページロード速度に影響を与えます。
ネットワーク処理の速度に影響を与える要素として、WEBページのリソースサイズ、リクエスト数がありますが、こういった要素を改善し、ページロードにかかる時間を短縮することで、表示速度を改善していきます。
表示速度の改善施策
- 次世代フォーマットでの画像の配信
- テキストリソース圧縮の有効化
- キャッシュポリシーの配信
- WEBアニメーションの軽量化
計測に使用する主なツール
Google Chromeデベロッパーツール
Google Chromeデベロッパーツールのnetworkタブを見ることでネットワーク処理が発生したリソースを時系列で確認することができます。
WebPagetest(WEBページテスト)
Googleが中心となって提供しているWEBページ表示速度のモニタリングサービスです。
PageSpeed Insights（ページスピードインサイト）
PageSpeed InsightsはGoogleが提供しているWEBサイトの表示速度を計測することができるツールです。
点数制でページの表示速度を評価し、具体的な改善案を提示してくれます。最高100点です。
1.次世代フォーマットでの画像の配信
画像の品質を担保しファイルサイズを軽量化するため、画像ファイルの次世代フォーマットによる配信が推奨されています。
ページスピードインサイトにもあるように、JPEG 2000、JPEG XR、WebPなどの次世代画像フォーマットは、PNGやJPEGより圧縮性能が高く、ダウンロード時間やデータ転送量を抑えることができます。
WebPは、Googleが開発している次世代画像ファイルのフォーマットです。
20％以上のファイルサイズの軽量化が可能で、可逆圧縮・非可逆圧縮の両方に対応しています。2019年10月現在においては Safariを除き、主要なブラウザーに対応しています。
目的
- ダウンロード時間を短縮する
- データ転送量を抑える
今回検証用ページでWebPを導入したところ、ファイルサイズを322KBから168KBまで、落とすことに成功しました。
実際にページスピードインサイトで比較してみるとスマートフォンでは8ポイント、PCだと10ポイント改善されました。
2.テキストリソース圧縮の有効化
HTMLやCSS、JavaScriptといったテキストベースのリソースは、gzip、deflate、brotli圧縮をして配信し、ネットワークの転送量を抑えることでページロードの速度を短縮し、表示速度を改善することが可能です。
gzipは、テキストリソースを60％~70％まで圧縮することができます。
目的
- データ転送量を抑える
今回は、gzipでの圧縮を実施いたしました。
Google Chromのデベロパーツールによる計測でロード（Load：PC表示）が、2.57秒から1.20秒に短縮され、ページスピードインサイトで比較してみるとスマートフォンでは26ポイントから37ポイント、PCでは60ポイントから68ポイントに改善されました。
3.キャッシュポリシーの配信
参照頻度が高く、更新頻度の低いリソースのキャッシュ有効時間を長くすることで、再訪問したユーザーのデバイスとサーバー間のリクエストとデータ転送量を抑え、ページの読込み時間を短縮することで表示速度の改善をすることが可能です。
目的
- データ転送量を抑える
- リクエスト数を少なくする
今回、更新頻度の低いリソースのキャッシュ有効時間を最大365日間にすることで、ページスピードインサイトでの結果はスマートフォンだと34ポイントから39ポイントに、PCだと74ポイントから81ポイントまで改善されました。
4.WEBアニメーションの軽量化
表示速度の改善に優先度をおき、機能を必要最小限まで抑える施策が実施できる場合、複雑な制御が可能なJavaScriptを用いた高品質なWEBアニメーションから、比較的にシンプルなCSSを用いたアニーメションにすることで、スクリプト処理にかかる時間を短縮し、表示速度の改善が可能になることに加え、JavaScriptの実行にかかる時間とランタイム速度を短縮する事でよりスムーズなアニメーションを実装することが可能となります。
目的
- スクリプト処理時間の短縮
- ランタイム速度の改善
検証用ページで実施したところ、Google Chrome のデベロパーツールによる計測でロード（Load：SP表示）が、2.16秒から1.42秒に短縮され、ページスピードインサイトの結果は、スマートフォンだと33ポイントから44ポイントに、PCだと60ポイントから95ポイントまで改善されました。
まとめ
WEBページの表示速度は、WEBサイトを運営していく上で重要な要素の一つです。
表示速度を改善することで、エンドユーザーに快適にWEBサイトをご利用いただくことができることに加え、SEO対策としても、検査結果順位の向上が期待できます。
WEBページの表示が遅いと感じたら、ページスピードインサイトで貴社サイトの表示速度をチェックと改善をご検討いただければと思います。
