-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.njk
More file actions
315 lines (293 loc) · 31.1 KB
/
Copy pathindex.njk
File metadata and controls
315 lines (293 loc) · 31.1 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
---
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.
Master fetch priority, preload strategies, HTTP/2 & HTTP/3 multiplexing,
network waterfall optimisation, and framework-specific loading tactics for
Next.js, Nuxt, and Astro to build blazing-fast web experiences.
</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 domains: how browsers build and manage their internal priority queues; how resource hints (preload, prefetch, preconnect, modulepreload, 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 decisions; and how meta-frameworks like Next.js, Nuxt, and Astro emit — or fight — those signals on your behalf.
</p>
<p>
Whether you're diagnosing a priority inversion in Chrome DevTools, tuning <code>font-display</code> to eliminate FOUT, eliminating head-of-line blocking with HTTP/3, 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>
<!-- Start Here -->
<div class="site-wrap">
<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="/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>
</div>
</div>
<!-- Four topic-area section cards -->
<div class="site-wrap" style="margin-top: var(--space-2xl);">
<h2 class="section-title">Topics Covered</h2>
<div class="card-grid">
<!-- Topic area 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">How browsers schedule, classify, and dispatch network requests — priority tiers, <code>fetchpriority</code>, 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);">Priority Queues Deep Dive</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/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/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/cache-interaction-stale-while-revalidate/" style="font-size:0.85rem; color:var(--color-olive);">Cache Interaction & Stale-While-Revalidate</a></li>
</ul>
</div>
<!-- Topic area 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">Practical implementation of <code>rel="preload"</code>, <code>prefetch</code>, <code>preconnect</code>, <code>modulepreload</code>, and Speculation Rules — including font loading, dynamic hint 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/dynamic-hint-injection-via-javascript/" style="font-size:0.85rem; color:var(--color-olive);">Dynamic Hint Injection via JavaScript</a></li>
</ul>
</div>
<!-- Topic area 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">Binary framing, stream prioritisation, head-of-line blocking, 103 Early Hints, QUIC transport, connection coalescing, domain sharding, and CDN edge tuning for modern protocols.</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>
</ul>
</div>
<!-- Topic area 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">How Next.js, Nuxt, and Astro emit resource hints on your behalf — <code>next/image</code> priority, <code>next/script</code> strategies, NuxtLink prefetching, Astro client 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>
</ul>
</div>
</div>
</div>
<!-- Latest / All pages list -->
<div class="site-wrap" style="margin-top: var(--space-2xl); margin-bottom: var(--space-2xl);">
<h2 class="section-title">All Articles</h2>
<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:6px;">
<li><a href="/core-browser-loading-mechanics-priority-queues/understanding-browser-resource-priority-queues/" style="font-size:0.875rem;">Understanding Browser Resource Priority Queues</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.875rem;">How Fetch Priority Affects LCP</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/fetchpriority-attribute-priority-hints/" style="font-size:0.875rem;">The fetchpriority Attribute & Priority Hints</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.875rem;">fetchpriority=high Not Working on Your LCP Image</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/fetchpriority-attribute-priority-hints/deprioritizing-below-the-fold-images/" style="font-size:0.875rem;">Deprioritizing Below-the-Fold Images</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/third-party-resource-impact-mapping/" style="font-size:0.875rem;">Third-Party Resource Impact Mapping</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/third-party-resource-impact-mapping/measuring-tag-manager-blocking-time/" style="font-size:0.875rem;">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.875rem;">Replacing Third-Party Embeds with Facades</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/render-blocking-resource-identification/" style="font-size:0.875rem;">Render-Blocking Resource Identification</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.875rem;">Fixing Low-Priority Critical CSS</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/network-waterfall-anatomy-timing-metrics/" style="font-size:0.875rem;">Network Waterfall Anatomy & Metrics</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/network-waterfall-anatomy-timing-metrics/decoding-chrome-devtools-network-waterfall/" style="font-size:0.875rem;">Decoding Chrome DevTools Waterfall</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/cache-interaction-stale-while-revalidate/" style="font-size:0.875rem;">Cache Interaction & Stale-While-Revalidate</a></li>
<li><a href="/core-browser-loading-mechanics-priority-queues/cache-interaction-stale-while-revalidate/cache-control-headers-vs-resource-hints/" style="font-size:0.875rem;">Cache-Control vs Resource Hints</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.875rem;">Stale-While-Revalidate vs Service Worker Cache</a></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:6px;">
<li><a href="/resource-hint-implementation-preloading-strategies/mastering-link-rel-preload-prefetch/" style="font-size:0.875rem;">Mastering Link Rel Preload & Prefetch</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.875rem;">Preload vs Prefetch for Images</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.875rem;">Preloading Above-the-Fold Assets</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.875rem;">Preload vs Prefetch vs modulepreload</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/modulepreload-es-module-loading/" style="font-size:0.875rem;">modulepreload & ES Module Loading</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/modulepreload-es-module-loading/fixing-dynamic-import-request-waterfalls/" style="font-size:0.875rem;">Fixing Dynamic Import Request Waterfalls</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/speculation-rules-prefetch-prerender/" style="font-size:0.875rem;">Speculation Rules: Prefetch & Prerender</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/speculation-rules-prefetch-prerender/migrating-from-quicklink-to-speculation-rules/" style="font-size:0.875rem;">Migrating from Quicklink to Speculation Rules</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/strategic-preconnect-dns-prefetch-usage/" style="font-size:0.875rem;">Strategic Preconnect & DNS-Prefetch</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/strategic-preconnect-dns-prefetch-usage/automating-preconnect-for-third-party-apis/" style="font-size:0.875rem;">Automating Preconnect for Third-Party APIs</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/font-loading-optimization-fout-prevention/" style="font-size:0.875rem;">Font Loading & FOUT Prevention</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.875rem;">Reducing Font Swap with font-display</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/font-loading-optimization-fout-prevention/preventing-foit-with-font-loading-api/" style="font-size:0.875rem;">Preventing FOIT with the Font Loading API</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/dynamic-hint-injection-via-javascript/" style="font-size:0.875rem;">Dynamic Hint Injection via JavaScript</a></li>
<li><a href="/resource-hint-implementation-preloading-strategies/dynamic-hint-injection-via-javascript/fixing-preload-scanner-misses-in-spas/" style="font-size:0.875rem;">Fixing Preload Scanner Misses in SPAs</a></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:6px;">
<li><a href="/http2-http3-multiplexing-connection-optimization/http2-stream-prioritization-weighting/" style="font-size:0.875rem;">HTTP/2 Stream Prioritization & Weighting</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/http2-stream-prioritization-weighting/fixing-http2-priority-inversion-issues/" style="font-size:0.875rem;">Fixing HTTP/2 Priority Inversion Issues</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/mitigating-head-of-line-blocking/" style="font-size:0.875rem;">Mitigating Head-of-Line Blocking</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/mitigating-head-of-line-blocking/does-http3-eliminate-head-of-line-blocking/" style="font-size:0.875rem;">Does HTTP/3 Eliminate HOL Blocking?</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/early-hints-103-implementation/" style="font-size:0.875rem;">103 Early Hints Implementation</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.875rem;">HTTP/2 Server Push vs 103 Early Hints</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.875rem;">Enabling 103 Early Hints on CDN & Origin</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/connection-coalescing-domain-sharding/" style="font-size:0.875rem;">Connection Coalescing & Domain Sharding</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/connection-coalescing-domain-sharding/dismantling-domain-sharding-for-http3/" style="font-size:0.875rem;">Dismantling Domain Sharding for HTTP/3</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/cdn-edge-tuning-for-quic-http3/" style="font-size:0.875rem;">CDN Edge Tuning for QUIC & HTTP/3</a></li>
<li><a href="/http2-http3-multiplexing-connection-optimization/cdn-edge-tuning-for-quic-http3/quic-0rtt-session-resumption-gotchas/" style="font-size:0.875rem;">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.875rem;">Rolling Out Alt-Svc Headers Safely</a></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:6px;">
<li><a href="/framework-specific-loading-strategies/" style="font-size:0.875rem;">Framework-Specific Loading Strategies</a></li>
<li><a href="/framework-specific-loading-strategies/nextjs-resource-loading-optimization/" style="font-size:0.875rem;">Next.js Resource Loading Optimization</a></li>
<li><a href="/framework-specific-loading-strategies/nextjs-resource-loading-optimization/fixing-nextjs-lcp-image-priority/" style="font-size:0.875rem;">Fixing Next.js LCP Image Priority</a></li>
<li><a href="/framework-specific-loading-strategies/nextjs-resource-loading-optimization/choosing-nextjs-script-strategy/" style="font-size:0.875rem;">Choosing the Right next/script Strategy</a></li>
<li><a href="/framework-specific-loading-strategies/nuxt-resource-loading-optimization/" style="font-size:0.875rem;">Nuxt Resource Loading Optimization</a></li>
<li><a href="/framework-specific-loading-strategies/nuxt-resource-loading-optimization/tuning-nuxt-link-prefetch-behavior/" style="font-size:0.875rem;">Tuning NuxtLink Prefetch Behavior</a></li>
<li><a href="/framework-specific-loading-strategies/astro-islands-loading-optimization/" style="font-size:0.875rem;">Astro Islands Loading Optimization</a></li>
<li><a href="/framework-specific-loading-strategies/astro-islands-loading-optimization/sequencing-astro-client-directives/" style="font-size:0.875rem;">Sequencing Astro Client Directives</a></li>
</ul>
</div>
</div>
</div>