連載一覧のページを作り直したあと、効果を測って報告しました。「HTML が 248,630 バイトから 178,349 バイトになり、28.3% 削減しました」。数字も出ているので、良い仕事をしたつもりでいました。
この報告は間違っていました。 利用者が実際にダウンロードするのは圧縮後のバイト数で、私が測っていたのは非圧縮の値だったからです。
圧縮後で測り直した
本番は で圧縮して配信しています。改めて圧縮後で測ると、削減幅がまったく違っていました。
| ページ | 非圧縮での削減 | 圧縮後での削減 |
|---|---|---|
| 記事一覧 | 5.16MB → 1.19MB（-76.9%） | 1,416KB → 152KB（-89.2%） |
| 連載一覧 | 248KB → 178KB（-28.3%） | 31.7KB → 26.3KB（-17.1%） |
| 用語集 | 1.62MB → 1.03MB（-36.7%） | 193KB → 177KB（-8.6%） |
面白いのは、ずれる方向が一定ではないことです。記事一覧は圧縮後のほうが削減率が大きく、用語集は逆に小さい。
なぜ方向が逆になるのか
圧縮は、繰り返しの多いデータほどよく縮みます。同じ文字列が何度も出てくれば、2回目以降は「さっきのと同じ」と記録するだけで済むからです。
用語集で削ったのは、429語ぶんの枠線や余白を指定する記述でした。同じ指定が429回繰り返されていたので、圧縮すればほとんど消える種類の重複です。だから非圧縮では 36.7% 減っても、圧縮後は 8.6% しか変わりません。
一方、記事一覧で削ったのは498記事の本文でした。日本語の文章はそれぞれ違う内容なので、圧縮してもあまり縮みません。実際、このページだけ圧縮率が 27.5% と悪く、他のページの 12% 台と比べて明らかに違っていました。縮まないものを削ったから、圧縮後でも効いたわけです。
他のページより圧縮率が悪いページは、繰り返しではない実データが大量に入っている可能性があります。今回はこれが、本文を丸ごと埋め込んでいたことの手がかりになりました。
この違いは のような表示速度の指標にも効いてきます。同じ「削減」でも、圧縮で消える種類のものを削っても利用者の体感は変わりません。
測り方を決めておく
そして、非圧縮のバイト数はの整理のような「繰り返しを減らす」変更で大きく動きます。動いた数字が大きいほど良い仕事に見えるので、なおさら注意が要ります。この失敗の教訓は単純で、利用者が受け取る形で測るということです。圧縮後のバイト数は、要求に圧縮を受け付ける印を付ければ測れます。
# 圧縮なし（既定ではこちらが返る）curl -s -o /dev/null -w '%{size_download}\n' https://example.com/
# 圧縮あり（実際に利用者が受け取る量）curl -s -H 'Accept-Encoding: br, gzip' \ -o /dev/null -w '%{size_download}\n' https://example.com/手元で gzip をかけて概算する方法もありますが、本番が なら 1〜2 割ずれます。本番に対して測るのがいちばん確実です。
もう一つ、バイト数だけでは測れない改善もありました。用語集のページでは、ブラウザ側で動く部品が 348 個実体化していました。これは の費用になり、転送量には表れませんが操作の反応に響きます。
429語すべてが同じページに並んでいるのに、用語の説明文の中の語をポップアップにしていたためです。同じページに実物があるのだから、ポップアップより項目への移動のほうが素直だと判断して、348 個を 1 個に減らしました。
この変更は、圧縮後で 8.6% しか減っていません。バイト数だけを成果として見ていたら、意味の薄い変更に見えます。実際の価値は、348 個ぶんの実体化と処理が消えたことにありました。のうち、操作の反応を見る指標に効く種類の改善です。
import gzipimport urllib.request
def compare(url: str) -> dict: """非圧縮と、gzip で圧縮した場合の大きさを並べる。 本番が Brotli なら、実際はこれよりさらに 1〜2 割小さくなる。""" raw = urllib.request.urlopen(url).read() gz = gzip.compress(raw, 9) return { "raw": len(raw), "gzip": len(gz), "ratio": len(gz) / len(raw), }
# 圧縮率が他ページより悪いページは、# 繰り返しでない実データが大量に入っている手がかりになる報告の仕方も変えた
数字を出すときは、何で測ったかを添えるようにしました。「28.3% 削減」ではなく「非圧縮で 28.3%、圧縮後では 17.1%」と書く。手間は増えますが、受け取る側が判断を誤りません。
そして、成果が小さかったことも書くようにしました。連載一覧の作り替えは、圧縮後では大きく減っていません。このページの価値は軽さではなく、選べるようになったことです。効いていない部分を効いたように書かない、というだけの話ですが、数字が出ていると混同しやすい。
デザインのルールをまとめた文書にも、「非圧縮のバイト数を成果として読まないこと」という項目を入れました。次回は、見た目ではなく構造を作り替えた話をします。
この記事の感想を教えてください
あなたの 1 クリックで、本当にこの記事は更新されます。「もっと詳しく」「続編希望」が一定数集まった記事は、 ふくふくが 実際に内容を拡充したり続編記事を公開 します。 送信したリアクションはお使いのブラウザに記録され、再カウントされません。