【書評】『Web配信の技術』を読んでウェブパフォーマンス・チューニングに再入門してみた

地味だけど奥が深く改善インパクトが大きいWebコンテンツ配信の最適化。「Web配信の技術」を読んでこの深遠な世界に飛び込んでみよう！

#Amazon CloudFront

#Cloudinary

#書評

quiver

2021.03.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

前職時代にはWebサイトの高速化をガッツリやっていました。 Webアクセラレーターの Varnish がコア技術だったため、Varnishの第一人者であるいわなちゃん(@xcir)のドキュメントでたくさん勉強させてもらいました。

そのいわなちゃんがこれまでのWeb配信の知見をまとめた『Web配信の技術』という本を紹介します。

副題が「HTTPキャッシュ・リバースプロキシ・CDNを活用する」とあるように、本書はこれらレイヤーでWeb配信を最適化する方法を丁寧に解説しています。

本書の構成

目次を見てみましょう。

第１章　はじめに
第２章　配信の基礎
第３章　HTTPヘッダ・設定とコンテンツの見直し
第４章　キャッシュによる負荷対策
第５章　より効果的・大規模な配信とキャッシュ
第６章　CDNを活用する
第７章　自作CDN（DIY‐CDN）

A5判で456ページとかなりのボリュームで、先頭から隈なく読むと、途中で挫折するかもしれません。初読の場合、第2章〜第4章、第6章を重点的に読むと良いかもしれません。

第2章では、ウェブ配信の構成技術を少し低レイヤーな視点から学びます。普段フロントエンドよりの仕事をしていると、あまり意識することのない領域かもしれません。あとに続く章で根幹となる考え方が提示されているため、丁寧に読みましょう。

第3章では、ウェブ開発者もおなじみのHTTPプロトコル、コンテンツ圧縮、更には画像の最適化配信を学びます。完全に理解しているつもりのHTTPプロトコルも、RFCを参照した厳密な解説を読むことで、何もわかっていなかったと気付けるでしょう。

RFC を参照しているからと言って、頭でっかちなわけでは有りません。長年の経験を元に、現場で活用するための具体的な配慮にあふれています。

第4章では、具体的なキャッシュ方法を学びます。

HTTPレスポンスヘッダーに Cache-Control: no-cache を返せば、ブラウザはキャッシュを保存しないはずと、雰囲気でキャッシュ設定していないでしょうか?

キャシュは設定次第によって、配信を効率化することもあれば、重大な事故につながることもあります。どのコンポーネントでキャッシュ可能なのか、各キャッシュの正しい設定方法やメリット・デメリットを理解しましょう。

第6章ではCDNのキャッシュ方法を学びます。

CDNを導入すればすべてが解決するわけではありません。 CDNを活用するには、要件にあったCDNを選択し、注意深く設定し、導入後も監視・運用し続ける必要があります。

CDN(Amazon CloudFront) は高く無いよ！

本書では、CDNの仮の課金として 10円/GB という単価が登場します。

日本エリアで Amazon CloudFront を利用した場合の単価を確認してみましょう。

日本エリアの場合、アウトバウントの単価は $0.114/GB、仮に$1=\110 なら 12.54円/GB です。

先月登場した CloudFront Security Savings Bundle を利用して1年契約をすると、料金を最大30%節約できます。

弊社クラスメソッドの「EC2・CDN割引プラン」を利用すると、年契約不要の従量課金にもかかわらず、単価は $0.051/GB と約55%節約できます。$1=\110 で円換算すれば、 5.61円/GB です。10円/GB より随分安くなりました。

AWS から配信しているにもかかわらず、CloudFront を利用していないのは価格・性能・セキュリティ、様々な面でもったいないので、ぜひ Amazon CloudFront の利用をご検討ください。

メディア配信を最適化したいなら Cloudinary がおすすめ

「3.15節適切なメディアの選択によるコンテンツの改善」で書かれているように、配信コンテンツで多くのファイルサイズを占めるのは、画像・動画・音声といったメディア系コンテンツです。これらコンテンツのファイルサイズを圧縮すると、Web配信を大幅に最適化できます。

例えば画像配信の場合、JPEG・WebPといった適切な画像フォーマットの選択、画像の圧縮を各種ブラウザ向けに最適化する必要があります。

例えば、本書の出版社の書籍ページでは、表紙の画像 URL は http://image.gihyo.co.jp/assets/images/cover/2021/9784297119256.jpg です。

cURL のデフォルトオプションでリクエストすると、155KB の JPEG 画像が返却され、Chrome ブラウザでリクエストする時のように Accept-Encoding に webp を渡してリクエストすると、ファイルサイズが 77KB と約半分の WebP 画像が返却されます。つまり、画像配信が最適化されていることがわかります。

$ URL=http://image.gihyo.co.jp/assets/images/cover/2021/9784297119256.jpg
$ curl -D - -o /dev/null $URL --silent

HTTP/1.1 200 OK
Server: nginx
Date: Thu, 25 Mar 2021 15:20:43 GMT
Content-Type: image/jpeg
Content-Length: 154599
Last-Modified: Fri, 29 Jan 2021 17:30:09 GMT
Connection: keep-alive
ETag: "60144621-25be7"
Expires: Sat, 24 Apr 2021 15:20:43 GMT
Cache-Control: max-age=2592000
Access-Control-Allow-Origin: *
X-Content-Type-Options: nosniff
Cache-Control: public
Accept-Ranges: bytes

$ curl -D - -o /dev/null \
  -H 'accept: image/webp,image/*' \
  $URL --silent

HTTP/1.1 200 OK
Server: nginx
Date: Thu, 25 Mar 2021 15:21:53 GMT
Content-Type: image/webp
Content-Length: 76634
...

このような画像最適化システムを実装し、Webシステムと連携して運用するのはかなり骨が折れます。

Cloudinary のようなSaaSを利用することで、メディア配信の最適化をオフロードできます。

弊社は Cloudinary の正規代理店のため、画像・動画配信の最適化をこれからやってみたいお客様から、既存システムからの切り替えまで、幅広くご支援いたしますので、お気軽にお相談ください。

Cloudinary | クラスメソッド