超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)

著者 : 佐藤歩 泉水翔吾

• 技術評論社 (2017年11月23日発売)

超速! Webページ速度改善ガイド ── 使いやすさは「速さ」から始まる (WEB+DB PRESS plus)の感想・レビュー・書評

主に、フロントエンド(ネットワーク処理含む)による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とか結構便利な気がする(負担は確かに小さくなさそうだけど)。