超速！Webページ速度改善ガイド 使いやすさは「速さ」から始まる WEB+DB PRESS plusシリーズ

佐藤歩(著者), 泉水翔吾(著者)

• 販売会社／発売会社: 技術評論社
• 発売年月日: 2017/12/01
• JAN: 9784774194004

商品レビュー

2024/02/19

基本がよくわかる。まだ自身が初心者であるため、リファレンス書籍として手元に置いておき適宜読み直したい。

2023/04/23

■読んだ動機
最近パフォーマンスを気にする機会が多く、この本が気になり手に取った

■感想
ブラウザの仕組みについて非常に詳しく書かれており、
60FPSを目標とする
CSSのshadowやborder-radiosはレンダリングコストが高い
などそのほかにもブラウザがレンダリングを完了するまでに何が起きているか学べることが多くて良かった。

■以下気になった箇所

WebフロントエンドエンジニアがWebページの速度を表現するには、大きく分けてページロードとランタイムという2つの観点があります。この2つがいずれも高速であれば、そのWebページは速度面において高い品質を実現できていると言える。

RAILモデル 注16 は、Webページの速度の重要性について啓蒙するGoogleのエヴァンジェリストたちによって紹介されているモデルです。これはResponse、Animation、Idle、Loadの頭文字をとったもので、それぞれのタイミングの応答時間について 表1.2 の目標値を掲げています。

サーバがクライアントにデータを送信するときは、いきなり大量のデータを送るわけではなく、小さいデータサイズでの送信から始めて、 輻輳 注３ しないようにコントロールしながら徐々に転送速度を上げます。このようにTCP接続におけるデータのやりとりが徐々に高速になるしくみを、TCPスロースタートと呼びます

ネットワーク処理を最適化していくうえで意識するべき基本原則は、 ・データの転送量をなるべく小さくすること ・データの転送回数をなるべく少なくすること ・データの転送距離をなるべく短くすること の3つ。

FPSとは、画面が1秒間に何回更新されるかの単位です。FPSは動画、映像処理など全般で使われている単位で、たとえば我々が普段見ている日本のテレビはおよそ30FPS、映画やアニメは24FPSで作られています。 Webでは、60FPSを目標として考えましょう。これは、一般的なディスプレイのリフレッシュレート 注２ が60Hzだからです。

Webページのビジュアルを決めるスタイルは、レンダリング処理の速度に直結します。CSS3以降に追加された影やグラデーション、角丸などを表現するプロパティは、画像を使わないで実現できるビジュアルの幅を広げてくれた代わりに、複雑なビジュアル上の処理を必要とするためコストが高くなりがちです。

2018/05/19

Webページのパフォーマンス改善に取り組む上で手に取りました。ネットワーク処理、レンダリング処理、スクリプト処理のそれぞれのアプローチで調査や改善について書かれていたので、今直面している課題や改善したいポイントがどの側面に近いのだろうかと考えながら取り組むことができました。