Odwejdnij dwie zmiany, które kosztowały 380 m czasu blokowania i uciszy telefon

Performancekamo-marketing
Shipped
19 sierpnia 2026 19:17 UTC
Author
Kamo
Commit
2d7c0c0

Dwie ostatnie rundy przyniosły wynik z 87 do 67. Całkowity czas blokowania odszedł 80 ms do 460 ms i LCP od 3,9 s do 4,4 s. Dwie moje własne zmiany zrobiły to, i Oba zostały wykonane z tego samego złego powodu. Powód jest warty najpierw stwierdzenia, ponieważ jest to rzeczywista lekcja: przedmioty W ramach „Insights” w tym raporcie są oznaczone „Unscored”. Nie karmią tego Wynik wydajności. FCP, LCP, TBT, CLS i Speed Index. Spędziłem dwie rundy Optymalizowanie nieocenionych spostrzeżeń i zapłacenia za nie w ocennych wskaźnikach. "experimental.inlineCss" — odwrócony. Robi to, co obiecuje: arkusz stylów Przestanie być żądaniem blokowania renderów. Ale 93 KB CSS musi wtedy przybyć i Należy porównać „wewnątrz” dokument, a nie równolegle obok niego, oraz Dokument przeszedł z 36 KB gzip do 74.7 KB. Latarnia morska zmierzyła sam dokument Przy 750 m CPU i Style & Layout wzrosły z 573 ms do 826 ms. Jeden niezmienny, Umiejętne, równoległe żądanie jest lepsze niż to, a "prośby o blokowanie oddrobnień" Nigdy nie strzelono gola. Nagłówek jest kompasywna zamiatania - cofnęła się. Ten jest bardziej żenujący, Ponieważ zawiodło na własnych warunkach: nieskomplikowana liczba elementów poszła na UP, Od 34 do 41. Nie można również kompozytować dwóch zamaskowanych warstwami zamaskowanymi tekstowo, więc Zamiennikiem były dwa elementy animowane farbą, gdzie był jeden, plus a Trwały bieg podwójny raster z h1. Oryginalna wersja jednoelementowa Z powrotem. To, co zastępuje, to zmiana, która powinna zostać dokonana jako pierwsza. Dwadzieścia pięć reguły na tej stronie deklarują nieskończoną animację — pola sześciokątne dryfujące, Oszałami pulsowanie, gradienty przesuwają się, cząstki unoszące się, baner migotają. Na a) Komputer, którego nikt nie zauważy. Na telefonie o niskiej mocy naśladuje bieg, są one Podatek stały: większość stylu i układ, większość Renderingu, a każdy z nich Liczony w ramach nieskompozyowanego audytu animacji. Żadna z nich nie jest zadowolona; Strona czyta się w identyczny sposób z tym wszystkim. Teraz zatrzymują się poniżej 768 px — Ten sam breakpoint Hero już używa do decydowania o „desktopMotion”, więc cząstka Pole, obrót tła i to przełączanie się razem, a nie na trzy Różne szerokości – i w ramach „prefers-rereded-motion”. Wszystkie 25 są objęte. Każdy jest przypięty do wartości, na której opiera się jego klucz, a nie tylko Wyłączone: element, którego 0%/100% zestawy ramek: spadkobierca: 0,05 nie ma nieprzezroczystości Własne, aby się do niego wycofać, a powstrzymanie go bez oczerniałoby, albo straciłoby na sobie Tekstura lub pozostawić nakładkę pełnej dyspozycji na podstawie treści. Ozdobne zrzuty sekcji żądają teraz szerokości półdoglądu na telefony. W At At and () Jakość 60 zmniejszają rozmiar o połowę, ale 4,08% ich pikseli przesuwa się z zauważalnie raz Kompozytowane i opasanie się po gładkim niebie jest tym, co pokazuje pełne krwawienie Najgorszy – ten sam zarzut, który odrzucił jakość 50 na poziomie 6,60%. Upuszczenie Wybrana szerokość zamiast tego pobiera jeden z 193 KB do 77 KB bez kompresji Artefakty w ogóle, na zdjęciu już zaciemniły się do 60% pod promieniową czernią Nakładka, za nieprzezroczystą zawartością. Jakość pozostaje na 75. Również ustalone i oddzielnie od tego zobowiązania: listy odtwarzania HLS były nadal Odpowiadając na „maksymalny” 300 funtów, ponieważ zakodowanie pracy przepisuje je tylko na Re-plcode. Ich metadane są teraz ustawiane bezpośrednio, więc element cache 1 KiB w okresie życia Jest zamknięty bez czekania na jeden. Jeden prawdziwy błąd złapany po drodze: operacja CSS powyżej pozostawiła bezpański klamrę zamykającą Na linii 1480. Turbopack serwował myszkę CSS, więc trzy kompilacje przeszły Zanim czysty zawiódł na nim. To by się nie powiodło CI.

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