Weź stopę i przewiń chrom z klienta

Performancekamo-marketing
Szycy
20 sierpnia 2026 03:14 UTC
Autor
Kamo
Pochęt się
721669f

Trzy zmiany, wszystkie usuwają pracę z okna, w którym strona jest oceniana. "(strony) /layout.tsx" niesione "użyj klienta" i nigdy go nie potrzebował - bez stanu, nie Efekt, brak uchwytu, trzy elementy skomponowane razem. Dyrektywa została Załadunek nośny w złym kierunku: sprawił, że układ stał się granicą klienta, więc Całe poddrzewo dotórowane na każdej nawigacji i zrobiło stopkę po stronie serwera Niemożliwe, ponieważ komponent klienta nie może importować serwera. To odblokowało stopkę, która była „użyjem klienta” dla dokładnie dwóch przycisków – "Ustawienia torebki" i "z powrotem do góry". Dyrektywa nie jest selektywna, więc 29 euro Linki, cztery nagłówki kolumnowe, wiersz społeczny i pięć akapitów grzywny prawnej Wszystkie wydruki są dostarczane jako JavaScript i nawodnione. stopce znajduje się w układzie współdzielonym, Taki był koszt każdej strony, a nie jednej strony. Przyciski są teraz małą wyspą Analiza wektorowa stała się atrybutami „data-track”, które delegowane zostały Słuchacz już w TrackedClicks czyta — więc link renderowany przez serwer nadal raportuje Kliknięcie bez przenoszenia uchwytu. TrackedClicks przenosi się do układu głównego, Ponieważ stopa zależy teraz od tego wszędzie, a nie tylko na stronie głównej. Uczciwa księgowość na tym jednym: jest bliska neutralnych bajtów. Klient komponent kosztuje odniesienie do modułu w ładowności lotu; komponent serwera Kosztuje całe swoje wyrenderowane drzewo, więc ładowność rośnie 216 KB -> 239 KB raw (+3,5 KB gzipped), podczas gdy chętny JS spada tylko nieznacznie. To, co faktycznie kupuje, jest Nawodnienie przechodzi nad elementami stopki o wartości 150 funtów, na każdej stronie i współdzielonym Układ, który nie zmienia już nawigację. ScrollProgress i JumpToBar są teraz montowane bezczynnie. Nie widać też na Przyjazd — pasek postępu znajduje się na zerowej szerokości, a JumpToBar ukrywa się, aż "scrollY > 300" - więc obaj byli nawadniający i przymocowywali słuchacze do renderowania W tej chwili nic, co się liczy. Są to również dwa elementy tutaj, gdzie Odroczenie jest bardzo wolne od kosztów układu: oba są "spozycja: stały", więc Nie można niczego zmienić, gdy dotrą. Warto raczej sprawdzić niż założyć, z CLS na jedną czwartą wyników mobilnych. "experimental.inlineCss" został ponownie przetestowany i pozostaje z dala, teraz zmierzonego powodu Zamiast pamiętać. Teoria była taka, że jej wcześniejszy zły wynik przyszedł Od framer-motion i gsap nasycającego główną wątkę; oba zniknęły, więc tak było Warto spróbować. To nie są biblioteki. Flaga pobiera dokument z 53 KB Do 93.4 KB gzip, podczas gdy arkusz stylów jest 17.8 KB gzip sam w sobie, ponieważ Next Wzrównuje go jako blok w stylu i ucieka z drugiej kopii do lotu RSC Naładowanie: 96.7 KB, skrypt inline 216 KB -> 334 KB. Ten +118 KB to skrypt Gwint główny musi przeanalizować przed czymkolwiek innym – dokładny kształt TBT Skok, który kosztował 20 punktów za pierwszy raz. Render-blocking CSS jest Unscored; TBT jest 30% wyników mobilnych.

Wszystkie zmiany

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