Webサイトの表示スピード改善方法
みなさんこんにちは！
Webデザイナーのアリーです。
今回はWebサイトの表示スピードについて解説していきます。
Webサイトを閲覧していて、表示が遅いと感じたことはありませんか？
ユーザーがサイトを離脱する一番の原因は、ページの表示が遅いことです。
数秒の違いでも、ユーザーにとってはストレスとなり、大きな機会損失を生みだしてしまいます。
今回は、Webサイトにおけるページの表示スピードと離脱率（ページから離れる割合）や直帰率（サイトから出て行ってしまう割合）との関係、原因と対策についてご紹介します。
目次
ページ表示速度が遅いとどうなる?
直帰率・離脱率が増大
ページの表示スピードが遅いとどうなるか？
みなさんが本能的に行っている行動です。
それはページの閲覧をあきらめ、他のサイトへ行ってしまうことです。たかが数秒の出来事ですが、数秒の積み重ねが数分・数十分となり年間にすると数時間・数日間と、表示されるのをただ待っているだけの時間を過ごしてしまうことになるのです。
当然そういった表示の遅いサイトは早々に読み込むことを諦めますよね？
一般的に人がWebサイトの表示に待てる時間は『3～5秒』程度だと言われています。
表示速度が3秒を超えたあたりから一気に直帰率（サイトから出て行ってしまう割合）・離脱率（ページから離れる割合）が増加し、5秒あたりでは直帰率・離脱率が40%程度まで増加するとの統計結果になっています。
またGoogle（グーグル）ではページ表示速度も評価要因の１つとなっています。
売上にも影響
ユーザーの離脱率が高くなるということは、もちろん売上にも大きく影響します。
Amazonの調査では「サイト表示が0.1秒遅くなると、売り上げが1%減少し、1秒高速化すると10%の売上が向上する」と報告されています。
ページの表示速度1秒の差が、今この瞬間にも売上の機会を損失しているのです。
ページ表示速度の高速化
ページの表示スピードを高速化させるためには「データの読み込み量を減らす」ことが重要です。
データの読み込み量を減らす
データの読み込み量を減らすとは、具体的にどのようなことでしょうか？
まずWEBサイトを構成するデータの主なものは下記の3つです。
・HTML/CSS
・Javascript
・画像ファイル
データの読込量を減らすためにはこれらのファイルを軽量化していく必要があります。
[HTML/CSS]
コード記述の無駄を省くことが一番です。
例えばChromeをお使いでしたらブラウザ上で右クリックし「ページのソースを表示」するとHTMLのソースコードが表示されます。ユーザーがサイト運営に関わっている方でHTMLの知識がなかったとしても、視覚的にコードの内容が多いのか少ないのかは、直感的にわかるかもしれません。
必要以上に階層化されたHTMLはページの読み込みが遅くなるケースがほとんどです。軽量化するためにはコーディングのやり直しやリニューアルが必要になる場合もあります。
[Javascript]
シンプルに必要最低限の記述を心掛け、コードが膨大になる場合はwebpack/gulp等で圧縮するのが一般的なアプローチです。
[画像ファイル]
デザイン性を重視したサイトだとどうしても画像1枚で1MBあるようなケースが出てきてしまいます。
例えば一般的なスマートフォンの画面解像度幅は420px未満がほとんどです。デバイスの解像度幅に応じて必要最低限のファイルサイズの画像を用意したり、デザイン性とファイルサイズを両立した限界ラインを攻めた圧縮を行う必要があります。
実は重たいページの大多数は、ページ全体の画像ファイルサイズを抑えることで表示速度を３秒未満に抑えられるケースがほとんどです。
さいごに
今回は、Webサイトの表示スピード改善方法を解説しました。
Webサイトを見てもらうには、サイトの読み込みスピードがいかに重要なのかご理解いただけたかと思います。
Webサイトを作るなら、やはり多くのユーザーに見て欲しいですよね？
もし「既存サイトの高速化・軽量化に行き詰まっている」「サイトリニューアルを考えている」という場合でしたら、一度LAKAまでご相談ください。
LAKAではWebサイト表示速度改善などのSEO対策も承っております。
ぜひご興味のある方は、お気軽にお問い合わせください。