Kort fortalt: Når du optimerer LCP eller TTFB , er waterfall dit første objektive billede af rækkefølge og afhængigheder. Det knytter sig til critical request chain og resource hints .
Sådan læser du diagrammet
Hver vandret bjælke er en request: starttid, varighed og om den venter på kø eller server. Læg mærke til stabling: hvis alt venter på ét dokument eller ét script, er det jeres flaskehals.
Kobling til Core Web Vitals
LCP-billedet skal starte tidligt - hvis det står efter en lang kø af lavere prioritet, skal du flytte markup, bruge preload eller fetchpriority .
Fra waterfall til handling
Eksporter HAR til deling med teamet, sammenhold med Lighthouse , og valider i CrUX at jeres feltpopulation faktisk matcher den profil I testede.
Læs kaskaden som en historie
Hver vandfaldslinje er en anmodning: DNS, TCP/TLS, ventetid (TTFB), download og parse. Den første HTML-fil er ofte porten til alt andet - hvis den er langsom eller blokerer, forsinkes scripts, CSS og billeder kaskadeformet.
Sorter efter starttid og «længste kæde»: ofte er det tredjepart, store billeder eller synkrone scripts der fylder skærmen med røde blokke.
Prioritering ud fra kritikalitet
Ikke alle langsomme requests er lige vigtige. Et baggrundsbillede der loader sent kan være acceptabelt; LCP-billedet eller hero-fonten er det ikke. Marker LCP-elementet i DevTools og find den tilsvarende linje i vandfaldet.
Sammenlign throttling-profiler (4G, langsom CPU) - desktop fiber skjuler problemer der rammer mobilbrugere.
Dokumentation til teamet
Gem screenshots eller HAR-filer med annoteringer når I åbner en sag: «før/efter» gør det lettere at få prioriteret fixes i sprint. Vandfald uden kontekst bliver ofte ignoreret som «teknisk snak».
Knyt vandfaldsfund til forretningscases: «hver 300 ms på denne skabelon koster X i konvertering» når I har data - ellers brug felt-CWV som proxy.
Videre på sitet
- Sådan læser du et waterfall – blog med mønstre og fejl.
- Resource Timing API – samme kæde i feltdata.
- Sådan fejlsøger du LCP fra start til slut – når diagrammet skal omsættes til handling.
FAQ
Er waterfall nok til INP?
Delvist - INP kræver ofte Main-thread og Long Tasks profiler. Kombinér Network og Performance panel.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Brug Transfer-Encoding (chunked) til progressiv rendering: hurtigere første visning
Lær at finde ud af om din server eller reverse proxy buffer HTML-svar, og få streaming (chunked) til at flytte første visning og LCP i den rigtige retning.
Gør hero til LCP: sådan ændrer du struktur, CSS og prioritering
Hvis LCP bliver en tilfældig paragraf i stedet for hero, får du både dårligere tal og en måling der ikke matcher brugerens første indtryk. Her er en konkret metode til at få hero (H1/billede) til at blive LCP – uden at snyde.
Få edge cache-hit på HTML: undgå cookies, forkert Vary og dårlige cache keys
Mange sites har CDN, men får stadig høj TTFB fordi HTML ikke caches. Lær et praktisk workflow til at få cache-hit på offentlige sider uden at servere forkert indhold.
5 grunde til at din hjemmeside er langsom og hvad du gør ved det
Se de mest almindelige årsager til en langsom hjemmeside, hvordan du spotter dem, og hvilke ændringer der typisk giver mest effekt først.
Hvordan du spotter render delay (uden at stirre på score)
Render delay er ofte grunden til at LCP bliver 1–2 sekunder for sent, selv når TTFB ser fin ud. Her er metoden til at finde årsagen hurtigt – og vælge den rigtige type fix.
Reverse proxy og TTFB: sådan finder du cache-, TLS- og routing-fejl i praksis
Reverse proxy-laget kan være årsagen til høj TTFB, mystiske cache misses og 502/504-fejl. Lær hvad du skal kigge efter i headers og waterfall, og få et praktisk debug-flow.
