lighthouseの資料を読み込む【Properly Size Image】
モチベーション
最近、webサービスの高速化に向けて、色々と資料を読み込んでいる。Lighthouseを計測ツールとして使っているので、Lighthouse上でどのような指標を、なぜ計測しているのか把握する。
TL;DR
- screenに表示されるものよりも、大きい画像は配信しない
- そのために、一つの画像に対して複数のバージョンの画像を生成し
- クライアントの端末や、用途に応じて適切な画像を自動で参照する必要がある
Why the audit is important
理想的に言うと、あなたのページはscreenに表示されるものより、大きい画像は配信しない方が良い。それより大きなものは、無駄なbytesとpage load timeの低下という結果をもたらす。
How to pass the audit
このauditの結果において、lightouseは全ての失敗したimageの一覧を出す。auditをパスできるように、imageのserve方法をrefactorしてほしい。
主な戦略は、"responsive images"と呼ばれる適切なサイズの画像を配信することだ。
responsive imagesにおいて、あなたは複数のバージョンの画像をそれぞれのimage毎に作り、メディアクエリ、viewport dimensionsを利用して、HTMLやCSSで使うための特定のバージョンを指定する。もう一つの戦略は、SVGのようなvectorベースの画像を利用すること。特定の状況下では、SVG imageはどんなサイズにもスケールできる。
もう一つの戦略は "client hints"と呼ばれるものである。client hintsにおいて、browserは、画像のリクエストを飛ばすときにそのviewport dimensionsとdevice pixel ratioを示し、serverが正しいサイズの画像を配信できているか注意するものである。
しかしながら、browserのサポートは限定的である。Automating Resource Selectionについては、ここから勉強しなさい。
gulp-responsiveやresponsive-images-generatorを見て、imageを幾つかのフォーマットに自動変換する方法を学びましょう。
