-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.njk
More file actions
586 lines (555 loc) · 56.8 KB
/
Copy pathindex.njk
File metadata and controls
586 lines (555 loc) · 56.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
---
layout: layouts/home.njk
title: "Resource Loading & Network Priority Optimization"
description: "Spec-aligned guidance for frontend developers on browser resource loading, fetch priority, preload/prefetch, HTTP/2 & HTTP/3 multiplexing, and waterfall tuning."
permalink: /
eleventyExcludeFromCollections: true
---
<!-- Hero -->
<section class="hero">
<h1>Browser Resource Loading & Network Priority</h1>
<div class="hero-lead">
The definitive reference for frontend developers and performance engineers —
86 pages across four sections, 25 topics and 57 hands-on guides. Master fetch priority,
preload strategy, script and lazy-loading order, HTTP/2 & HTTP/3 multiplexing,
field measurement of real protocol wins, and framework-specific tactics for
Next.js, Nuxt, Astro, and SvelteKit.
</div>
<div class="hero-buttons">
<a href="/core-browser-loading-mechanics-priority-queues/" class="btn btn-primary">
<svg viewBox="0 0 20 20" fill="currentColor" width="18" height="18" aria-hidden="true"><path d="M3 4h14v2H3V4zm0 5h9v2H3V9zm0 5h11v2H3v-2z"/></svg>
Loading Mechanics
</a>
<a href="/resource-hint-implementation-preloading-strategies/" class="btn btn-secondary">
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18" aria-hidden="true"><path d="M10 3v10M6 9l4 4 4-4M3 17h14" stroke-linecap="round" stroke-linejoin="round"/></svg>
Resource Hints
</a>
<a href="/http2-http3-multiplexing-connection-optimization/" class="btn btn-secondary">
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18" aria-hidden="true"><path d="M2 5h16M2 10h16M2 15h16" stroke-linecap="round"/></svg>
HTTP/2 & HTTP/3
</a>
<a href="/framework-specific-loading-strategies/" class="btn btn-secondary">
<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18" aria-hidden="true"><rect x="2" y="2" width="7" height="7" rx="1.5"/><rect x="11" y="2" width="7" height="7" rx="1.5"/><rect x="2" y="11" width="7" height="7" rx="1.5"/><rect x="11" y="11" width="7" height="7" rx="1.5"/></svg>
Frameworks
</a>
</div>
</section>
<!-- Intro -->
<div class="site-wrap home-intro">
<p class="home-intro-lead">
Modern browsers operate as sophisticated network schedulers, dynamically prioritising dozens of concurrent requests to maximise rendering performance. Understanding and influencing that scheduler — through <code>fetchpriority</code>, <code>rel="preload"</code>, preconnect, and protocol-level optimisations — is the difference between a mediocre and a top-percentile Core Web Vitals score.
</p>
<p>
This site provides spec-aligned, production-ready guidance across four interconnected sections: how browsers build and manage their internal priority queues, order scripts, and defer offscreen work; how resource hints (preload, prefetch, preconnect, modulepreload, media preloading, and Speculation Rules) instruct the network layer before the parser even sees the DOM; how HTTP/2 & HTTP/3 stream multiplexing, 103 Early Hints, and QUIC transport interact with browser-side scheduling — and how to measure the difference in the field; and how meta-frameworks like Next.js, Nuxt, Astro, and SvelteKit emit — or fight — those signals on your behalf.
</p>
<p>
Those four sections hold <strong>25 topics</strong> and <strong>57 guides</strong> — 86 pages in total. Whether you're diagnosing a priority inversion in Chrome DevTools, choosing between <code>loading="lazy"</code> and IntersectionObserver, tuning <code>font-display</code> to eliminate FOUT, weighing TCP against QUIC under packet loss, containing third-party tag impact, or untangling a Next.js LCP regression — this reference covers the theory, the implementation patterns, and the trade-offs.
</p>
</div>
<!-- Newest material -->
<div class="site-wrap" style="margin-top: var(--space-2xl);">
<h2 class="section-title">New: Head-to-Head Decision Guides</h2>
<p style="color:var(--color-muted); max-width:70ch; margin:0 0 var(--space-lg);">
Four fresh comparisons that settle the choices engineers argue about most — each one weighs the
two options against concrete conditions rather than declaring a winner.
</p>
<div class="card-grid" style="grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));">
<a href="/resource-hint-implementation-preloading-strategies/strategic-preconnect-dns-prefetch-usage/preconnect-vs-dns-prefetch-decision-matrix/" class="card">
<div class="card-icon">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36" aria-hidden="true">
<circle cx="7" cy="20" r="3.5" fill="var(--color-olive)"/>
<path d="M11 20h8" stroke="var(--color-olive)" stroke-width="2" stroke-linecap="round"/>
<path d="M19 20l8-8" stroke="var(--color-gold)" stroke-width="2" stroke-linecap="round"/>
<path d="M19 20l8 8" stroke="var(--color-copper)" stroke-width="2" stroke-linecap="round" stroke-dasharray="3 3"/>
<rect x="27" y="8" width="9" height="8" rx="2" fill="var(--color-gold)" opacity=".75"/>
<rect x="27" y="24" width="9" height="8" rx="2" stroke="var(--color-copper)" stroke-width="2"/>
</svg>
</div>
<p class="card-title">preconnect vs dns-prefetch</p>
<p class="card-desc">One buys a full TLS handshake, the other only a DNS lookup. A matrix of origin count, connection cost, and when the cheaper hint is the right call.</p>
<span class="card-link">Compare</span>
</a>
<a href="/http2-http3-multiplexing-connection-optimization/http2-stream-prioritization-weighting/http2-priority-vs-http3-priority-header/" class="card">
<div class="card-icon">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36" aria-hidden="true">
<circle cx="10" cy="7" r="3" fill="var(--color-moss)"/>
<path d="M10 10v6M10 16l-5 5M10 16l5 5" stroke="var(--color-moss)" stroke-width="2" stroke-linecap="round"/>
<circle cx="5" cy="24" r="2.5" fill="var(--color-olive)"/>
<circle cx="15" cy="24" r="2.5" fill="var(--color-olive)"/>
<line x1="20" y1="4" x2="20" y2="36" stroke="var(--color-border)" stroke-width="2" stroke-dasharray="3 3"/>
<rect x="25" y="9" width="12" height="4" rx="2" fill="var(--color-copper)"/>
<rect x="25" y="17" width="12" height="4" rx="2" fill="var(--color-gold)" opacity=".8"/>
<rect x="25" y="25" width="12" height="4" rx="2" fill="var(--color-copper)" opacity=".5"/>
</svg>
</div>
<p class="card-title">Priority Trees vs the Priority Header</p>
<p class="card-desc">HTTP/2's dependency tree was abandoned in practice; HTTP/3 replaced it with an urgency header. What changed, what servers honour, and what you can control.</p>
<span class="card-link">Compare</span>
</a>
<a href="/http2-http3-multiplexing-connection-optimization/mitigating-head-of-line-blocking/tcp-vs-quic-loss-recovery-under-packet-loss/" class="card">
<div class="card-icon">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36" aria-hidden="true">
<rect x="4" y="9" width="7" height="6" rx="1.5" fill="var(--color-copper)"/>
<rect x="13" y="9" width="7" height="6" rx="1.5" fill="var(--color-copper)" opacity=".45"/>
<rect x="22" y="9" width="7" height="6" rx="1.5" fill="var(--color-copper)" opacity=".45"/>
<line x1="14" y1="6" x2="19" y2="18" stroke="var(--color-copper)" stroke-width="2" stroke-linecap="round"/>
<rect x="4" y="25" width="7" height="6" rx="1.5" fill="var(--color-moss)"/>
<rect x="13" y="25" width="7" height="6" rx="1.5" fill="var(--color-border)"/>
<rect x="22" y="25" width="7" height="6" rx="1.5" fill="var(--color-moss)"/>
<path d="M32 25l3 3 3-6" stroke="var(--color-moss)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<p class="card-title">TCP vs QUIC Loss Recovery</p>
<p class="card-desc">What a dropped packet actually costs on each transport — retransmission timing, stream independence, and how much of the win survives on a real network.</p>
<span class="card-link">Compare</span>
</a>
<a href="/core-browser-loading-mechanics-priority-queues/lazy-loading-and-viewport-driven-fetching/choosing-loading-lazy-vs-intersectionobserver/" class="card">
<div class="card-icon">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36" aria-hidden="true">
<rect x="4" y="5" width="32" height="16" rx="3" stroke="var(--color-olive)" stroke-width="2"/>
<rect x="8" y="9" width="10" height="8" rx="1.5" fill="var(--color-gold)" opacity=".75"/>
<rect x="22" y="9" width="10" height="8" rx="1.5" fill="var(--color-olive)" opacity=".45"/>
<rect x="4" y="26" width="32" height="10" rx="3" stroke="var(--color-copper)" stroke-width="2" stroke-dasharray="4 3"/>
<circle cx="20" cy="31" r="3" fill="var(--color-copper)"/>
</svg>
</div>
<p class="card-title">loading="lazy" vs IntersectionObserver</p>
<p class="card-desc">The native attribute is one line; the observer gives you the thresholds. Where each one wins, and the LCP regression that catches teams using the wrong one.</p>
<span class="card-link">Compare</span>
</a>
</div>
<h3 style="font-size:1rem; margin:var(--space-xl) 0 var(--space-sm);">Five new topics</h3>
<ul style="list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:var(--space-sm);">
<li><a href="/core-browser-loading-mechanics-priority-queues/script-loading-async-defer-execution-order/" style="display:inline-block; padding:8px 14px; border:1px solid var(--color-border); border-radius:999px; background:var(--color-surface-2); font-size:0.875rem;">Script Loading: async, defer & Execution Order</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/lazy-loading-and-viewport-driven-fetching/" style="display:inline-block; padding:8px 14px; border:1px solid var(--color-border); border-radius:999px; background:var(--color-surface-2); font-size:0.875rem;">Lazy Loading & Viewport-Driven Fetching</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/preloading-video-and-media-streams/" style="display:inline-block; padding:8px 14px; border:1px solid var(--color-border); border-radius:999px; background:var(--color-surface-2); font-size:0.875rem;">Preloading Video & Media Streams</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/measuring-protocol-performance-in-the-field/" style="display:inline-block; padding:8px 14px; border:1px solid var(--color-border); border-radius:999px; background:var(--color-surface-2); font-size:0.875rem;">Measuring Protocol Performance in the Field</a></li>
<li><a href="/framework-specific-loading-strategies/sveltekit-resource-loading-optimization/" style="display:inline-block; padding:8px 14px; border:1px solid var(--color-border); border-radius:999px; background:var(--color-surface-2); font-size:0.875rem;">SvelteKit Resource Loading Optimization</a></li>
</ul>
</div>
<!-- Start Here -->
<div class="site-wrap" style="margin-top: var(--space-2xl);">
<h2 class="section-title">Start Here</h2>
<div class="card-grid" style="grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));">
<a href="/core-browser-loading-mechanics-priority-queues/understanding-browser-resource-priority-queues/how-browser-fetch-priority-affects-lcp/" class="card">
<div class="card-icon">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36" aria-hidden="true">
<rect x="4" y="28" width="6" height="8" rx="1" fill="var(--color-copper)" opacity=".5"/>
<rect x="12" y="20" width="6" height="16" rx="1" fill="var(--color-gold)" opacity=".7"/>
<rect x="20" y="10" width="6" height="26" rx="1" fill="var(--color-olive)"/>
<rect x="28" y="4" width="6" height="32" rx="1" fill="var(--color-moss)"/>
<polyline points="7,28 15,20 23,10 31,4" stroke="var(--color-copper)" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<p class="card-title">How Fetch Priority Affects LCP</p>
<p class="card-desc">The <code>fetchpriority</code> attribute directly shifts your Largest Contentful Paint. See how browsers weigh it against other signals and which mis-applications cost the most time.</p>
<span class="card-link">Read</span>
</a>
<a href="/core-browser-loading-mechanics-priority-queues/render-blocking-resource-identification/fixing-low-priority-critical-css-requests/" class="card">
<div class="card-icon">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36" aria-hidden="true">
<rect x="4" y="4" width="32" height="32" rx="4" stroke="var(--color-border)" stroke-width="2"/>
<line x1="4" y1="14" x2="36" y2="14" stroke="var(--color-gold)" stroke-width="2"/>
<rect x="8" y="18" width="18" height="3" rx="1.5" fill="var(--color-olive)"/>
<rect x="8" y="24" width="12" height="3" rx="1.5" fill="var(--color-muted)" opacity=".6"/>
<circle cx="30" cy="30" r="6" fill="var(--color-copper)"/>
<line x1="28" y1="30" x2="32" y2="30" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
<line x1="30" y1="28" x2="30" y2="32" stroke="#fff" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
<p class="card-title">Fixing Low-Priority Critical CSS</p>
<p class="card-desc">When browsers downgrade your critical stylesheet, First Contentful Paint stalls. Step-by-step diagnosis and framework-specific remediation.</p>
<span class="card-link">Read</span>
</a>
<a href="/http2-http3-multiplexing-connection-optimization/mitigating-head-of-line-blocking/does-http3-eliminate-head-of-line-blocking/" class="card">
<div class="card-icon">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36" aria-hidden="true">
<line x1="4" y1="10" x2="36" y2="10" stroke="var(--color-copper)" stroke-width="2.5" stroke-linecap="round"/>
<line x1="4" y1="20" x2="18" y2="20" stroke="var(--color-muted)" stroke-width="2.5" stroke-linecap="round" stroke-dasharray="4 3"/>
<line x1="22" y1="20" x2="36" y2="20" stroke="var(--color-olive)" stroke-width="2.5" stroke-linecap="round"/>
<line x1="4" y1="30" x2="36" y2="30" stroke="var(--color-olive)" stroke-width="2.5" stroke-linecap="round"/>
<circle cx="20" cy="20" r="4" fill="var(--color-gold)"/>
<line x1="20" y1="16" x2="20" y2="24" stroke="#fff" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</div>
<p class="card-title">Does HTTP/3 Eliminate HOL Blocking?</p>
<p class="card-desc">QUIC vs TCP at the transport layer — what HTTP/3 actually solves, what it leaves unsolved, and how to measure the real-world waterfall impact.</p>
<span class="card-link">Read</span>
</a>
<a href="/resource-hint-implementation-preloading-strategies/mastering-link-rel-preload-prefetch/when-to-use-preload-vs-prefetch-for-images/" class="card">
<div class="card-icon">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36" aria-hidden="true">
<rect x="4" y="8" width="32" height="24" rx="3" stroke="var(--color-olive)" stroke-width="2"/>
<circle cx="13" cy="17" r="4" fill="var(--color-gold)" opacity=".7"/>
<polyline points="4,26 12,18 20,24 26,19 36,28" stroke="var(--color-copper)" stroke-width="2" fill="none" stroke-linejoin="round"/>
<line x1="30" y1="4" x2="30" y2="14" stroke="var(--color-olive)" stroke-width="2" stroke-linecap="round"/>
<polyline points="26,8 30,4 34,8" stroke="var(--color-olive)" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<p class="card-title">Preload vs Prefetch for Images</p>
<p class="card-desc">A decision framework for hero images, responsive images, and off-screen content — with CORS pitfalls and double-fetch gotchas covered in full.</p>
<span class="card-link">Read</span>
</a>
<a href="/resource-hint-implementation-preloading-strategies/mastering-link-rel-preload-prefetch/preload-vs-prefetch-vs-modulepreload-decision-matrix/" class="card">
<div class="card-icon">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36" aria-hidden="true">
<rect x="4" y="4" width="14" height="14" rx="2" stroke="var(--color-olive)" stroke-width="2"/>
<rect x="22" y="4" width="14" height="14" rx="2" stroke="var(--color-gold)" stroke-width="2"/>
<rect x="4" y="22" width="14" height="14" rx="2" stroke="var(--color-copper)" stroke-width="2"/>
<path d="M25 29l4 4 7-8" stroke="var(--color-moss)" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<p class="card-title">Preload vs Prefetch vs modulepreload</p>
<p class="card-desc">The general three-way decision matrix — timing, priority, cache destination, CORS mode, and the cost of choosing the wrong hint for each resource type.</p>
<span class="card-link">Read</span>
</a>
<a href="/core-browser-loading-mechanics-priority-queues/script-loading-async-defer-execution-order/fixing-async-script-race-conditions/" class="card">
<div class="card-icon">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36" aria-hidden="true">
<rect x="4" y="7" width="14" height="5" rx="2.5" fill="var(--color-olive)"/>
<rect x="21" y="7" width="9" height="5" rx="2.5" fill="var(--color-gold)" opacity=".8"/>
<rect x="4" y="17" width="9" height="5" rx="2.5" fill="var(--color-gold)" opacity=".8"/>
<rect x="16" y="17" width="14" height="5" rx="2.5" fill="var(--color-olive)"/>
<line x1="33" y1="4" x2="33" y2="25" stroke="var(--color-border)" stroke-width="2" stroke-linecap="round"/>
<circle cx="20" cy="32" r="5" fill="var(--color-copper)"/>
<line x1="18" y1="30" x2="22" y2="34" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>
<line x1="22" y1="30" x2="18" y2="34" stroke="#fff" stroke-width="1.8" stroke-linecap="round"/>
</svg>
</div>
<p class="card-title">Fixing async Script Race Conditions</p>
<p class="card-desc">Why two <code>async</code> scripts that depend on each other fail intermittently, and the ordering patterns that make execution deterministic again.</p>
<span class="card-link">Read</span>
</a>
<a href="/http2-http3-multiplexing-connection-optimization/early-hints-103-implementation/http2-server-push-vs-103-early-hints/" class="card">
<div class="card-icon">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36" aria-hidden="true">
<rect x="4" y="6" width="14" height="10" rx="2" stroke="var(--color-muted)" stroke-width="2" stroke-dasharray="3 2"/>
<line x1="7" y1="20" x2="15" y2="28" stroke="var(--color-copper)" stroke-width="2" stroke-linecap="round"/>
<line x1="15" y1="20" x2="7" y2="28" stroke="var(--color-copper)" stroke-width="2" stroke-linecap="round"/>
<rect x="22" y="6" width="14" height="10" rx="2" stroke="var(--color-olive)" stroke-width="2"/>
<path d="M25 24l3 3 6-7" stroke="var(--color-moss)" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="29" y1="33" x2="29" y2="35" stroke="var(--color-gold)" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
<p class="card-title">Server Push vs 103 Early Hints</p>
<p class="card-desc">Why HTTP/2 push was removed from browsers, and how the 103 interim response fills the server-think-time gap with client-controlled fetching instead.</p>
<span class="card-link">Read</span>
</a>
<a href="/http2-http3-multiplexing-connection-optimization/measuring-protocol-performance-in-the-field/collecting-nexthopprotocol-with-resource-timing/" class="card">
<div class="card-icon">
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" width="36" height="36" aria-hidden="true">
<line x1="5" y1="34" x2="36" y2="34" stroke="var(--color-border)" stroke-width="2" stroke-linecap="round"/>
<line x1="5" y1="6" x2="5" y2="34" stroke="var(--color-border)" stroke-width="2" stroke-linecap="round"/>
<rect x="9" y="22" width="6" height="11" rx="1" fill="var(--color-gold)" opacity=".75"/>
<rect x="18" y="14" width="6" height="19" rx="1" fill="var(--color-olive)"/>
<rect x="27" y="9" width="6" height="24" rx="1" fill="var(--color-moss)"/>
<circle cx="30" cy="9" r="3" fill="var(--color-copper)"/>
</svg>
</div>
<p class="card-title">Collecting nextHopProtocol in RUM</p>
<p class="card-desc">Read the negotiated protocol straight out of the Resource Timing API, sample it safely, and tell a genuine HTTP/3 win from measurement noise.</p>
<span class="card-link">Read</span>
</a>
</div>
</div>
<!-- Four section cards -->
<div class="site-wrap" style="margin-top: var(--space-2xl);">
<h2 class="section-title">Topics Covered</h2>
<p style="color:var(--color-muted); max-width:70ch; margin:0 0 var(--space-lg);">
Four sections, 25 topics, 57 guides. Every topic opens with the mechanics and a support matrix,
then breaks down into task-sized guides.
</p>
<div class="card-grid">
<!-- Section 1 -->
<div class="card" style="border-top: 3px solid var(--color-moss);">
<div style="display:flex; align-items:center; gap:var(--space-sm); margin-bottom:var(--space-sm);">
<svg viewBox="0 0 24 24" fill="none" width="22" height="22" aria-hidden="true">
<path d="M3 6h18M3 10h12M3 14h15" stroke="var(--color-moss)" stroke-width="2" stroke-linecap="round"/>
</svg>
<a href="/core-browser-loading-mechanics-priority-queues/" class="card-title" style="font-size:1.05rem;">Core Browser Loading Mechanics</a>
</div>
<p class="card-desc">Eight topics on how browsers schedule, classify, and dispatch network requests — priority tiers, <code>fetchpriority</code>, script execution order, viewport-driven fetching, render-blocking behaviour, third-party impact, cache interaction, and waterfall analysis.</p>
<ul style="list-style:none; padding:0; margin:var(--space-sm) 0 0; display:flex; flex-direction:column; gap:4px;">
<li><a href="/core-browser-loading-mechanics-priority-queues/understanding-browser-resource-priority-queues/" style="font-size:0.85rem; color:var(--color-olive);">Understanding Browser Resource Priority Queues</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/fetchpriority-attribute-priority-hints/" style="font-size:0.85rem; color:var(--color-olive);">The fetchpriority Attribute & Priority Hints</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/script-loading-async-defer-execution-order/" style="font-size:0.85rem; color:var(--color-olive);">Script Loading: async, defer & Execution Order</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/lazy-loading-and-viewport-driven-fetching/" style="font-size:0.85rem; color:var(--color-olive);">Lazy Loading & Viewport-Driven Fetching</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/render-blocking-resource-identification/" style="font-size:0.85rem; color:var(--color-olive);">Render-Blocking Resource Identification</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/network-waterfall-anatomy-timing-metrics/" style="font-size:0.85rem; color:var(--color-olive);">Network Waterfall Anatomy & Metrics</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/third-party-resource-impact-mapping/" style="font-size:0.85rem; color:var(--color-olive);">Third-Party Resource Impact Mapping</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/cache-interaction-stale-while-revalidate/" style="font-size:0.85rem; color:var(--color-olive);">Cache Interaction & Stale-While-Revalidate</a></li>
</ul>
</div>
<!-- Section 2 -->
<div class="card" style="border-top: 3px solid var(--color-gold);">
<div style="display:flex; align-items:center; gap:var(--space-sm); margin-bottom:var(--space-sm);">
<svg viewBox="0 0 24 24" fill="none" width="22" height="22" aria-hidden="true">
<path d="M12 4v12M8 12l4 4 4-4M4 19h16" stroke="var(--color-gold)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<a href="/resource-hint-implementation-preloading-strategies/" class="card-title" style="font-size:1.05rem;">Resource Hint Implementation</a>
</div>
<p class="card-desc">Seven topics on <code>rel="preload"</code>, <code>prefetch</code>, <code>preconnect</code>, <code>modulepreload</code>, Speculation Rules, and media preloading — including font strategy, dynamic injection, and CORS considerations.</p>
<ul style="list-style:none; padding:0; margin:var(--space-sm) 0 0; display:flex; flex-direction:column; gap:4px;">
<li><a href="/resource-hint-implementation-preloading-strategies/mastering-link-rel-preload-prefetch/" style="font-size:0.85rem; color:var(--color-olive);">Mastering Preload & Prefetch</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/strategic-preconnect-dns-prefetch-usage/" style="font-size:0.85rem; color:var(--color-olive);">Strategic Preconnect & DNS-Prefetch</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/modulepreload-es-module-loading/" style="font-size:0.85rem; color:var(--color-olive);">modulepreload & ES Module Loading</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/speculation-rules-prefetch-prerender/" style="font-size:0.85rem; color:var(--color-olive);">Speculation Rules: Prefetch & Prerender</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/font-loading-optimization-fout-prevention/" style="font-size:0.85rem; color:var(--color-olive);">Font Loading & FOUT Prevention</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/preloading-video-and-media-streams/" style="font-size:0.85rem; color:var(--color-olive);">Preloading Video & Media Streams</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/dynamic-hint-injection-via-javascript/" style="font-size:0.85rem; color:var(--color-olive);">Dynamic Hint Injection via JavaScript</a></li>
</ul>
</div>
<!-- Section 3 -->
<div class="card" style="border-top: 3px solid var(--color-copper);">
<div style="display:flex; align-items:center; gap:var(--space-sm); margin-bottom:var(--space-sm);">
<svg viewBox="0 0 24 24" fill="none" width="22" height="22" aria-hidden="true">
<path d="M3 7h18M3 12h18M3 17h18" stroke="var(--color-copper)" stroke-width="2" stroke-linecap="round"/>
</svg>
<a href="/http2-http3-multiplexing-connection-optimization/" class="card-title" style="font-size:1.05rem;">HTTP/2 & HTTP/3 Multiplexing</a>
</div>
<p class="card-desc">Six topics on binary framing, stream prioritisation, head-of-line blocking, 103 Early Hints, QUIC transport, connection coalescing, CDN edge tuning — and how to measure protocol performance on real traffic.</p>
<ul style="list-style:none; padding:0; margin:var(--space-sm) 0 0; display:flex; flex-direction:column; gap:4px;">
<li><a href="/http2-http3-multiplexing-connection-optimization/http2-stream-prioritization-weighting/" style="font-size:0.85rem; color:var(--color-olive);">HTTP/2 Stream Prioritization & Weighting</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/mitigating-head-of-line-blocking/" style="font-size:0.85rem; color:var(--color-olive);">Mitigating Head-of-Line Blocking</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/early-hints-103-implementation/" style="font-size:0.85rem; color:var(--color-olive);">103 Early Hints Implementation</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/connection-coalescing-domain-sharding/" style="font-size:0.85rem; color:var(--color-olive);">Connection Coalescing & Domain Sharding</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/cdn-edge-tuning-for-quic-http3/" style="font-size:0.85rem; color:var(--color-olive);">CDN Edge Tuning for QUIC/HTTP3</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/measuring-protocol-performance-in-the-field/" style="font-size:0.85rem; color:var(--color-olive);">Measuring Protocol Performance in the Field</a></li>
</ul>
</div>
<!-- Section 4: Frameworks -->
<div class="card" style="border-top: 3px solid var(--color-olive);">
<div style="display:flex; align-items:center; gap:var(--space-sm); margin-bottom:var(--space-sm);">
<svg viewBox="0 0 24 24" fill="none" width="22" height="22" aria-hidden="true">
<rect x="3" y="3" width="8" height="8" rx="1.5" stroke="var(--color-olive)" stroke-width="2"/>
<rect x="13" y="3" width="8" height="8" rx="1.5" stroke="var(--color-olive)" stroke-width="2"/>
<rect x="3" y="13" width="8" height="8" rx="1.5" stroke="var(--color-olive)" stroke-width="2"/>
<rect x="13" y="13" width="8" height="8" rx="1.5" stroke="var(--color-olive)" stroke-width="2"/>
</svg>
<a href="/framework-specific-loading-strategies/" class="card-title" style="font-size:1.05rem;">Framework Loading Strategies</a>
</div>
<p class="card-desc">Four topics on how Next.js, Nuxt, Astro, and SvelteKit emit resource hints on your behalf — <code>next/image</code> priority, <code>next/script</code> strategies, NuxtLink prefetching, Astro client directives, SvelteKit preload directives, and where framework defaults fight the browser scheduler.</p>
<ul style="list-style:none; padding:0; margin:var(--space-sm) 0 0; display:flex; flex-direction:column; gap:4px;">
<li><a href="/framework-specific-loading-strategies/nextjs-resource-loading-optimization/" style="font-size:0.85rem; color:var(--color-olive);">Next.js Resource Loading Optimization</a></li>
<li><a href="/framework-specific-loading-strategies/nuxt-resource-loading-optimization/" style="font-size:0.85rem; color:var(--color-olive);">Nuxt Resource Loading Optimization</a></li>
<li><a href="/framework-specific-loading-strategies/astro-islands-loading-optimization/" style="font-size:0.85rem; color:var(--color-olive);">Astro Islands Loading Optimization</a></li>
<li><a href="/framework-specific-loading-strategies/sveltekit-resource-loading-optimization/" style="font-size:0.85rem; color:var(--color-olive);">SvelteKit Resource Loading Optimization</a></li>
</ul>
</div>
</div>
</div>
<!-- Complete index -->
<div class="site-wrap" style="margin-top: var(--space-2xl); margin-bottom: var(--space-2xl);">
<h2 class="section-title">All Articles</h2>
<p style="color:var(--color-muted); max-width:70ch; margin:0 0 var(--space-lg);">
All 86 pages, grouped by section and topic.
</p>
<div style="display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-md);">
<div>
<h3 style="font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-moss); margin-bottom:var(--space-sm); margin-top:0;">Loading Mechanics</h3>
<ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;">
<li><a href="/core-browser-loading-mechanics-priority-queues/" style="font-size:0.9rem; font-weight:600;">Core Browser Loading Mechanics & Priority Queues</a></li>
<li>
<a href="/core-browser-loading-mechanics-priority-queues/understanding-browser-resource-priority-queues/" style="font-size:0.9rem; font-weight:600;">Understanding Browser Resource Priority Queues</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/core-browser-loading-mechanics-priority-queues/understanding-browser-resource-priority-queues/chrome-vs-safari-vs-firefox-priority-differences/" style="font-size:0.85rem;">Chrome vs Safari vs Firefox: Priority Differences</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/understanding-browser-resource-priority-queues/how-browser-fetch-priority-affects-lcp/" style="font-size:0.85rem;">How Browser Fetch Priority Affects LCP</a></li>
</ul>
</li>
<li>
<a href="/core-browser-loading-mechanics-priority-queues/fetchpriority-attribute-priority-hints/" style="font-size:0.9rem; font-weight:600;">The fetchpriority Attribute & Priority Hints</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/core-browser-loading-mechanics-priority-queues/fetchpriority-attribute-priority-hints/deprioritizing-below-the-fold-images/" style="font-size:0.85rem;">Deprioritizing Below-the-Fold Images with fetchpriority=low</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/fetchpriority-attribute-priority-hints/fetchpriority-high-not-working-on-lcp-image/" style="font-size:0.85rem;">fetchpriority=high Not Working on Your LCP Image</a></li>
</ul>
</li>
<li>
<a href="/core-browser-loading-mechanics-priority-queues/script-loading-async-defer-execution-order/" style="font-size:0.9rem; font-weight:600;">Script Loading: async, defer & Execution Order</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/core-browser-loading-mechanics-priority-queues/script-loading-async-defer-execution-order/deferring-third-party-scripts-without-breaking-analytics/" style="font-size:0.85rem;">Deferring Third-Party Scripts Without Breaking Analytics</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/script-loading-async-defer-execution-order/fixing-async-script-race-conditions/" style="font-size:0.85rem;">Fixing async Script Race Conditions</a></li>
</ul>
</li>
<li>
<a href="/core-browser-loading-mechanics-priority-queues/lazy-loading-and-viewport-driven-fetching/" style="font-size:0.9rem; font-weight:600;">Lazy Loading & Viewport-Driven Fetching</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/core-browser-loading-mechanics-priority-queues/lazy-loading-and-viewport-driven-fetching/choosing-loading-lazy-vs-intersectionobserver/" style="font-size:0.85rem;">Choosing loading="lazy" vs IntersectionObserver</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/lazy-loading-and-viewport-driven-fetching/fixing-lazy-loaded-lcp-image-regressions/" style="font-size:0.85rem;">Fixing Lazy-Loaded LCP Image Regressions</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/lazy-loading-and-viewport-driven-fetching/using-content-visibility-to-skip-offscreen-rendering/" style="font-size:0.85rem;">Using content-visibility to Skip Offscreen Rendering</a></li>
</ul>
</li>
<li>
<a href="/core-browser-loading-mechanics-priority-queues/render-blocking-resource-identification/" style="font-size:0.9rem; font-weight:600;">Render-Blocking Resource Identification</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/core-browser-loading-mechanics-priority-queues/render-blocking-resource-identification/auditing-render-blocking-with-lighthouse-treemap/" style="font-size:0.85rem;">Auditing Render-Blocking Resources with the Lighthouse Treemap</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/render-blocking-resource-identification/eliminating-render-blocking-css-with-media-queries/" style="font-size:0.85rem;">Eliminating Render-Blocking CSS with Media Queries</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/render-blocking-resource-identification/fixing-low-priority-critical-css-requests/" style="font-size:0.85rem;">Fixing Low Priority Critical CSS Requests</a></li>
</ul>
</li>
<li>
<a href="/core-browser-loading-mechanics-priority-queues/network-waterfall-anatomy-timing-metrics/" style="font-size:0.9rem; font-weight:600;">Network Waterfall Anatomy & Timing Metrics</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/core-browser-loading-mechanics-priority-queues/network-waterfall-anatomy-timing-metrics/decoding-chrome-devtools-network-waterfall/" style="font-size:0.85rem;">Decoding Chrome DevTools Network Waterfall: Debugging Scheduler Stalls</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/network-waterfall-anatomy-timing-metrics/diagnosing-request-queueing-and-stalled-time/" style="font-size:0.85rem;">Diagnosing Request Queueing and Stalled Time</a></li>
</ul>
</li>
<li>
<a href="/core-browser-loading-mechanics-priority-queues/third-party-resource-impact-mapping/" style="font-size:0.9rem; font-weight:600;">Third-Party Resource Impact Mapping</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/core-browser-loading-mechanics-priority-queues/third-party-resource-impact-mapping/measuring-tag-manager-blocking-time/" style="font-size:0.85rem;">Measuring Tag Manager Blocking Time</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/third-party-resource-impact-mapping/replacing-third-party-embeds-with-facades/" style="font-size:0.85rem;">Replacing Third-Party Embeds with Facades</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/third-party-resource-impact-mapping/setting-a-third-party-request-budget/" style="font-size:0.85rem;">Setting a Third-Party Request Budget</a></li>
</ul>
</li>
<li>
<a href="/core-browser-loading-mechanics-priority-queues/cache-interaction-stale-while-revalidate/" style="font-size:0.9rem; font-weight:600;">Cache Interaction & Stale-While-Revalidate</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/core-browser-loading-mechanics-priority-queues/cache-interaction-stale-while-revalidate/cache-control-headers-vs-resource-hints/" style="font-size:0.85rem;">Cache-Control Headers vs Resource Hints: Resolving Priority Conflicts</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/cache-interaction-stale-while-revalidate/stale-while-revalidate-vs-service-worker-cache/" style="font-size:0.85rem;">Stale-While-Revalidate vs Service Worker Cache</a></li>
</ul>
</li>
</ul>
</div>
<div>
<h3 style="font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-gold-text); margin-bottom:var(--space-sm); margin-top:0;">Resource Hints</h3>
<ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;">
<li><a href="/resource-hint-implementation-preloading-strategies/" style="font-size:0.9rem; font-weight:600;">Resource Hint Implementation & Preloading Strategies</a></li>
<li>
<a href="/resource-hint-implementation-preloading-strategies/mastering-link-rel-preload-prefetch/" style="font-size:0.9rem; font-weight:600;">Mastering Link Rel Preload & Prefetch</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/resource-hint-implementation-preloading-strategies/mastering-link-rel-preload-prefetch/debugging-unused-preload-console-warnings/" style="font-size:0.85rem;">Debugging "preloaded but not used" Console Warnings</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/mastering-link-rel-preload-prefetch/preload-vs-prefetch-vs-modulepreload-decision-matrix/" style="font-size:0.85rem;">Preload vs Prefetch vs modulepreload: a Decision Matrix</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/mastering-link-rel-preload-prefetch/preloading-critical-above-the-fold-assets/" style="font-size:0.85rem;">Preloading Critical Above-the-Fold Assets: Fix Priority Inversion</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/mastering-link-rel-preload-prefetch/when-to-use-preload-vs-prefetch-for-images/" style="font-size:0.85rem;">When to Use Preload vs Prefetch for Images</a></li>
</ul>
</li>
<li>
<a href="/resource-hint-implementation-preloading-strategies/strategic-preconnect-dns-prefetch-usage/" style="font-size:0.9rem; font-weight:600;">Strategic Preconnect & DNS-Prefetch Usage</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/resource-hint-implementation-preloading-strategies/strategic-preconnect-dns-prefetch-usage/automating-preconnect-for-third-party-apis/" style="font-size:0.85rem;">Automating Preconnect for Third-Party APIs</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/strategic-preconnect-dns-prefetch-usage/preconnect-vs-dns-prefetch-decision-matrix/" style="font-size:0.85rem;">preconnect vs dns-prefetch: A Decision Matrix</a></li>
</ul>
</li>
<li>
<a href="/resource-hint-implementation-preloading-strategies/modulepreload-es-module-loading/" style="font-size:0.9rem; font-weight:600;">modulepreload & ES Module Loading</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/resource-hint-implementation-preloading-strategies/modulepreload-es-module-loading/fixing-dynamic-import-request-waterfalls/" style="font-size:0.85rem;">Fixing Dynamic Import Request Waterfalls</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/modulepreload-es-module-loading/mapping-vite-chunk-graphs-to-modulepreload/" style="font-size:0.85rem;">Mapping Vite Chunk Graphs to modulepreload</a></li>
</ul>
</li>
<li>
<a href="/resource-hint-implementation-preloading-strategies/speculation-rules-prefetch-prerender/" style="font-size:0.9rem; font-weight:600;">Speculation Rules: Prefetch & Prerender</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/resource-hint-implementation-preloading-strategies/speculation-rules-prefetch-prerender/migrating-from-quicklink-to-speculation-rules/" style="font-size:0.85rem;">Migrating from Quicklink to Speculation Rules</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/speculation-rules-prefetch-prerender/tuning-speculation-rules-eagerness-settings/" style="font-size:0.85rem;">Tuning Speculation Rules Eagerness Settings</a></li>
</ul>
</li>
<li>
<a href="/resource-hint-implementation-preloading-strategies/font-loading-optimization-fout-prevention/" style="font-size:0.9rem; font-weight:600;">Font Loading Optimization & FOUT Prevention</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/resource-hint-implementation-preloading-strategies/font-loading-optimization-fout-prevention/preventing-foit-with-font-loading-api/" style="font-size:0.85rem;">Preventing FOIT with the CSS Font Loading API</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/font-loading-optimization-fout-prevention/reducing-font-swap-with-font-display-swap/" style="font-size:0.85rem;">Reducing Font Swap Duration with font-display: swap</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/font-loading-optimization-fout-prevention/subsetting-and-preloading-variable-fonts/" style="font-size:0.85rem;">Subsetting and Preloading Variable Fonts</a></li>
</ul>
</li>
<li>
<a href="/resource-hint-implementation-preloading-strategies/preloading-video-and-media-streams/" style="font-size:0.9rem; font-weight:600;">Preloading Video & Media Streams</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/resource-hint-implementation-preloading-strategies/preloading-video-and-media-streams/choosing-video-preload-metadata-vs-auto/" style="font-size:0.85rem;">Choosing video preload="metadata" vs "auto"</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/preloading-video-and-media-streams/preloading-hls-and-dash-manifest-segments/" style="font-size:0.85rem;">Preloading HLS and DASH Manifest Segments</a></li>
</ul>
</li>
<li>
<a href="/resource-hint-implementation-preloading-strategies/dynamic-hint-injection-via-javascript/" style="font-size:0.9rem; font-weight:600;">Dynamic Hint Injection via JavaScript</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/resource-hint-implementation-preloading-strategies/dynamic-hint-injection-via-javascript/fixing-preload-scanner-misses-in-spas/" style="font-size:0.85rem;">Fixing Preload Scanner Misses in Single-Page Apps</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/dynamic-hint-injection-via-javascript/injecting-hints-from-a-service-worker/" style="font-size:0.85rem;">Injecting Resource Hints from a Service Worker</a></li>
</ul>
</li>
</ul>
</div>
<div>
<h3 style="font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-copper); margin-bottom:var(--space-sm); margin-top:0;">HTTP/2 & HTTP/3</h3>
<ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;">
<li><a href="/http2-http3-multiplexing-connection-optimization/" style="font-size:0.9rem; font-weight:600;">HTTP/2 & HTTP/3 Multiplexing and Connection Optimization</a></li>
<li>
<a href="/http2-http3-multiplexing-connection-optimization/http2-stream-prioritization-weighting/" style="font-size:0.9rem; font-weight:600;">HTTP/2 Stream Prioritization & Weighting</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/http2-http3-multiplexing-connection-optimization/http2-stream-prioritization-weighting/fixing-http2-priority-inversion-issues/" style="font-size:0.85rem;">Fixing HTTP/2 Priority Inversion Issues</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/http2-stream-prioritization-weighting/http2-priority-vs-http3-priority-header/" style="font-size:0.85rem;">HTTP/2 Priority Trees vs the HTTP/3 Priority Header</a></li>
</ul>
</li>
<li>
<a href="/http2-http3-multiplexing-connection-optimization/mitigating-head-of-line-blocking/" style="font-size:0.9rem; font-weight:600;">Mitigating Head-of-Line Blocking in HTTP/2 and HTTP/3</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/http2-http3-multiplexing-connection-optimization/mitigating-head-of-line-blocking/does-http3-eliminate-head-of-line-blocking/" style="font-size:0.85rem;">Does HTTP/3 Eliminate Head-of-Line Blocking?</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/mitigating-head-of-line-blocking/tcp-vs-quic-loss-recovery-under-packet-loss/" style="font-size:0.85rem;">TCP vs QUIC Loss Recovery Under Packet Loss</a></li>
</ul>
</li>
<li>
<a href="/http2-http3-multiplexing-connection-optimization/early-hints-103-implementation/" style="font-size:0.9rem; font-weight:600;">103 Early Hints Implementation</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/http2-http3-multiplexing-connection-optimization/early-hints-103-implementation/avoiding-early-hints-cache-poisoning/" style="font-size:0.85rem;">Avoiding Early Hints Cache Poisoning</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/early-hints-103-implementation/enabling-early-hints-on-cdn-and-origin/" style="font-size:0.85rem;">Enabling 103 Early Hints on CDN & Origin</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/early-hints-103-implementation/http2-server-push-vs-103-early-hints/" style="font-size:0.85rem;">HTTP/2 Server Push vs 103 Early Hints</a></li>
</ul>
</li>
<li>
<a href="/http2-http3-multiplexing-connection-optimization/connection-coalescing-domain-sharding/" style="font-size:0.9rem; font-weight:600;">Connection Coalescing & Domain Sharding</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/http2-http3-multiplexing-connection-optimization/connection-coalescing-domain-sharding/dismantling-domain-sharding-for-http3/" style="font-size:0.85rem;">Dismantling Domain Sharding for HTTP/3</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/connection-coalescing-domain-sharding/verifying-connection-coalescing-with-devtools/" style="font-size:0.85rem;">Verifying Connection Coalescing with DevTools</a></li>
</ul>
</li>
<li>
<a href="/http2-http3-multiplexing-connection-optimization/cdn-edge-tuning-for-quic-http3/" style="font-size:0.9rem; font-weight:600;">CDN Edge Tuning for QUIC & HTTP/3</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/http2-http3-multiplexing-connection-optimization/cdn-edge-tuning-for-quic-http3/quic-0rtt-session-resumption-gotchas/" style="font-size:0.85rem;">QUIC 0-RTT Session Resumption Gotchas</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/cdn-edge-tuning-for-quic-http3/rolling-out-alt-svc-headers-safely/" style="font-size:0.85rem;">Rolling Out Alt-Svc Headers Safely</a></li>
</ul>
</li>
<li>
<a href="/http2-http3-multiplexing-connection-optimization/measuring-protocol-performance-in-the-field/" style="font-size:0.9rem; font-weight:600;">Measuring Protocol Performance in the Field</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/http2-http3-multiplexing-connection-optimization/measuring-protocol-performance-in-the-field/collecting-nexthopprotocol-with-resource-timing/" style="font-size:0.85rem;">Collecting nextHopProtocol with Resource Timing</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/measuring-protocol-performance-in-the-field/reading-server-timing-headers-for-protocol-stalls/" style="font-size:0.85rem;">Reading Server-Timing Headers for Protocol Stalls</a></li>
</ul>
</li>
</ul>
</div>
<div>
<h3 style="font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--color-olive); margin-bottom:var(--space-sm); margin-top:0;">Framework Strategies</h3>
<ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;">
<li><a href="/framework-specific-loading-strategies/" style="font-size:0.9rem; font-weight:600;">Framework-Specific Loading Strategies</a></li>
<li>
<a href="/framework-specific-loading-strategies/nextjs-resource-loading-optimization/" style="font-size:0.9rem; font-weight:600;">Next.js Resource Loading Optimization</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/framework-specific-loading-strategies/nextjs-resource-loading-optimization/choosing-nextjs-script-strategy/" style="font-size:0.85rem;">Choosing the Right next/script Loading Strategy</a></li>
<li><a href="/framework-specific-loading-strategies/nextjs-resource-loading-optimization/fixing-nextjs-lcp-image-priority/" style="font-size:0.85rem;">Fixing Next.js LCP Image Priority with next/image</a></li>
</ul>
</li>
<li>
<a href="/framework-specific-loading-strategies/nuxt-resource-loading-optimization/" style="font-size:0.9rem; font-weight:600;">Nuxt Resource Loading Optimization</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/framework-specific-loading-strategies/nuxt-resource-loading-optimization/controlling-nuxt-payload-and-island-hydration/" style="font-size:0.85rem;">Controlling Nuxt Payload and Island Hydration</a></li>
<li><a href="/framework-specific-loading-strategies/nuxt-resource-loading-optimization/tuning-nuxt-link-prefetch-behavior/" style="font-size:0.85rem;">Tuning NuxtLink Prefetch Behavior</a></li>
</ul>
</li>
<li>
<a href="/framework-specific-loading-strategies/astro-islands-loading-optimization/" style="font-size:0.9rem; font-weight:600;">Astro Islands Loading Optimization</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/framework-specific-loading-strategies/astro-islands-loading-optimization/optimizing-astro-view-transitions-prefetch/" style="font-size:0.85rem;">Optimizing Astro View Transitions Prefetch</a></li>
<li><a href="/framework-specific-loading-strategies/astro-islands-loading-optimization/sequencing-astro-client-directives/" style="font-size:0.85rem;">Sequencing Astro Client Directives for Faster Interactivity</a></li>
</ul>
</li>
<li>
<a href="/framework-specific-loading-strategies/sveltekit-resource-loading-optimization/" style="font-size:0.9rem; font-weight:600;">SvelteKit Resource Loading Optimization</a>
<ul style="list-style:none; padding:0 0 0 10px; margin:6px 0 0; border-left:2px solid var(--color-border); display:flex; flex-direction:column; gap:5px;">
<li><a href="/framework-specific-loading-strategies/sveltekit-resource-loading-optimization/fixing-sveltekit-hydration-waterfalls/" style="font-size:0.85rem;">Fixing SvelteKit Hydration Waterfalls</a></li>
<li><a href="/framework-specific-loading-strategies/sveltekit-resource-loading-optimization/tuning-sveltekit-data-preload-directives/" style="font-size:0.85rem;">Tuning SvelteKit Data Preload Directives</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>