オリジンサーバに手を付けないパーフォマンス改善

「オリジンサーバに手を付けないパーフォマンス改善 ~HTMLRewriterの活用方法~」
Workers Tech Talk #2 (https://workers-tech.connpass.com/event/300546/)の発表資料です。

Transcript

1. © 2023 Ateam Inc. オリジンサーバに⼿を付けない パフォーマンス改善 HTMLRewriterの活⽤⽅法 Workers Tech Talk #2
2. © 2023 Ateam Inc. ⾃⼰紹介 2 エッジランタイムが好きで本業でもプライベートでも 実⽤性のないことを⾊々実験して遊んでます
3. © 2023 Ateam Inc. 3 🚨 今⽇はいくつか実装例を紹介しますが 実⽤性という観点では検証不⾜です 「なんか⾯⽩そう」くらいの軽い気持ちで⾒てください
4. © 2023 Ateam Inc. 4 💡 Cloudflareには 多くのコンテンツ最適化機能がある
5. © 2023 Ateam Inc. Cloudflare には多くのコンテンツ最適化機能がある 5 The modern way to load third-party tools and tags Webフォントのパフォーマンスを改善 (プライバシーへの対処) 103 Early Hintsレスポンスでの⾃動応 答によるパフォーマンス改善 3rd partyスクリプトのパフォーマンス 改善 (プライバシーへの対処)
6. © 2023 Ateam Inc. これらの仕組み 6 The modern way to load third-party tools and tags HTML内からWebフォント⽤のlinkを検知 し、Cloudflare がホスティングするものを 代替使⽤するようHTMLを書き換える HTML内からpreload, preconnectのlinkを 検知し、103 Early Hintsレスポンスとして 返却する 専⽤のスクリプトをHTMLに挿⼊し、GTM やPixelなどの3rd partyスクリプトの処理 環境をエッジに移す
7. © 2023 Ateam Inc. これらの仕組み 7 The modern way to load third-party tools and tags HTML内からWebフォント⽤のlinkを検知 し、Cloudflare がホスティングするものを 代替使⽤するようHTMLを書き換える HTML内からpreload, preconnectのlinkを 検知し、103 Early Hintsレスポンスとして 返却する 専⽤のスクリプトをHTMLに挿⼊し、GTM やPixelなどの3rd partyスクリプトの処理 環境をエッジに移す HTMLから特定パターンを探索‧検知 HTMLを書き換え‧HTMLに挿⼊ という処理をCDNで⾏っている
8. © 2023 Ateam Inc. 8 🤔 これらを⾃分で実装することは可能か？
9. © 2023 Ateam Inc. 9 💪 できる (たぶん)
10. © 2023 Ateam Inc. HTMLRewriter 10 HTMLRewriter: HTMLの解析‧変換が可能なAPI セレクターにマッチする要素に対し、 置換‧挿⼊‧削除などの処理を施す element以外にコメントやテキストも ハンドリング可能 > new HTMLRewriter().on('selector', handler).transform(res)
11. © 2023 Ateam Inc. 11 HTMLRewriterを使えば オリジンサーバに⼿を加えない パフォーマンス改善の機能を簡単に実装できそう
12. © 2023 Ateam Inc. 12 1⃣ 画像の読み込みの改善例
13. © 2023 Ateam Inc. ⾼画質な画像が並ぶギャラリーサイトを考える 13
14. © 2023 Ateam Inc. 画像のロードに時間がかかる 14
15. © 2023 Ateam Inc. パフォーマンスの低下に繋がっている 15
16. © 2023 Ateam Inc. 16 🤔 改善⽅法を考える
17. © 2023 Ateam Inc. 改善⽅法の例 17 https://www.flawlessappdesign.com/latest-flutterflow-features-in-may-2023/ Instagramを例に上げると 低画質な画像を先に表⽰し、 その後で⾼画質画像を表⽰している ※リサイズ‧webp変換などの⼿法もあるが、 あえて今回はこの⽅法で改善してみる (実⽤性はともかくその⽅がおもしろそうなので)
18. © 2023 Ateam Inc. 18
19. © 2023 Ateam Inc. 19
20. © 2023 Ateam Inc. 20
21. © 2023 Ateam Inc. 21
22. © 2023 Ateam Inc. 22
23. © 2023 Ateam Inc. 23
24. © 2023 Ateam Inc. 実際に動いている様⼦ 24
25. © 2023 Ateam Inc. Before 25
26. © 2023 Ateam Inc. After 26
27. © 2023 Ateam Inc. 27 🎖 LCP 5.3s ➔ 0.7s
28. © 2023 Ateam Inc. ちょっと外れた話 28 WASMを書けば⼀応⾃⼒で画像処理をするための Workerが⽤意できる (という記事が⼀昨⽇公開されていた) 画像処理ができるということは、画像内から何 点か特徴⾊を取り出し、Worker上でハッシュ化 して、クライアントでSVGで表⽰するようなもの も作れそう(BlurHashのようなもの) https://zenn.dev/sora_kumo/articles/wasm-image-optimization https://blurha.sh/
29. © 2023 Ateam Inc. 29 😎 という⾯⽩そうなネタは Workers Tech Talk #3に残しときます
30. © 2023 Ateam Inc. 30 2⃣ 3rd Party Scriptの改善例
31. © 2023 Ateam Inc. 多くの3rd party scriptが実⾏されているサイトの例 31 There are many other advertising scripts...
32. © 2023 Ateam Inc. 32 🤔 どうすればTotal Blocking Timeを 改善できるだろうか
33. © 2023 Ateam Inc. 解決⼿段 33 https://github.com/BuilderIO/partytown Builder.io製のライブラリ 3rd party scriptsの処理をWeb Workerに退避するす ることで、メインスレッドのブロックを回避できる (3rd partyに限らない任意のスクリプトも退避できる) Partytownのスクリプトを読み込ませた上で、 各種スクリプトのtypeを次のように変更することで Web Workerに退避することができる 例えばGTMとかPixelを利⽤する際にheadに埋め込むスクリプト Partytown
34. © 2023 Ateam Inc. 34
35. © 2023 Ateam Inc. 35
36. © 2023 Ateam Inc. 36 🎉
37. © 2023 Ateam Inc. 37 🎉
38. © 2023 Ateam Inc. 38 <script type="text/partytown"> ... </script>
39. © 2023 Ateam Inc. 39 GTM https://partytown.builder.io/proxying-requests スクリプトのリクエストをプロキシして、 同⼀オリジンから配布されているかのように振る舞わせるか、 もしくは、CORSヘッダーが付与されるようにする必要がある (Web Workerはリクエストのインターセプトが可能)
40. © 2023 Ateam Inc. 40
41. © 2023 Ateam Inc. 41 <script type="text/partytown"> ... </script>
42. © 2023 Ateam Inc. 42
43. © 2023 Ateam Inc. Before 43
44. © 2023 Ateam Inc. After 44
45. © 2023 Ateam Inc. 45 🎉 TBT 1,080ms ➔ 570ms
46. © 2023 Ateam Inc. 46 🕺 HTMLRewriterを使えば色々 なことができそうな気がしませんか？
47. © 2023 Ateam Inc. HTMLRewriter使えば他にも⾊々なことができそう 47 yusukeさんもこのトピックを記事にされている https://zenn.dev/yusukebe/articles/54a26f1bcb22a0 - CSS/JS をリストアップしてエッジでダウンロードしてインライン化 - リソースドメインをリストアップしてlink preconnectとして書き込む - SVGのインライン化 - etc...
48. © 2023 Ateam Inc. まとめ 48 🤗 HTMLRewriterは 表現⼒の向上や改善活動に⼀役買いそうな APIである
49. © 2023 Ateam Inc. 49 🙇 ご清聴ありがとうございました