Przestań renderować osiem sekcji poza ekranem, zanim bohater może pomalować

Performancekamo-marketing
Shipped
19 sierpnia 2026 19:59 UTC
Author
Kamo
Commit
525e81c

LCP wynosił 4,4 s, a jego rozpad mówił, gdzie: 120 ms do pierwszego bicia, 290 ms Opóźnienie obciążenia, 390 ms faktycznie pobiera obraz — a następnie 1,810 ms "Elementu opóźnia się". Obraz zakończył się przybyciem i po prostu nie mógł - być namalowany. Strona główna dostarcza 1,482 elementy DOM, nad próg Lighthouse Nie udaje się "optymalizować rozmiar DOM", a każdy z nich był rozplanowywany i Namalowany podczas początkowego renderowania, podczas gdy element LCP czekał na jego oprawę. Osiem sekcji, do których nikt nie przejrzał. "dotkliwość treści: auto" na każdej sekcji z wyjątkiem "home" pozwala przeglądarce pominąć Układ i malowanie dla tych poddrzewek, dopóki nie zbliżą się do widoku. Nat wt. w tym, w tym, w tym, w tym, w tym, w tym, w tym, w tym, w tym, w tym, w tym, w tym, w tym, Elementy nadal istnieją — w HTML, dla wyszukiwarek, do kotwic na stronie, aby Znajdź w ciągu strony, a do biegu IntersectionObserver JumpToBar - po prostu nie są Rasteryzowany, zanim ktokolwiek będzie mógł je zobaczyć. Dwie rzeczy sprawiają, że jest tu bezpieczny, a nie Ogólnie: każda sekcja jest już „pozycją: względna” i „przepełnienie: ukryte”, Tak więc domniemane powstrzymywanie niczego nie zmienia się w tym, jak ich absolutnie pozycjonował Tły rozwiązują, a "contain-intrinsic-size" używa słowa kluczowego "auto", więc Wysokość zastępców obowiązuje tylko przed pierwszym renderem sekcji i przeglądarką Pamięta ten prawdziwy po tym. Wymuszony przelewem raport przypisywany konkretnemu plikowi był PreviewBanner. To się stało. Przeczytaj "offsetHeight" zaraz po nawodnieniu i napisano "dokument.body.style" .paddingTop, który unieważnia układ całego dokumentu. Pisał był Również zbędny — ?body ? wyściółka: var(--banner-h) ? już rezerwuje Przestrzeń od pierwszej farby. ResizeObserver informuje o wysokości z „borderBoxSize”, Które przeglądarka już obliczyła, gdy działa callback, więc nic nie jest Wymuszony. borderBoxSize zamiast contentRect celowo: baner -kładka: 6px 16px na małych ekranach i rezerwacja samej wysokości zawartości Kopia pozostawiłaby 12px pod sztandarem. theme.kamorm.com otrzymuje swój preconnect back, o który raport prosi po imieniu 300 ms LCP. Zdegradowanie go do dns-prefetch było błędne: obrazy przechodzą Teraz optymalizator tego pochodzenia, ale DynamicMetaLoader nadal pozyskuje motyw orgi Arkusz stylu od tego hosta w czasie działania, a to jest żądanie dotyczące render-dodatnie Ścieżka krytyczna. Analityka pozostaje dns-prefetch — tracker jest leniwyNaładowanie, więc Nic przed przywróceniem ładunku tego nie dotknie. Tło bohatera spada do jakości 40: 21,9 KB do 12,8 KB, czyli to jest to Audyt obrazu prosił o to. Mierzone przez jasność (0.21) jest Kompozytowany przy 50 -> 40 porusza się 1.09% pikseli o więcej niż 8/255 i uchwyty 40.7 dB. Jakość 30 została wypróbowana i odrzucona na 3,20%. Tłupy sekcji pozostają na poziomie 75, a to jest drugi czas pomiaru Tak powiedział. Przy zmniejszonej szerokości, o którą teraz proszą, zniesienie do 50 jest „gorsze” niż Był na pełnych obrotach — 11,30% przesunięcia pikseli w porównaniu z 6,60% - ponieważ przy niższym Rozdzielczość każdego bloku kompresji obejmuje więcej tego, co widzisz. Rozstrzygnięcie i Redukcja jakości nie układa się na zdjęciu; jedno lub drugie. Listy odtwarzania HLS są niezmienne już od roku, na żywo i w pracy manifestują się, Który zamyka ostatni element cache-lifetime. To przesuwa raczej koszt niż Usuwanie go, więc HERO_HLSRC ma ’?v’, który musi zostać uderzony na Re-encode; oba pliki tak mówią, ponieważ w przeciwnym razie ponowne kod będzie wyglądać jak kod Praca po cichu nic nie zrobiła.

All changes

Jak to, co widzisz żeglugę?

Każda z tych aktualizacji automatycznie ląduje w miejscu pracy. Zacznij za darmo i obserwuj, jak rośnie tydzień po tygodniu.

Start Free ForeverZobacz ceny