Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Priorityを制するものはローディングを制す
Search
Edward Fox
September 26, 2023
Technology
4
740
Priorityを制するものはローディングを制す
2023/09/26 We Are JavaScripters! @42nd
Edward Fox
September 26, 2023
Tweet
Share
More Decks by Edward Fox
See All by Edward Fox
Lambda@Edgeを利用したサードパーティJavaScriptのカナリアリリース / Canary release using Lamdba@Edge
edwardkenfox
0
99
AWS re:Invent 2019 / Hackathon for Good 参加録
edwardkenfox
2
580
Repro basketball club
edwardkenfox
0
240
Introduction to UX Optimizer
edwardkenfox
0
110
フロントエンド開発の落とし穴 / Fallacies of Client Side Programming (2019ver)
edwardkenfox
0
330
僕とprototypeとJSONで / Me and prototype down by the JSON
edwardkenfox
0
140
クライアントサイド開発の落とし穴 / Fallacies of Client Side Programming
edwardkenfox
0
450
Beacon API ことはじめ 〜そしてkeepalive fetchへ〜 / Beacon API The Basics
edwardkenfox
0
1.1k
window.windowとは何か / What is window window
edwardkenfox
1
230
Other Decks in Technology
See All in Technology
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
1
220
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
350
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
570
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
130
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
150
Click A, Buy B: Rethinking Conversion Attribution in ECommerce Recommendations
lycorptech_jp
PRO
0
110
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
320
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
150
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
370
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
190
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
Music & Morning Musume
bryan
46
6.8k
Building Applications with DynamoDB
mza
96
6.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Optimizing for Happiness
mojombo
379
70k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Balancing Empowerment & Direction
lara
5
690
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Transcript
Priorityを制するものは ローディングを制す Edward Fox 2023/09/26 We Are JavaScripters! @42nd
はじめに • Reproという会社で「Repro Booster」というプロダクトの企画・開発をやってます ◦ 「タグを入れるだけでサイトが速くなる」というサービス ◦ ServiceWorkerとか色々使って、コンテンツの先読みや最適化を自動で行う • コンテンツの自動最適化を図っていく上で、リクエストのPriorityを詳しく理解する
必要があったので、そこで学んだことについて話します
ローディングの優先順位
ローディングの優先順位
ローディングの優先順位
ローディングの優先順位 限られた帯域を利用して どのリソースをどういう順番・ 優先順位でダウンロードし 利用可能な状態にすべきか (≠ JSの実行順序)
ローディングの優先順位 ・CSSとスクリプトはどっちが大事? ・ロゴ画像とLCP画像はどっちが優先? ・defer1.jsとdefer2.jsはどっちが先? ・遅延読み込みの画像が viewport内に 入ってたら優先する? ・asyncはdeferより後回しでOK? ・コンテンツを書き換える可能性の ある
fetch() はどう扱う?
ローディングの優先順位 = Priority ・CSSとスクリプトはどっちが大事? ・ロゴ画像とLCP画像はどっちが優先? ・defer1.jsとdefer2.jsはどっちが先? ・遅延読み込みの画像が viewport内に 入ってたら優先する? ・asyncはdeferより後回しでOK?
・コンテンツを書き換える可能性の ある fetch() はどう扱う?
• Priority Hints ◦ Renderer側の制御(ブラウザのタブ、JSランタイム) • Priority Header ◦ ネットワーク側の制御
• 文字通り、通信の「優先度」を制御するための情報 • 完全な制御は担保されず、文字通り「ヒント」を提供する程度のもの Priority をコントロールする (1)
Priority をコントロールする (1) ブラウザ Renderer Process Browser Process Server
Priority をコントロールする (1) ブラウザ Renderer Process Browser Process Server Priority
Header (frame) Priority Hints
Priority をコントロールする (1) ブラウザ Renderer Process Browser Process Server Priority
Hints Priority Header (frame)
• クライアントからサーバーにリソースの優先度を伝えるための情報 • HTTP/2ではPriorityフレームという形でストリームの優先度を制御するものとし て存在していたが、RFCによるとサーバー側の実装が進まなかったとして deprecatedされた • HTTP/3ではPriorityヘッダとして実現された ◦ 0-7の
urgency と boolean の increment という2つのフィールドで構成される ◦ 優先度が変わったときのために Priority Update フレームというのも存在する Priority Header/Frame (1)
Priority Header/Frame (2)
Priority Header/Frame (2)
• サーバー側の実装(ヘッダ、フレームの解釈)に大きく依存する • ブラウザ側の送信方法もだいぶ違う ◦ Safari/Firefox は HTTPヘッダとして送る ◦ Chrome
はヘッダではなく PRIORITY_UPDATE フレームとして送る Priority Header/Frame (3)
Priority をコントロールする (2) ブラウザ Renderer Process Browser Process Server Priority
Header (frame) Priority Hints
Priority をコントロールする (2) ブラウザ Renderer Process Browser Process Server Priority
Hints Priority Header (frame)
• <img fetchpriority=”high”> と記述することでリソースの読み込み優先度を制御する • LCPを上げる施策として割と有効 ◦ LCP = Largest
Contentful Paint • linkとかiframe要素にも使えるので、必要に応じて画像以外にも付与するのが吉 ◦ ただしCSSは基本的にどのブラウザでも(そのブラウザが持つ優先度制御の中で)最優先されるので、全部の <link rel=stylesheet> に fetchPriority をつけて回る作業は不要 Priority Hints (1): fetchPriority
Priority Hints (2): fetch API • fetch(url, { priority: ‘high’
}) と書くことで通信の優先度を制御できる • 画像などの要素に限らず、Fetch API を利用し通信を行う際に指定できる • high, low, auto が指定可能(無指定 = auto) • Firefox, Safari では非対応 • 用途がハッキリしたユースケース以外は無指定(auto)で良さそう
ブラウザ間の差 ( js )
ブラウザ間の差 ( image )
ブラウザ間の差 ( image )
ブラウザ間の差 ( image )
• Webサイトのパフォーマンスを考える上でローディングの優先順位は重要 • Priority について理解してローディングを最適化しよう • まずは fetchPriority の活用から ◦
Safari リリース版にそのうち載る...と信じましょう • <img> の loading=lazy や decoding=async などもあります まとめ
このあたりのキーワードに引っかかる人はぜひ懇親会でお話しましょう 🚀 • ServiceWorker • HTTP, CDN • Resource Hints,
Priority Hints • パフォーマンス, Core Web Vitals • プロダクトマネジメント, 新規事業, データ分析・統計 Let’s talk!
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