$30 off During Our Annual Pro Sale. View Details »

Priorityを制するものはローディングを制す

Edward Fox
September 26, 2023

 Priorityを制するものはローディングを制す

2023/09/26 We Are JavaScripters! @42nd

Edward Fox

September 26, 2023
Tweet

More Decks by Edward Fox

Other Decks in Technology

Transcript

  1. Priorityを制するものは
    ローディングを制す
    Edward Fox
    2023/09/26 We Are JavaScripters! @42nd

    View Slide

  2. はじめに
    ● Reproという会社で「Repro Booster」というプロダクトの企画・開発をやってます
    ○ 「タグを入れるだけでサイトが速くなる」というサービス
    ○ ServiceWorkerとか色々使って、コンテンツの先読みや最適化を自動で行う
    ● コンテンツの自動最適化を図っていく上で、リクエストのPriorityを詳しく理解する
    必要があったので、そこで学んだことについて話します

    View Slide

  3. ローディングの優先順位

    View Slide

  4. ローディングの優先順位

    View Slide

  5. ローディングの優先順位

    View Slide

  6. ローディングの優先順位
    限られた帯域を利用して
    どのリソースをどういう順番・
    優先順位でダウンロードし
    利用可能な状態にすべきか
    (≠ JSの実行順序)

    View Slide

  7. ローディングの優先順位
    ・CSSとスクリプトはどっちが大事?
    ・ロゴ画像とLCP画像はどっちが優先?
    ・defer1.jsとdefer2.jsはどっちが先?
    ・遅延読み込みの画像が
    viewport内に
    入ってたら優先する?
    ・asyncはdeferより後回しでOK?
    ・コンテンツを書き換える可能性の
    ある fetch() はどう扱う?

    View Slide

  8. ローディングの優先順位 = Priority
    ・CSSとスクリプトはどっちが大事?
    ・ロゴ画像とLCP画像はどっちが優先?
    ・defer1.jsとdefer2.jsはどっちが先?
    ・遅延読み込みの画像が
    viewport内に
    入ってたら優先する?
    ・asyncはdeferより後回しでOK?
    ・コンテンツを書き換える可能性の
    ある fetch() はどう扱う?

    View Slide

  9. ● Priority Hints
    ○ Renderer側の制御(ブラウザのタブ、JSランタイム)
    ● Priority Header
    ○ ネットワーク側の制御
    ● 文字通り、通信の「優先度」を制御するための情報
    ● 完全な制御は担保されず、文字通り「ヒント」を提供する程度のもの
    Priority をコントロールする (1)

    View Slide

  10. Priority をコントロールする (1)
    ブラウザ
    Renderer
    Process
    Browser
    Process
    Server

    View Slide

  11. Priority をコントロールする (1)
    ブラウザ
    Renderer
    Process
    Browser
    Process
    Server
    Priority Header
    (frame)
    Priority Hints

    View Slide

  12. Priority をコントロールする (1)
    ブラウザ
    Renderer
    Process
    Browser
    Process
    Server
    Priority Hints
    Priority Header
    (frame)

    View Slide

  13. ● クライアントからサーバーにリソースの優先度を伝えるための情報
    ● HTTP/2ではPriorityフレームという形でストリームの優先度を制御するものとし
    て存在していたが、RFCによるとサーバー側の実装が進まなかったとして
    deprecatedされた
    ● HTTP/3ではPriorityヘッダとして実現された
    ○ 0-7の urgency と boolean の increment という2つのフィールドで構成される
    ○ 優先度が変わったときのために Priority Update フレームというのも存在する
    Priority Header/Frame (1)

    View Slide

  14. Priority Header/Frame (2)

    View Slide

  15. Priority Header/Frame (2)

    View Slide

  16. ● サーバー側の実装(ヘッダ、フレームの解釈)に大きく依存する
    ● ブラウザ側の送信方法もだいぶ違う
    ○ Safari/Firefox は HTTPヘッダとして送る
    ○ Chrome はヘッダではなく PRIORITY_UPDATE フレームとして送る
    Priority Header/Frame (3)

    View Slide

  17. Priority をコントロールする (2)
    ブラウザ
    Renderer
    Process
    Browser
    Process
    Server
    Priority Header
    (frame)
    Priority Hints

    View Slide

  18. Priority をコントロールする (2)
    ブラウザ
    Renderer
    Process
    Browser
    Process
    Server
    Priority Hints
    Priority Header
    (frame)

    View Slide

  19. ● と記述することでリソースの読み込み優先度を制御する
    ● LCPを上げる施策として割と有効
    ○ LCP = Largest Contentful Paint
    ● linkとかiframe要素にも使えるので、必要に応じて画像以外にも付与するのが吉
    ○ ただしCSSは基本的にどのブラウザでも(そのブラウザが持つ優先度制御の中で)最優先されるので、全部の
    に fetchPriority をつけて回る作業は不要
    Priority Hints (1): fetchPriority

    View Slide

  20. Priority Hints (2): fetch API
    ● fetch(url, { priority: ‘high’ }) と書くことで通信の優先度を制御できる
    ● 画像などの要素に限らず、Fetch API を利用し通信を行う際に指定できる
    ● high, low, auto が指定可能(無指定 = auto)
    ● Firefox, Safari では非対応
    ● 用途がハッキリしたユースケース以外は無指定(auto)で良さそう

    View Slide

  21. ブラウザ間の差 ( js )

    View Slide

  22. ブラウザ間の差 ( image )

    View Slide

  23. ブラウザ間の差 ( image )

    View Slide

  24. ブラウザ間の差 ( image )

    View Slide

  25. ● Webサイトのパフォーマンスを考える上でローディングの優先順位は重要
    ● Priority について理解してローディングを最適化しよう
    ● まずは fetchPriority の活用から
    ○ Safari リリース版にそのうち載る...と信じましょう
    ● の loading=lazy や decoding=async などもあります
    まとめ

    View Slide

  26. このあたりのキーワードに引っかかる人はぜひ懇親会でお話しましょう 🚀
    ● ServiceWorker
    ● HTTP, CDN
    ● Resource Hints, Priority Hints
    ● パフォーマンス, Core Web Vitals
    ● プロダクトマネジメント, 新規事業, データ分析・統計
    Let’s talk!

    View Slide

  27. Additional Resources
    ● WICG/priority-hints – Priority Hints
    ● Optimizing resource loading with the Fetch Priority API
    ● LCP attribution: a fetchpriority breakdown
    ● fetch() global function
    ● HTTP/3 Prioritization Demystified
    ● Adopting a new approach to HTTP prioritization

    View Slide