こんにちは。シナップ広報・ライターの鈴木しのです。

みなさんは、Webサイトを開いた際に読み込みが遅いあまりにページを止むを得ず閉じてしまったという経験はないでしょうか。 あるいは、Webサイトの運用の際に「ページスピードは重要だ」といった話を耳にした経験はないでしょうか。

サイトのユーザビリティー向上に一役買っているとされているページスピードですが、なんとなく重要だとわかってはいるものの、なぜ重要視されているのか、またそれはどうしたら改善ができるのかイマイチピンときていない方もいることと思います。

そこで今回は、シナップエンジニアの野原・山下が社内勉強会でまとめた内容に準じて、ページスピードの重要性・改善方法を前・後半の2回に分けて解説します。

Webサイトにまとめられているようなテクニックばかりに頼るのではなく、仕組みの部分からまるっと知ることでより良い改善に繋がります。 ぜひ高速化の改善に悩んでいる際には参考にしてみてくださいね。

ローディングに3秒かかると離脱率が半数を超える

もしもページスピードがゆっくりだった場合の弊害とはいったいどのような点でしょうか。 「Think With Google」および「Web担当者Forum」発表のデータを参考として引用します。

まず、ページスピードが遅いことによる大きな弊害は「離脱率が高くなる」ことです。 ページを読み込むスピードが3秒を超えると、ユーザーの多くはストレスを抱えた状態となります。その結果、参考データによるとユーザーの57％が「離脱」してしまうそうです。

また、それだけではなく「（同サイトに）再訪しない」と回答するユーザーはなんと80％を越え。コンテンツがどれだけ優れていても、ページスピードにストレスを抱えた状態では読んでもらうどころではありません。

Webサイトにとって、コンテンツ一つひとつはもちろん大切な構成要素です。しかし、それ以上にページスピードはストレスレスにサイトを訪問してもらうために考えなくてはならないポイントなのです。

3秒以内に表示するページは20％程度

いっぽう、ローディング時間に関するある調査のデータを参照すると、おもしろいことがわかります。

とあるアクセス数ランキングでは、上位100以内にランクインするサイトの80％が3秒以上かかってやっとページが表示されるのだということ。

Webサイトを構成するコンテンツには大きく分けて3種類あります。主に、テキスト・画像や音楽・動画やVRです。これらは、年々とコンテンツサイズが大きくなっているため、それに伴いページスピードも遅らせる、というのです。

しかし、「ページスピードが遅くなったら離脱されやすくて、再訪もされにくくなる」はずなのに、いったいなぜ80％のWebサイトは上位にランクインし続けるのでしょうか。

それは、ほかでもないユーザビリティをどれだけ意識できているのかどうかという観点が非常に大切です。

テクニックに惑わされるな

ページスピードの改善というと、一般には「画像を最適化する」「スクリプトは直前に」など、小手先のテクニックばかりを意識しがちです。

しかし、本当に大切なのはテクニックでサイトスピードを改善することではありません。 まずはじめに行わなければいけないことは、手当たり次第テクニックを実践することではなく、ビジネスの場面でよく使われるPDCAを回すことなのです。

「この施策を行ったのだから、きっと改善されるのだろう」といった推測ではなく、計測によって改善を目指すこと。これこそがもっともユーザビリティを高めるための改善方法なのです。

フロントサイドからアプローチするサイトスピード改善

ちなみに、実際にスピードの改善を行う際のフロントサイドからの改善方法は大きく分けて5つあります。

1. リソース読み込みチューニング
2. Javascript実行チューニング
3. レイアウトツリー構築チューニング
4. レンダリング結果描画チューニング
5. 認知的チューニング

難しい言葉が並びますね。たとえば、1のリソース読み込みチューニング を例にとってみていくと、実際に行なう作業には以下のようなものが挙げられます。

・リソースファイルのminify
・適切な画像形式、画像ファイルの最適化
・cssのimportを避ける
・デバイスピクセル比に合わせて画像を指定する（srcset）
・スプライト画像でリクエスト数を減らす
・jsの読み込みを非同期にする（実行が終わるまでにドキュメントのパース、レンダリングをブロックする）
（2〜4については、詳しい解説はここでは長くなってしまうので、今回は省略したいと思います。実際に行う際は専門的な知識も多く必要なため、エンジニアとコミュニケーションを取りながら進めていくのがよいでしょう。）

これらの改善の中でも、理解しておきたいのは、5の認知的チューニング です。認知的チューニング、つまりユーザーが感じる体感速度をチューニングすることを指します。

ローディングアイコンのアクション、無限スクロールによる実質的な読み込み速度の調整、実際の処理とは異なるタイミングでフィードバック（反応）のみを返す手法など、さまざまなチューニングが挙げられます。

サイトスピードの改善が必ずしも正義なのではなく、ユーザーにとっての満足度がいったいどのポイントにあるのかをしっかりと理解することが、より良いチューニングのために必要なポイントなのです。

まとめ

サイトスピードが遅くなることの弊害や改善方法を簡単にご紹介しました。サイトの高速化では冒頭でも述べたように、闇雲にテクニックを実践するのではなく、まず計測を行い、ボトルネックを探し、その上で有効な改善を繰り返しおこなっていくことがポイントです。

そして、今回もう一つのポイントとしてあげた「認知的チューニング」。 物理的な速さもさることながら、アニメーションなどのアクションで反応を返すことにより、遅く感じさせない・早く感じさせるなど、人の認知を意識した作りにすることでも高いUXが実現できることがわかりました。

引き続き次回後編ではサイト高速化の話題でよく聞く「CDN」について解説します。 もしもサイトの高速化をご検討中の方は、ぜひ弊社までお気軽にご相談ください。