We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

The ultimate guide to HTTP resource prioritization

00:00

Formal Metadata

Title
The ultimate guide to HTTP resource prioritization
Subtitle
How to make sure your data arrives at the browser in the optimal order
Title of Series
Number of Parts
490
Author
License
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
Come learn about how browsers try to guess in what order web page resources should be loaded and how servers use that information to often (accidentally) make your web page slower instead. We look at what resource prioritization is, how it's often implemented terribly in modern HTTP/2 stacks and how we're trying to fix it in QUIC and HTTP/3. We use clear visualizations and images to help explain the nuances in this complex topic and also muse a bit on whether prioritization actually has that large an impact on web performance. HTTP/2 started the move from multiple parallel TCP connections to a single underlying pipe. QUIC and HTTP/3 continue that trend. While this reduces the connection overhead and lets congestion controllers do their work, it also means we no longer send data in a truly parallel fashion. As such, we need to be careful about how exactly we send our resource data, as some files are more important than others to achieve good web performance. To help regulate this, HTTP/2 introduced a complex prioritization mechanism. Browsers use complex heuristics to try and estimate the importance of a resource and, with various success, communicate their preferences to the servers. It has however become clear that this scheme does not work well in practice. Between server implementation bugs, questionable browser choices and bufferbloat in caches and network setups, HTTP/2 prioritization is sometimes more a liability than a useful feature. For this reason, this feature is being completely reworked in HTTP/3 over QUIC. However, there a whole new can of worms is opened. One of QUIC's main features for improving performance over TCP is that it removes "head of line blocking": if one resource suffers packet loss, other can still make progress. That is... if there are other resources in progress! What performs well for lossy links turns out to be exactly what to prevent for high speed connections. Along the way, we also discuss existing options for web developers to impact the browser's heuristics and server behaviour (such as resource hints (e.g., preload) and the upcoming priority hints). Finally, we question about how we got in this terrible state of things to begin with: if people made so many mistakes implementing HTTP/2 prioritization, why didn't anyone really notice until 3 years later? Could it be its impact on web performance is actually limited? Or have we just not seen its full potential yet? We make this complex topic approachable with plenty of visualizations and animations. The content is mainly based on our own research (and papers) and that of others in the web community, such as Patrick Meenan and Andy Davies.
Web browserMathematical optimizationElectronic program guideFamilyLecture/Conference
Multiplication signSystem callFamilyComputer animation
Chaos (cosmogony)Computer-generated imageryTDMAWechselseitige InformationScripting languageParallel portConnected spaceHome pageMultiplication signProcess (computing)AnalogyCommunications protocolWeb pageParallel portOpen setMultiplicationComputer configurationQuicksortNumbering schemeForm (programming)Computer animation
SequenceComputer configurationTerm (mathematics)Web 2.0Band matrixOrder (biology)Roundness (object)Web pageInternetworkingEntropie <Informationstheorie>Home pageComputer animation
VolumenvisualisierungLink (knot theory)Scripting languageBlock (periodic table)Web 2.0Block (periodic table)Home pageVolumenvisualisierungTape driveArithmetic progressionMedical imagingFree variables and bound variablesBitArithmetic meanDifferent (Kate Ryan album)Program flowchartXMLComputer animation
Link (knot theory)VolumenvisualisierungScripting languageBitDifferent (Kate Ryan album)Arithmetic meanFree variables and bound variablesTape driveParameter (computer programming)TouchscreenRight angleVolumenvisualisierungWeb browserComputer fileBlogHome pageStructural loadSoftware developerContent (media)Medical imagingWeb pageGreatest elementBlock (periodic table)Mobile appClient (computing)Scripting languageRepetitionComputer animationProgram flowchart
Block (periodic table)Link (knot theory)Scripting languageJava appletWeb browserPosition operatorSoftware developerSynchronizationWeb browserType theoryPosition operatorComputer fileComputer animation
Web browserHeuristicHeuristicWeb browserBitDifferent (Kate Ryan album)Computer fontWeb 2.0Home pageGraphical user interface2 (number)Web pageComputer animation
Graphical user interfaceComplete metric spaceWeb browserWeb pageMedical imagingClosed set2 (number)Graphical user interfaceComputer fontStructural loadDifferent (Kate Ryan album)Nichtlineares GleichungssystemMultiplication signLie groupComputer animation
Cross-site scriptingSynchronizationSequenceWeb browserHeuristicBand matrixGraphical user interfaceDefault (computer science)BitMedical imagingBlock (periodic table)Numbering schemeOrder (biology)Web browserHeuristicVolumenvisualisierungDifferent (Kate Ryan album)Right angleMultilaterationRoundness (object)Software developerComputer animation
ParsingWeb browserMoment (mathematics)Compilation albumScripting languageCASE <Informatik>Computer fileDifferent (Kate Ryan album)TouchscreenRoundness (object)
Numbering schemeDifferent (Kate Ryan album)Web browserWeightObservational studyWeb 2.0Home pageMechanism designScaling (geometry)Line (geometry)Web pageProgram flowchart
Computer networkHeuristicAverageDivisorCellular automatonSoftwareLatent heatGraphical user interfaceDifferent (Kate Ryan album)BitCondition numberLine (geometry)CASE <Informatik>Roundness (object)Set (mathematics)Computer animation
Computer-generated imageryPoint cloudSequenceCross-site scriptingScripting languageHeuristicWeight functionScalable Coherent InterfaceNormal (geometry)Default (computer science)Server (computing)Graphical user interfaceNumbering schemeSet (mathematics)BlogTwitterRoundness (object)Observational studyScheduling (computing)Computer animation
Maxima and minimaScheduling (computing)Home pageHeuristicDifferent (Kate Ryan album)Web browserWeb pageRoundness (object)WebsiteObservational studyResultantInsertion lossNumbering schemeVideo gameRight angleUltraviolet photoelectron spectroscopyQuantum statePoint (geometry)Set (mathematics)Computer animation
CASE <Informatik>Web browserRight angleWeb pageHome pageConnected spaceFactory (trading post)OutlierSoftware testingNumbering schemeBitSinc functionWeb 2.0Latent heatProof theoryView (database)Heuristic
Software testingHome pageExecution unitInterior (topology)Link (knot theory)Computer configurationClient (computing)Web browserBitSoftware testingWeb pageConnected spaceVisualization (computer graphics)System callWeb browserLine (geometry)Scripting languageDirected graphClient (computing)Functional (mathematics)XMLProgram flowchartComputer animation
Scripting languageLink (knot theory)Computer configurationClient (computing)Web browserInversion (music)FlagWeb browserBlogFlow separationMoment (mathematics)Graphical user interfaceDefault (computer science)HeuristicSelectivity (electronic)Core dumpSoftware bugBasis <Mathematik>Web 2.0Ferry CorstenRevision controlWeb pageComputer animation
Link (knot theory)Computer configurationClient (computing)Web browserServer (computing)WebsiteServer (computing)Web browserOnline helpFunction (mathematics)Order (biology)CAN busStreaming mediaComputer animation
Server (computing)Level (video gaming)Scripting languageJava appletSynchronizationComputer-generated imageryTexture mappingServer (computing)Web browserGoogolCommunications protocolRight angleRoundness (object)Order (biology)Level (video gaming)IntegerConnected spaceJSONComputer animation
Texture mappingLevel (video gaming)Connected spaceFront and back endsClient (computing)Content delivery networkMultiplication signCASE <Informatik>Server (computing)BitNumbering schemeMechanism designNetwork topologyLatent heatSpeech synthesisLevel (video gaming)Computer animationLecture/Conference
Network topologyCross-site scriptingWeightServer (computing)Band matrixNetwork topologyWeightMultiplication signInheritance (object-oriented programming)Web browserComputer animation
Client (computing)RootWeightEqualiser (mathematics)Band matrixProxy serverRoutingRight angleIntelligent NetworkNetwork topologyWeb browserDiagramProgram flowchartComputer animation
Network topologyNetwork topologyContent delivery networkNumbering schemeWeb browserGraphical user interfaceElectronic mailing listServer (computing)Type theoryWeightExtension (kinesiology)RootDifferent (Kate Ryan album)SubsetWebsiteRouting1 (number)Mechanism designSequenceSoftware testingProgram flowchartComputer animation
Server (computing)Free variables and bound variablesWeightInheritance (object-oriented programming)MIDIWeb browserOrder (biology)Mechanism design1 (number)SubsetProper mapCASE <Informatik>Mathematical singularityRight angleMedical imagingNetwork topologyComputer animation
Free variables and bound variablesWeightInheritance (object-oriented programming)Server (computing)Message passingWeb browserNumbering schemeNormal (geometry)Computer-generated imageryWechselseitige InformationNetwork topologyWeb browserType theoryInformationLevel (video gaming)Complex (psychology)Normal (geometry)Software developerCommunications protocolRevision controlQuantum stateComputer animation
Multiplication signCommunications protocolRevision controlNetwork topologySpeech synthesisLecture/ConferenceComputer animation
Electric currentTrailNumbering schemeEmailMenu (computing)Level (video gaming)Semantics (computer science)Level (video gaming)Normal (geometry)Server (computing)1 (number)EmailRoundness (object)Function (mathematics)Evolute2 (number)BitFlagMereologyWeb browserRight angleSoftware bugBinary codeSequenceSpeech synthesisNumbering schemeProcess (computing)Frame problemScripting languageComputer animation
Communications protocolRevision controlArithmetic meanCache (computing)Client (computing)Buffer solutionInversion (music)Disk read-and-write headForcing (mathematics)Computer animation
Line (geometry)Connected spaceStreaming mediaComputer fileSingle-precision floating-point formatBlock (periodic table)Insertion lossSpeciesCore dumpComputer animationLecture/Conference
Line (geometry)Computer fileConnected spaceWeb browserRight angleComputer animation
Line (geometry)RoundingControl flowScheduling (computing)MultiplicationMultiplicationHome pageMultiplication signBitGoodness of fitDifferent (Kate Ryan album)Roundness (object)Computer fileWeb pageNormal (geometry)Computer animation
Graphical user interfaceInformationOpen sourceDifferent (Kate Ryan album)Web pageSoftware developerRight angleVideo gameServer (computing)Multiplication signExpert systemGoogolPoint cloudPoint (geometry)Computer animation
WebsiteExpert systemWeb 2.0Web pageLecture/Conference
Computer networkComplex (psychology)Home pageThread (computing)Web browserComputing platformSoftware testingSoftwarePosition operatorProcess (computing)Scripting languageComputer animation
Complex (psychology)Home pageComputer networkThread (computing)Computing platformWeb browserProcess (computing)Control flowSoftwareThread (computing)BitCore dumpPhysical systemMoment (mathematics)Software testingWeb browserGraphical user interfaceMereologyLecture/ConferenceComputer animation
Complex (psychology)Home pageComputer networkThread (computing)Web browserComputing platformWeb browserGraphical user interfaceMoment (mathematics)Software testingScaling (geometry)Position operatorArithmetic progressionRight angleComputer animation
Numbering schemeArithmetic progressionSpeech synthesisCASE <Informatik>Office suiteSoftware bugComputer animation
Speech synthesisMathematics
Firewall (computing)Software developerDifferent (Kate Ryan album)Speech synthesisWeb browserOpen setMathematicsPosition operatorComputer animation
EmailExecution unitHeuristicWeb browserGoodness of fitMathematical optimizationLine (geometry)Disk read-and-write headSign (mathematics)Video gameLecture/ConferenceComputer animation
Point cloudOpen source
Transcript: English(auto-generated)