WebP: ウェブページ圧縮フォーマット
障害
- ウェブサイトのアクセシビリティを高め、ページの読み込み時間を短縮するためにHTMLを最小化
- GitHub PagesはBrotli圧縮をサポートしていない
- gzipは標準で使われるが、Brotliのほうがより高い圧縮率を提供する
単純なアイデア
- GitHub PagesがBrotliをサポートしていないため、クライアント側でJavaScriptを使って展開する方法を検討
brotli-dec-wasmとtiny-brotli-dec-wasmを使ってBrotliの展開が可能
2回目の試み
- Compression Streams APIはgzipとDEFLATE形式をサポートしているが、Brotliはサポートしていない
- Zopfliライブラリを使えばgzipをより効率的に圧縮できるが、それでもBrotliより性能は劣る
掟破り
- 画像圧縮を使ってデータを圧縮する方法を検討
- PNGとGIFはDEFLATEアルゴリズムを使うが、WebPはより優れた性能を提供する
WebPの利点
- WebPはPNGに似た予測変換を使うが、DEFLATEの代わりにGoogleが開発した方式を使う
- 複数のハフマン木を使ってより効率的な圧縮を実現する
- カラーキャッシュを使って繰り返し現れる色を効率的に保存する
実験
webpクレートを使ってHTMLファイルを圧縮してみた- 初期結果ではgzipより2倍小さいサイズを示した
追加の最適化
- 画像のサイズを調整してより良い圧縮性能を得る
- さまざまな圧縮方法を試して最適な結果を探す
ベンチマーク
- さまざまなファイル形式についてgzip、bzip2、Brotli、WebPを比較
- WebPはほとんどの場合でgzipより良い性能を示す
- Brotliには及ばないものの、それでも有意な改善を提供する
JavaScriptでデコード
- Canvas APIを使ってWebPをデコードする方法を説明
- WebGLを使ってフィンガープリンティング対策技術を回避
最終調整
- ページ読み込み時のちらつきを減らすため、スタイルと上部部分はgzipのまま維持
- スクロール位置を維持するための一時的な回避策を提案
埋め込み
- WebPをJavaScriptに直接埋め込んで遅延を減らす
- base64データURLを使ってサイズを最小化
例
- 実際のウェブページでWebPを使って圧縮した例を提供
- 圧縮後にページサイズが小さくなることを確認
GN⁺の要約
- この記事はウェブページの圧縮性能を改善するためのさまざまな方法を探っている
- WebP形式はgzipより優れた性能を提供するが、Brotliには劣る
- JavaScriptとWebGLを使ってクライアント側でWebPをデコードする方法を説明
- ページの読み込み時間を短縮するためのさまざまな最適化手法を提案
- 類似の機能を提供する他のプロジェクトとしてBrotliとZopfliがある
1件のコメント
Hacker News のコメント
長い投稿のサイズは 92 KiB から 37 KiB に減っているにもかかわらず、実際の読み込み時間の増加率は 0.001% にすぎない
readPixelsにフィンガープリント対策が適用されていない理由が理解できないzstd は Chrome に導入されており、Safari にも適用すべきだ
Google Fonts を削除すればページの読み込み時間が改善される可能性がある
ソースコードを確認すると doctype 宣言に空白がない
<!doctypehtml>になっているが、<!doctype html>に修正すべきだHTML ページを自己展開型 ZIP ファイルとしてパッケージ化できる
Sailfish OS のブラウザではページが崩れる
Brotli は大きな辞書 (dictionary) を持っているにもかかわらず、gzip と似た性能を示している
Brotli が CompressionStream API で使われていない理由は、ブラウザのサイズを大きく増やしてしまうためだ