[{"data":1,"prerenderedAt":878},["ShallowReactive",2],{"content:\u002Fnetwork-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002Fdiagnosing-head-of-line-blocking":3,"surroundings:\u002Fnetwork-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002Fdiagnosing-head-of-line-blocking":869},{"id":4,"title":5,"body":6,"description":849,"extension":850,"meta":851,"navigation":862,"path":863,"seo":864,"stem":867,"__hash__":868},"content\u002Fnetwork-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002Fdiagnosing-head-of-line-blocking\u002Findex.md","Diagnosing Head-of-Line Blocking",{"type":7,"value":8,"toc":832},"minimark",[9,14,38,45,191,196,224,228,234,240,246,252,256,261,269,364,368,374,378,385,389,392,526,530,533,537,543,547,561,623,627,653,657,663,669,675,681,685,697,706,715,727,736,745,754,763,772,781,790,794,817,822,825,828],[10,11,13],"h1",{"id":12},"how-to-diagnose-head-of-line-blocking","How to Diagnose Head-of-Line Blocking",[15,16,17,18,23,24,28,29,33,34,37],"p",{},"This guide is part of ",[19,20,22],"a",{"href":21},"\u002Fnetwork-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002F","HTTP\u002F2, HTTP\u002F3 & Connection Management",", within ",[19,25,27],{"href":26},"\u002Fnetwork-protocol-optimization\u002F","Network & Server Response Optimization",". Head-of-line (HOL) blocking happens when something at the front of a queue holds up everything behind it. On the web, it occurs at two layers. At the ",[30,31,32],"strong",{},"HTTP layer",", HTTP\u002F1.1 processes one response at a time per connection, so a slow or large response blocks the next. HTTP\u002F2 fixed this with multiplexing — but at the ",[30,35,36],{},"transport layer",", HTTP\u002F2 still runs over TCP, which delivers bytes strictly in order. If a single packet is lost, every stream on the connection waits for its retransmission, even streams whose data arrived fine. HTTP\u002F3 over QUIC removes transport-level HOL blocking because each stream is delivered independently.",[15,39,40,41,44],{},"A third, related problem is ",[30,42,43],{},"prioritisation blocking",": even without packet loss, a server that sends large, low-priority responses (images, video) before small critical ones (CSS, the LCP image) delays rendering. The symptoms look similar in waterfalls — critical resources finishing late despite starting early — so diagnosing which cause applies is the key step.",[15,46,47],{},[48,49,55,56,55,63,55,67,55,70,55,79,55,85,55,90,55,99,55,106,55,111,55,115,55,119,55,123,55,127,55,130,55,133,55,135,55,138,55,142,55,149,55,154,55,161,55,167,55,171,55,175,55,179,55,183,55,187,55],"svg",{"viewBox":50,"width":51,"role":52,"ariaLabel":53,"style":54},"0 0 760 216","100%","img","Timeline showing how a lost TCP packet stalls all HTTP\u002F2 streams on the connection while HTTP\u002F3 streams continue independently.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[57,58],"rect",{"className":59,"x":61,"y":61,"width":51,"height":51,"fill":62},[60],"svg-canvas","0","#ffffff",[64,65,66],"title",{},"One lost packet on an HTTP\u002F2 connection",[68,69,53],"desc",{},[57,71],{"x":72,"y":72,"width":73,"height":74,"rx":75,"fill":76,"stroke":77,"style":78},"1","758","214","10","none","currentColor","stroke-opacity:0.18",[80,81,66],"text",{"x":82,"y":83,"fill":77,"style":84},"28.0","34.0","font-size:16px;font-weight:700",[80,86,89],{"x":82,"y":87,"fill":77,"style":88},"74.0","font-size:12.5px;font-weight:700","H2 CSS stream",[57,91],{"x":92,"y":93,"width":94,"height":95,"rx":96,"fill":97,"stroke":97,"style":98},"141.6","56.0","144.8","26.0","3","#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[80,100,105],{"x":101,"y":102,"fill":77,"style":103,"textAnchor":104},"214.0","73.5","font-size:11.5px","middle","data",[57,107],{"x":108,"y":93,"width":109,"height":95,"rx":96,"fill":76,"stroke":77,"style":110},"287.9","222.8","stroke-opacity:0.35",[80,112,114],{"x":113,"y":102,"fill":77,"style":103,"textAnchor":104},"399.3","stalled (loss on other stream)",[57,116],{"x":117,"y":93,"width":118,"height":95,"rx":96,"fill":97,"stroke":97,"style":98},"512.2","47.3",[80,120,122],{"x":121,"y":102,"fill":77,"style":103,"textAnchor":104},"535.8","done",[80,124,126],{"x":82,"y":125,"fill":77,"style":88},"112.0","H2 image stream",[57,128],{"x":92,"y":129,"width":94,"height":95,"rx":96,"fill":97,"stroke":97,"style":98},"94.0",[80,131,105],{"x":101,"y":132,"fill":77,"style":103,"textAnchor":104},"111.5",[57,134],{"x":108,"y":129,"width":109,"height":95,"rx":96,"fill":76,"stroke":77,"style":110},[80,136,137],{"x":113,"y":132,"fill":77,"style":103,"textAnchor":104},"retransmit wait",[80,139,141],{"x":82,"y":140,"fill":77,"style":88},"150.0","H3 CSS stream",[57,143],{"x":92,"y":144,"width":145,"height":95,"rx":96,"fill":146,"stroke":147,"style":148},"132.0","203.3","#ffc300","#b8860b","fill-opacity:0.24;stroke-opacity:0.9",[80,150,153],{"x":151,"y":152,"fill":77,"style":103,"textAnchor":104},"243.3","149.5","data + done",[155,156],"line",{"x1":157,"y1":158,"x2":159,"y2":158,"stroke":77,"style":160},"140.9","172.0","726.0","stroke-opacity:0.4",[80,162,166],{"x":163,"y":164,"fill":165,"style":103,"textAnchor":104},"151.6","189.0","#51617a","0ms",[80,168,170],{"x":169,"y":164,"fill":165,"style":103,"textAnchor":104},"238.4","100ms",[80,172,174],{"x":173,"y":164,"fill":165,"style":103,"textAnchor":104},"335.9","200ms",[80,176,178],{"x":177,"y":164,"fill":165,"style":103,"textAnchor":104},"433.4","300ms",[80,180,182],{"x":181,"y":164,"fill":165,"style":103,"textAnchor":104},"531.0","400ms",[80,184,186],{"x":185,"y":164,"fill":165,"style":103,"textAnchor":104},"628.5","500ms",[80,188,190],{"x":189,"y":164,"fill":165,"style":103,"textAnchor":104},"715.3","600ms",[192,193,195],"h2",{"id":194},"rapid-diagnosis","Rapid Diagnosis",[197,198,199,206,212,218],"ul",{},[200,201,202,205],"li",{},[30,203,204],{},"Look for long \"Content Download\" phases"," on small critical resources in the waterfall while other resources are downloading.",[200,207,208,211],{},[30,209,210],{},"Check the protocol"," per request: HTTP\u002F2 over TCP is susceptible to transport HOL blocking.",[200,213,214,217],{},[30,215,216],{},"Check network conditions",": problems cluster on lossy mobile networks and congested Wi-Fi.",[200,219,220,223],{},[30,221,222],{},"Check request priority"," in DevTools (Priority column) and the order the server delivers responses.",[192,225,227],{"id":226},"root-cause-analysis","Root Cause Analysis",[15,229,230,233],{},[30,231,232],{},"1. Packet loss on TCP."," All HTTP\u002F2 streams stall until retransmission.",[15,235,236,239],{},[30,237,238],{},"2. Poor server prioritisation."," The server sends low-priority bytes first or interleaves them evenly with critical ones.",[15,241,242,245],{},[30,243,244],{},"3. Large responses early in the queue."," Big images or JSON scheduled before critical CSS.",[15,247,248,251],{},[30,249,250],{},"4. HTTP\u002F1.1 fallback."," Some clients or proxies still use HTTP\u002F1.1, with classic HTTP-level HOL blocking.",[192,253,255],{"id":254},"step-by-step-resolution","Step-by-Step Resolution",[257,258,260],"h3",{"id":259},"_1-distinguish-loss-from-prioritisation","1. Distinguish loss from prioritisation",[15,262,263,264,268],{},"Reproduce with network emulation that includes packet loss (for example, WebPageTest custom profiles or ",[265,266,267],"code",{},"tc netem","), and compare with a lossless run. If critical resources are only late with loss, it is transport HOL blocking; if they are late even without loss, it is prioritisation.",[270,271,276],"pre",{"className":272,"code":273,"language":274,"meta":275,"style":275},"language-bash shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","# Linux: add 2% packet loss and 100ms delay on an interface for testing.\nsudo tc qdisc add dev eth0 root netem delay 100ms loss 2%\n# ... run tests ...\nsudo tc qdisc del dev eth0 root\n# trade-off: system-wide emulation affects everything on the machine; use a\n# dedicated test box or container network namespace.\n","bash","",[265,277,278,286,327,333,352,358],{"__ignoreMap":275},[279,280,282],"span",{"class":155,"line":281},1,[279,283,285],{"class":284},"sjfSM","# Linux: add 2% packet loss and 100ms delay on an interface for testing.\n",[279,287,289,293,297,300,303,306,309,312,315,318,321,324],{"class":155,"line":288},2,[279,290,292],{"class":291},"sQw3B","sudo",[279,294,296],{"class":295},"sZ8jY"," tc",[279,298,299],{"class":295}," qdisc",[279,301,302],{"class":295}," add",[279,304,305],{"class":295}," dev",[279,307,308],{"class":295}," eth0",[279,310,311],{"class":295}," root",[279,313,314],{"class":295}," netem",[279,316,317],{"class":295}," delay",[279,319,320],{"class":295}," 100ms",[279,322,323],{"class":295}," loss",[279,325,326],{"class":295}," 2%\n",[279,328,330],{"class":155,"line":329},3,[279,331,332],{"class":284},"# ... run tests ...\n",[279,334,336,338,340,342,345,347,349],{"class":155,"line":335},4,[279,337,292],{"class":291},[279,339,296],{"class":295},[279,341,299],{"class":295},[279,343,344],{"class":295}," del",[279,346,305],{"class":295},[279,348,308],{"class":295},[279,350,351],{"class":295}," root\n",[279,353,355],{"class":155,"line":354},5,[279,356,357],{"class":284},"# trade-off: system-wide emulation affects everything on the machine; use a\n",[279,359,361],{"class":155,"line":360},6,[279,362,363],{"class":284},"# dedicated test box or container network namespace.\n",[257,365,367],{"id":366},"_2-enable-http3","2. Enable HTTP\u002F3",[15,369,370,371,373],{},"For transport HOL blocking, HTTP\u002F3 is the structural fix. Enable it at the CDN and verify the share of users on ",[265,372,257],{},".",[257,375,377],{"id":376},"_3-fix-prioritisation","3. Fix prioritisation",[15,379,380,381,384],{},"Use a CDN or server with good HTTP\u002F2 and HTTP\u002F3 prioritisation (Extensible Priorities support). Mark the LCP image with ",[265,382,383],{},"fetchpriority=\"high\"",", avoid preloading low-priority resources, and lazy-load offscreen images so they do not compete.",[257,386,388],{"id":387},"_4-reduce-early-contention","4. Reduce early contention",[15,390,391],{},"Keep early responses small: critical CSS inlined or small, the LCP image right-sized, and large non-critical resources deferred until after first render.",[15,393,394],{},[48,395,55,398,55,401,55,404,55,406,55,423,55,426,55,428,55,434,55,440,55,443,55,448,55,455,55,461,55,465,55,470,55,473,55,477,55,479,55,482,55,485,55,488,55,491,55,494,55,497,55,501,55,503,55,506,55,509,55,512,55,516,55,519,55,522,55],{"viewBox":396,"width":51,"role":52,"ariaLabel":397,"style":54},"0 0 760 325","Decision sequence for identifying the cause of critical resources finishing late.",[57,399],{"className":400,"x":61,"y":61,"width":51,"height":51,"fill":62},[60],[64,402,403],{},"Which kind of blocking is it?",[68,405,397],{},[407,408,409],"defs",{},[410,411,418],"marker",{"id":412,"viewBox":413,"refX":414,"refY":415,"markerWidth":416,"markerHeight":416,"orient":417},"fa637f3e73","0 0 10 10","9","5","7","auto-start-reverse",[419,420],"path",{"d":421,"fill":77,"style":422},"M0 0 L10 5 L0 10 z","fill-opacity:0.7",[57,424],{"x":72,"y":72,"width":73,"height":425,"rx":75,"fill":76,"stroke":77,"style":78},"323",[80,427,403],{"x":82,"y":83,"fill":77,"style":84},[57,429],{"x":82,"y":93,"width":430,"height":431,"rx":432,"fill":77,"stroke":77,"style":433},"320.0","35.0","6","fill-opacity:0.06;stroke-opacity:0.4",[80,435,439],{"x":436,"y":437,"fill":77,"style":438,"textAnchor":104},"188.0","78.0","font-size:13px;font-weight:700","Is the connection HTTP\u002F1.1?",[57,441],{"x":442,"y":93,"width":430,"height":431,"rx":432,"fill":76,"stroke":77,"style":110},"412.0",[80,444,447],{"x":445,"y":437,"fill":77,"style":446,"textAnchor":104},"572.0","font-size:12.5px","HTTP-level HOL blocking — enable HTTP\u002F2 or HTTP\u002F3",[155,449],{"x1":450,"y1":102,"x2":451,"y2":102,"stroke":77,"strokeWidth":452,"style":453,"markerEnd":454},"348.0","410.0","1.5","stroke-opacity:0.6","url(#fa637f3e73)",[80,456,460],{"x":457,"y":458,"fill":97,"style":459,"textAnchor":104},"380.0","66.5","font-size:11.5px;font-weight:700","yes",[155,462],{"x1":436,"y1":463,"x2":436,"y2":464,"stroke":77,"strokeWidth":452,"style":453,"markerEnd":454},"91.0","125.0",[80,466,469],{"x":467,"y":468,"fill":165,"style":459},"196.0","113.0","no",[57,471],{"x":82,"y":472,"width":430,"height":431,"rx":432,"fill":77,"stroke":77,"style":433},"127.0",[80,474,476],{"x":436,"y":475,"fill":77,"style":438,"textAnchor":104},"149.0","Are resources late only under packet loss?",[57,478],{"x":442,"y":472,"width":430,"height":431,"rx":432,"fill":97,"stroke":97,"style":98},[80,480,481],{"x":445,"y":475,"fill":77,"style":446,"textAnchor":104},"Transport HOL blocking — enable HTTP\u002F3",[155,483],{"x1":450,"y1":484,"x2":451,"y2":484,"stroke":77,"strokeWidth":452,"style":453,"markerEnd":454},"144.5",[80,486,460],{"x":457,"y":487,"fill":97,"style":459,"textAnchor":104},"137.5",[155,489],{"x1":436,"y1":490,"x2":436,"y2":467,"stroke":77,"strokeWidth":452,"style":453,"markerEnd":454},"162.0",[80,492,469],{"x":467,"y":493,"fill":165,"style":459},"184.0",[57,495],{"x":82,"y":496,"width":430,"height":431,"rx":432,"fill":77,"stroke":77,"style":433},"198.0",[80,498,500],{"x":436,"y":499,"fill":77,"style":438,"textAnchor":104},"220.0","Are large low-priority responses sent first?",[57,502],{"x":442,"y":496,"width":430,"height":431,"rx":432,"fill":97,"stroke":97,"style":98},[80,504,505],{"x":445,"y":499,"fill":77,"style":446,"textAnchor":104},"Prioritisation — fix server priorities and hints",[155,507],{"x1":450,"y1":508,"x2":451,"y2":508,"stroke":77,"strokeWidth":452,"style":453,"markerEnd":454},"215.5",[80,510,460],{"x":457,"y":511,"fill":97,"style":459,"textAnchor":104},"208.5",[155,513],{"x1":436,"y1":514,"x2":436,"y2":515,"stroke":77,"strokeWidth":452,"style":453,"markerEnd":454},"233.0","267.0",[80,517,469],{"x":467,"y":518,"fill":165,"style":459},"255.0",[57,520],{"x":82,"y":521,"width":430,"height":83,"rx":432,"fill":146,"stroke":147,"style":148},"269.0",[80,523,525],{"x":436,"y":524,"fill":77,"style":446,"textAnchor":104},"290.5","Check bandwidth and resource size",[192,527,529],{"id":528},"verification","Verification",[15,531,532],{},"Under emulated packet loss, critical CSS and the LCP image should finish closer to their lossless times with HTTP\u002F3 enabled. Without loss, the waterfall should show critical resources completing before large images. In the field, compare LCP p75 for users on high-loss networks (approximated by high-RTT segments or specific countries) before and after.",[192,534,536],{"id":535},"worked-example-a-video-streaming-sites-homepage","Worked Example: A Video Streaming Site's Homepage",[15,538,539,540,542],{},"A streaming service's homepage loaded 40 large poster images alongside critical CSS and the hero image over one HTTP\u002F2 connection. On mobile networks in several markets, LCP p75 was 4.2 seconds, and waterfalls showed the critical CSS (12KB) taking 900ms to download. Lossless tests showed CSS finishing in 150ms, but with 2% loss it took 700–1,000ms. The team enabled HTTP\u002F3 at the CDN, lazy-loaded posters below the first row, and added ",[265,541,383],{}," to the hero image. With HTTP\u002F3, CSS finished in 220ms under the same loss. LCP p75 in the affected markets fell to 2.6 seconds.",[192,544,546],{"id":545},"prioritisation-in-practice","Prioritisation in Practice",[15,548,549,550,552,553,556,557,560],{},"Browsers assign priorities based on resource type and position: render-blocking CSS and fonts are highest, the LCP image is raised once detected in the viewport (or immediately with ",[265,551,383],{},"), scripts depend on ",[265,554,555],{},"async","\u002F",[265,558,559],{},"defer",", and images default to low. Servers should use these signals to schedule bytes. Some servers and CDNs historically ignored HTTP\u002F2 priorities or implemented them poorly; modern CDNs generally support the Extensible Priorities scheme. If your waterfall shows a high-priority request starting early but downloading slowly while low-priority images stream in parallel, the server is likely not prioritising well.",[15,562,563],{},[48,564,55,567,55,570,55,573,55,575,55,578,55,580,55,587,55,593,55,598,55,602,55,607,55,611,55,614,55,619,55],{"viewBox":565,"width":51,"role":52,"ariaLabel":566,"style":54},"0 0 760 163","Bar chart comparing critical CSS download time under packet loss for HTTP\u002F2 and HTTP\u002F3, with and without lazy-loaded posters.",[57,568],{"className":569,"x":61,"y":61,"width":51,"height":51,"fill":62},[60],[64,571,572],{},"Critical CSS download time (12KB) under 2% packet loss",[68,574,566],{},[57,576],{"x":72,"y":72,"width":73,"height":577,"rx":75,"fill":76,"stroke":77,"style":78},"161",[80,579,572],{"x":82,"y":83,"fill":77,"style":84},[80,581,586],{"x":582,"y":583,"fill":77,"style":584,"textAnchor":585},"155.8","70.0","font-size:13px","end","H2 + 40 eager posters",[57,588],{"x":589,"y":93,"width":590,"height":591,"rx":96,"fill":76,"stroke":77,"style":592},"167.8","500.2","19","fill-opacity:0.7;stroke-opacity:0.35",[80,594,597],{"x":595,"y":583,"fill":77,"style":596},"674.0","font-size:12px;font-weight:600","900ms",[80,599,601],{"x":582,"y":600,"fill":77,"style":584,"textAnchor":585},"101.0","H2 + lazy posters",[57,603],{"x":589,"y":604,"width":605,"height":591,"rx":96,"fill":97,"stroke":97,"style":606},"87.0","289.0","fill-opacity:0.55;stroke-opacity:0.9",[80,608,610],{"x":609,"y":600,"fill":77,"style":596},"462.8","520ms",[80,612,613],{"x":582,"y":144,"fill":77,"style":584,"textAnchor":585},"H3 + lazy posters",[57,615],{"x":589,"y":616,"width":617,"height":591,"rx":96,"fill":146,"stroke":147,"style":618},"118.0","122.3","fill-opacity:0.7;stroke-opacity:0.9",[80,620,622],{"x":621,"y":144,"fill":77,"style":596},"296.0","220ms",[192,624,626],{"id":625},"common-mistakes","Common Mistakes",[197,628,629,635,641,647],{},[200,630,631,634],{},[30,632,633],{},"Blaming HTTP\u002F2 for prioritisation problems."," The server's scheduling may be the cause.",[200,636,637,640],{},[30,638,639],{},"Testing only lossless networks."," Transport HOL blocking never appears.",[200,642,643,646],{},[30,644,645],{},"Preloading many resources."," Turns them all into high-priority competitors.",[200,648,649,652],{},[30,650,651],{},"Assuming HTTP\u002F3 fixes everything."," It removes transport HOL blocking, not bad prioritisation or oversized resources.",[192,654,656],{"id":655},"edge-cases","Edge Cases",[15,658,659,662],{},[30,660,661],{},"Single huge responses."," One very large HTML document or JSON blocks nothing else on HTTP\u002F2, but its own content arrives in order; streaming helps.",[15,664,665,668],{},[30,666,667],{},"Corporate proxies."," May downgrade to HTTP\u002F1.1, reintroducing HTTP-level HOL blocking for those users.",[15,670,671,674],{},[30,672,673],{},"Server push remnants."," Old configurations pushing resources can compete with critical requests; push is removed in browsers but may still waste server effort.",[15,676,677,680],{},[30,678,679],{},"Video segments."," Media streams on the same connection compete with page resources; consider separate delivery for heavy media.",[192,682,684],{"id":683},"faq","FAQ",[686,687,690,694],"details",{"className":688},[689],"faq-item",[691,692,693],"summary",{},"Does HTTP\u002F2 have head-of-line blocking?",[15,695,696],{},"Not at the HTTP layer, thanks to multiplexing. It still suffers TCP-level head-of-line blocking when packets are lost.",[686,698,700,703],{"className":699},[689],[691,701,702],{},"Does HTTP\u002F3 eliminate head-of-line blocking?",[15,704,705],{},"It eliminates transport-level HOL blocking between streams. Data within a single stream is still delivered in order.",[686,707,709,712],{"className":708},[689],[691,710,711],{},"How common is packet loss?",[15,713,714],{},"On mobile and congested Wi-Fi, loss of around 1–2% is not unusual, and enough to trigger noticeable stalls on TCP.",[686,716,718,721],{"className":717},[689],[691,719,720],{},"How do I test with packet loss?",[15,722,723,724,726],{},"Use WebPageTest custom connectivity profiles, Linux ",[265,725,267],{},", or dedicated network emulators. DevTools throttling does not simulate loss.",[686,728,730,733],{"className":729},[689],[691,731,732],{},"What is prioritisation blocking?",[15,734,735],{},"When a server sends low-priority data before or alongside high-priority data, delaying critical resources even without packet loss.",[686,737,739,742],{"className":738},[689],[691,740,741],{},"Does fetchpriority help?",[15,743,744],{},"It raises the browser's priority signal for a resource, which a well-behaved server uses to schedule it earlier. It cannot fix transport HOL blocking.",[686,746,748,751],{"className":747},[689],[691,749,750],{},"Can too many lazy images still compete?",[15,752,753],{},"Lazy images near the viewport load early by design. Native lazy loading uses distance thresholds, so only nearby images compete with critical resources.",[686,755,757,760],{"className":756},[689],[691,758,759],{},"Should critical resources use a separate connection?",[15,761,762],{},"No. Separate connections lose prioritisation and add setup costs. Fix prioritisation and enable HTTP\u002F3 instead.",[686,764,766,769],{"className":765},[689],[691,767,768],{},"Is head-of-line blocking visible in Core Web Vitals?",[15,770,771],{},"Indirectly. It delays critical CSS and the LCP image, so it shows up as worse FCP and LCP for users on lossy networks, usually in the upper percentiles and in specific regions.",[686,773,775,778],{"className":774},[689],[691,776,777],{},"Can a service worker help?",[15,779,780],{},"A service worker serving critical resources from cache avoids the network entirely on repeat visits, which sidesteps head-of-line blocking for those resources.",[686,782,784,787],{"className":783},[689],[691,785,786],{},"Does HTTP\u002F1.1 suffer more?",[15,788,789],{},"At the HTTP layer, yes: each connection handles one response at a time, so slow responses block the queue.",[192,791,793],{"id":792},"related","Related",[197,795,796,803,810],{},[200,797,798,802],{},[19,799,801],{"href":800},"\u002Fnetwork-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002Fmeasuring-real-world-http3-gains\u002F","Measuring real-world HTTP\u002F3 gains"," — verify the HTTP\u002F3 effect.",[200,804,805,809],{},[19,806,808],{"href":807},"\u002Fadvanced-caching-strategies-cdn-architecture\u002Fresource-hints-and-early-hints\u002Ffetchpriority-for-scripts-and-fetch-requests\u002F","Fetchpriority for scripts and fetch requests"," — priority signals.",[200,811,812,816],{},[19,813,815],{"href":814},"\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Flazy-loading-images-in-carousels\u002F","Lazy-loading images in carousels"," — reducing early contention.",[818,819,821],"script",{"type":820},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Diagnose Head-of-Line Blocking\",\n  \"description\": \"How head-of-line blocking happens at the application and transport layers, how to recognise it in waterfalls and field data, and how to reduce it.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Distinguish loss from prioritisation\",\n      \"text\": \"Reproduce with network emulation that includes packet loss (for example, WebPageTest custom profiles or tc netem), and compare with a lossless run.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Enable HTTP\u002F3\",\n      \"text\": \"For transport HOL blocking, HTTP\u002F3 is the structural fix.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Fix prioritisation\",\n      \"text\": \"Use a CDN or server with good HTTP\u002F2 and HTTP\u002F3 prioritisation (Extensible Priorities support).\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Reduce early contention\",\n      \"text\": \"Keep early responses small: critical CSS inlined or small, the LCP image right-sized, and large non-critical resources deferred until after first render.\"\n    }\n  ]\n}\n",[818,823,824],{"type":820},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Diagnose Head-of-Line Blocking\",\n  \"description\": \"How head-of-line blocking happens at the application and transport layers, how to recognise it in waterfalls and field data, and how to reduce it.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fnetwork-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002Fdiagnosing-head-of-line-blocking\u002F\"\n  }\n}\n",[818,826,827],{"type":820},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Network & Server Response Optimization\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fnetwork-protocol-optimization\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"HTTP\u002F2, HTTP\u002F3 & Connection Management\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fnetwork-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"Diagnosing Head-of-Line Blocking\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fnetwork-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002Fdiagnosing-head-of-line-blocking\u002F\"\n    }\n  ]\n}\n",[829,830,831],"style",{},"html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--shiki-dark:#FFB757;--shiki-light:#702C00}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}",{"title":275,"searchDepth":288,"depth":288,"links":833},[834,835,836,842,843,844,845,846,847,848],{"id":194,"depth":288,"text":195},{"id":226,"depth":288,"text":227},{"id":254,"depth":288,"text":255,"children":837},[838,839,840,841],{"id":259,"depth":329,"text":260},{"id":366,"depth":329,"text":367},{"id":376,"depth":329,"text":377},{"id":387,"depth":329,"text":388},{"id":528,"depth":288,"text":529},{"id":535,"depth":288,"text":536},{"id":545,"depth":288,"text":546},{"id":625,"depth":288,"text":626},{"id":655,"depth":288,"text":656},{"id":683,"depth":288,"text":684},{"id":792,"depth":288,"text":793},"How head-of-line blocking happens at the application and transport layers, how to recognise it in waterfalls and field data, and how to reduce it.","md",{"slug":852,"type":853,"breadcrumb":854,"datePublished":861,"dateModified":861},"diagnosing-head-of-line-blocking","article",[855,857,858,859],{"name":856,"url":556},"Home",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":860},"\u002Fnetwork-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002Fdiagnosing-head-of-line-blocking\u002F","2026-10-06",true,"\u002Fnetwork-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002Fdiagnosing-head-of-line-blocking",{"title":865,"description":866},"Diagnosing Head-of-Line Blocking in HTTP\u002F2 and HTTP\u002F3","Find head-of-line blocking at the HTTP and TCP layers: lossy networks, poor server prioritisation and large responses that delay critical CSS and the LCP image.","network-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002Fdiagnosing-head-of-line-blocking\u002Findex","I13fuphHlVKpbbQxi0gianVqLmXXm9dcj6sSBZRWo2Q",[870,874],{"title":871,"path":872,"stem":873},"Connection Coalescing and Certificates","\u002Fnetwork-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002Fconnection-coalescing-and-certificates","network-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002Fconnection-coalescing-and-certificates\u002Findex",{"title":875,"path":876,"stem":877},"Measuring Real-World HTTP\u002F3 Gains","\u002Fnetwork-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002Fmeasuring-real-world-http3-gains","network-protocol-optimization\u002Fhttp2-http3-and-connection-management\u002Fmeasuring-real-world-http3-gains\u002Findex",1791308078396]