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

超速! 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などの検証ツール

2019-02-11T09:39:53+00:00

About the Author:

齋藤大地
取締役。大手Sler出身。三度の飯よりコーディングが好きな人間。得意じゃないイラレやフォトショなどの仕事をしている時は目が死んでいる。使用言語は、Swift、Ruby(Ruby on Rails)、PHP、Javascript、Kotlin(ちょっとだけ)。

Leave A Comment

TWITTER

ご相談ください

 確認ページはございません。内容をご確認の上チェックを入れてください