超速! Webページ速度改善ガイド 第一章

第1章 Webページの速度

1.1 Webページの速度とは何か

  • ページロードの速度--ページが表示されるまでの速度
  • ランタイムの速度--ページ上での操作に対するUIの応答速度

1.2 Webページの速度の重要性

ビジネスへの影響(コンバージョン率)

バイスやネットワークの多様化(モバイルのネットワークは非力)

技術や表現の変化(コンテンツのリッチ化)

1.3 Webフロントエンド高速化ポイント

Webフロントエンドから改善する意義

高速なリソース配信はWebページの速度を高めるために必要だがブラウザによるリソースの取得はWebページを表示するプロセスの中のほんの一部。Webページを表示するプロセスのうち残りの大半を閉めるフロントエンドの観点から改善するアプローチが重要。

サーバサイドがいかにHTMLを速くレスポンスしたとしても、Webフロントエンドに不備があればWebページの速度をすべて台なしにしてしまう。

 

Webフロントエンドを高速化する3つのポイント

1.4 Webフロントエンド高速化の取り組み肩

推測するな、計測せよ

計測や原因の調査もせずにやみくもにコードを修正するのはよろしくない。ただの当てずっぽうで再現可能なエンジニアリングではないので。

継続的な計測と改善が重要

Webページ速度は色々な要因で遅くなるので日々計測し日々改善することが重要。

開発者の特殊なハイスペック環境

一般ユーザの環境とは違うということを自覚すべし。

目標にすべき速度の具体的基準

f:id:daidai3110:20190203072454p:plain

f:id:daidai3110:20190203072522p:plain

エンジニアリングだけでは解決できない問題

速度の問題はエンジニアだけでなくデザイナー、プランナー、マネージャーなど同じプロダクトと向き合うメンバー全員の共通認識とされるべき問題。

Webページの調査に必要なブラウザの開発者ツール

Chromeなどの検証ツール