超速！Webページ速度改善ガイド の商品レビュー

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

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

2018/03/10

主に、フロントエンド(ネットワーク処理含む)によるWebページの高速化手法について書いた本。最新のブラウザを想定したつくりになっているので、最近Web制作から離れていた自分には初めて知ることも多かった。
応答時間の基準としては、Googleが提唱しているRAILモデルというものがあるらしい。Response、Animation、Idle、Loadの頭文字なんだとか。今後のサイトづくりの参考にしたい。
HTTP2に優先度というものがあるということを初めて知ったのだけど、リクエストした順でいいんじゃないのと思った。リクエストした順に届くとは限らないとかなのかな。それか、リクエストした順に優先度を高くするのが難しい場合があるのだろうか。
Timing APIについては面白そうだけど、覚えれる自信はない。こういうのがあるということは覚えておきたい。
テキストリソースの圧縮に、gzipが使われるのは知ってるけど、より圧縮率の高いzopfliや、brotliなんてものもあるのだとか。どちらも、IE以外の最新ブラウザなら対応しているとのことらしいけど、使ってるサイトは増えてるんだろか。
画像の遅延ロード(スクロールしないと見えない画像は実際に表示される位置になるまでロードしない)については、自分はやめてほしいと思うタイプ。画像の表示を遅延させるメリットってあまりないような気がするんだけどなぁ。たまにそういうサイトあるけど、サササッと見たい場合は表示がワンテンポ遅れて嫌になる。
他に、初めて知ったことはWeb AnimationsというJavaScriptでCSSやSVGのアニメーションの機能を実装するアニメーション用のAPI。アニメーションについては今後重要になってくるような気もするので、知っておきたい。後、CSSに「will-change」なんてプロパティで、GPUの最適化の準備を促すことができるのだとか。CSSに書くことはちょっとだけ違和感あるのだけど、アニメーション処理を行うならこういうことも知っておいたほうがいいのかも。
意図せず実行され続けるタイマーは確かにありえそうだなぁ。にしてもなんで、javascriptのクラスにはコンストラクタはあるのに、デストラクタはないんだろう。
後、たまに聞くのだけど、何でJPEGの圧縮率って工夫次第でいろいろ変えれるのかよく分かってなかったりする。JPEG自体がどういう仕組みで圧縮されてるか分かってないからなぁ。このへん、もうちょっと勉強してみようか。
それと、『HTTP Client Hints』という、HTTPリクエストヘッダにブラウザの横幅などの情報が付与される仕組みがあるそうなのだけど、これって何かムダな気がするなぁ。User-Agentみたいなもんといえばそうなのだけど。SPAが普及しているんだから、いらないような気がする。
後、最後の最後にかかれていた、『Resource Hints』はちょっと気になった。CSSで読み込むフォントファイルを先に読むことができるというのは確かに高速化につながるかもなと思った。prerenderとか結構便利な気がする(負担は確かに小さくなさそうだけど)。