「Webサイト制作のワークショップ」のメモです。

Webサイトの読み込みスピードは非常に重要な要素。PCのネット回線は高速化したが、スマホはまだまだ回線速度が貧弱。

ネットショップの場合、読み込みスピードによって購入率が変わる。Amazonの公表データでは、読み込みスピード0.1ms（0.001秒）の違いで売上が1％変動する。

enjoy!

データの圧縮方法

  • 画像を最適化/再圧縮することで、わずかではあるがデータサイズを圧縮できる。1ファイルあたり数KBの圧縮だとしても、1ページあたり1MB以上のデータ量を減らせることもある。
  • html/JavaScript/CSS の余計なスペースやコメント、改行やインデントを削除する。
  • JavaScript の読み込み順を最適化することで、レンダリングを早くする。
  • ページ構成や、html のマークアップを見直す。
  • サーバーを移行してパフォーマンスをアップさせることも方法のひとつ。
  • AMP（Accelerated Mobile Pages）対応をして読み込みを高速化する。

Google のチェックツール

ページのパフォーマンスを測定するためのツール。
PageSpeed Insights

ページの表示は5秒以内

ページの表示にかかる時間が5秒を超えると離脱率が上がる。さらには3秒以内を目標とし、1秒以内までいきたい。ms単位でチューニングを行っていく。

スマホを手に持って次の画面が表示するのを待っている状態。この状態で5秒以上何も表示されない場合は、ほどんどの人が待てずに離脱する。

すべての読み込みが完了しなくても、スクロールせずに表示される部分の読み込みが完了するまでの時間。

そもそもページ読み込みスピードを考慮したコンテンツ設計であることが前提。

1秒以内の表示を達成するにはAMP対応が必須。

こちらの関連記事もあわせてどうぞ！