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対応が必須。

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

    WS|コーディング 2

    「Webサイト制作のワークショップ」のメモです。 サンプルデータを使ってスマホ対応(レスポンシブWebデザイン)を行う。スマホの仮想ウインドウサイズの横幅を取得して、CSSで表示を振り分ける。Web…

    WS|Webブラウザ

    「Webサイト制作のワークショップ」のメモです。 ブラウザによってWebサイトの表示が変わるというのは、昔ほどではないが今でも存在する。理由はブラウザに使われているレンダリングエンジンがそれぞれ異な…

    WS|セキュリティ意識とパスワード管理

    「Webサイト制作のワークショップ」のメモです。 様々なアカウントを管理するために 1Password.app を使う。パスワードは、自分で覚えることができて手入力できるようなものは使用しない。「N…

    WS|Webサイト制作

    Webサイト制作のワークショップを各所で行いたいと思います 都内某所でWebサイト制作のワークショップをやっています。他にも各所で開催していきたいと思うので、ご興味のある方はよろしくお願いします。何…

    WS|マルチデバイスへの対応とモバイルファースト

    「Webサイト制作のワークショップ」のメモです。 あらゆるWebサイトへのアクセスが、PCよりもスマホからのアクセス数の方が多くなった。そういった背景にあわせてWebサイト制作の順番も素早く変えてい…