Zatrzymaj fałd w oczekiwaniu na nawodnienie i wyczyścić okno ładowania

Performancekamo-marketing
Szycy
19 sierpnia 2026 17:29 UTC
Autor
Kamo
Pochęt się
917ad87

Strona główna wysłała cały swój fałd niewidoczny. Framer Motion serializuje "początkowy" rekwizyt do prerenderowanego HTML jako stylu inline, więc znacznik Przybył z kolumną kopiowaną, przystrzeń bębnami i pełnym krwawieniem W tle wszystko w „opacity”: 0 – i pozostało w ten sposób, dopóki React nie będzie miał Pobrana, przeanalizowana i nawodniona i uruchomiona pierwsza ramka animowana. Po pierwsze i Dlatego największa farba Contentful Paint mierzyła ćwierć-megabajtowy JavaScript Pakiet zamiast strony: serwer już renderował nagłówek, i Scenariusz go powstrzymuje. Nic tego nie widzi – nie budowa, typ Sprawdź, uruchom lint lub osłonę nawigacyjną — i na linku pulpitu to jest Niewidzialny. "kurl" strona i liczenie "opaliczność:0": 102 z nich, każdy element Na podstawie owczarni wśród nich. To samo wejścia, w tym samym czasie i luzowaniu, są teraz klatkami klawiszy CSS. Arkusz stylów jest parowany przed pobraniem pojedynczego skryptu. LCP Tło wykorzystuje przejście, a nie ramkę klucza, ponieważ robi to przejście Nie biegnij na początkowym renderowaniu - więc rama, która jest w górę w dniu przyjazdu, jest po prostu W górę, bez niczego, na co LCP może czekać. Reszta okna ładunkowego, w kolejności malejącej, ile to kosztuje: Kołowrotek zaczął płacić od pierwszego bajtu — "preload", metadata" a", a Plakat na elemencie i otwór drabiny adaptacyjnej na 540p 1.17 Mbps — dla przysłony, która na wąskim widoku znajduje się poniżej fałdu, Pod kolumną kopiowania. Teraz czeka na zdarzenie obciążenia, a następnie na główne Wątknięcie, aby iść bezczynnie, a następnie, aby przysłona weszła do portu widokowego. Poziom Jest ograniczony do rozmiaru gracza i zaczyna się od dolnego szczebla na telefonie. Czytniki Save-Data i 2G/3G utrzymują ramkę plakatu i przycisk restartu. Sam plakat był 93 KB JPEG na jednodniowym nagłówku pamięci podręcznej. Przez Zoptymalizator obrazu jest to 26 KB AVIF na niezmiennym adresie URL i nie jest Posłane, dopóki kołowrotek nie będzie pożądany. Logo marki to 132 KB ośmiodecimowej mocy potrace, wstępnie załadowane jako Obraz, aby narysować znak 140 px szerokości. Zaokrąglony do jednego dziesiętnego 3503-jednostkowego Przestrzeń z powtarzanym wypełnieniem, jest 59 KB – geometrycznie identyczna Do 0.0023 CSS px w największym rozmiarze, na jakim kiedykolwiek jest renderowany. skrypty / optymalizacja-logo-svg.mjs jest idempotent, po raz kolejny logo zostanie wyeksportowane. GSAP znajdował się na liście zapałej listy skryptów każdej strony w witrynie, cztery razy over: na dwunaste na poświaty paska postępu, ?gsap.set() - pisząc dwie statyczne Właściwości stylu, "fromTo" powielający falę, którą był arkusz stylów Już animacja impowana i globalna linia czasu, która strzela tylko dla czytelników Którzy prosili o zmniejszony ruch. Cała czwórka zniknęła z krytycznego Ścieżka; ostatnia ładuje bibliotekę w jej gałęzi. TouchOptymalizacja mierzył każdy przycisk, link i wejście na stronie podczas Nawodnienie, przeplatanie każdego odczytu z napisami poprzedniego elementu — a Pępka przymusowo-synchroniczna, o długości kilkuset elementów, lądowanie Totalny czas blokowania w telefonie istnieje, aby pomóc. Teraz to jest parti. Czyta i czeka na bezczynność. "Strategia scenalna"" po "po" emitencie "link rel" as'"">, który poprosił przeglądarkę o pobranie trackera analityki w Wysoki priorytet obok tła bohatera. "lazyOnload" nadal rejestruje Wizyta, chwilę później i poza ścieżką krytyczną. Bohater zamontował trzy warstwy w pełnym dociekamowym tle. Rotacją jest Tylko na pulpicie, więc na telefonie dwa z nich były na stałe „opaliczność: 0”. "clearCookieConsent" - dwie linie localStorage — zostały wyeksportowane z Baner zgody, więc kontrolka "zarządzanymi plikami cookie" stopy zaciągnęła 250 linii Framer Motion w kawałek renderujący w początkowym HTML. Przenosi się do Aplikacja/lib/cookie-consent.ts, a baner i toast stack teraz się na Idle: ani nie maluje niczego po przyjeździe. "experimental.optimizeCss" drukowane "- optymalizująceC" w każdej kompilacji i tak Nic. Wzachnia krytyczny CSS poprzez post-processing gotowy HTML, który Aplikant router nigdy go nie rozdaje. Zweryfikowany na podstawie wbudowanej mocy wyjściowej za pomocą Zainstalowany backend: zero bloków w ?head, the the Arkusz stylów wciąż zwykłe blokowanie .link>. Usunięto – flagę, która informuje Sukces, podczas gdy obojętny odczytuje się jako optymalizacja już wzięty. 36 selekcjonerów klasy i 24 klatki w globals.css bez odniesienia W dowolnym miejscu w repozytorium, sprzedawcy i dokumentach. Brytalne bajty, gzip, rozmieszczone na czystej budowie: html 38,101 ? 36,277 js 281,700 zł 245,707 css 18,629 zł 17,398 logo 57,390 zł 22,902 W sumie 395,820 x 322 284 (-19%) skryptów gorliwych 15 x 13 Z okna pełnego na tym: plakat 93 KB, HLS Manent i jego segmenty 1,17 Mb/s, dwa obrazy tła i tracker. Nie dotyczy tutaj: odpowiedzi 307 na ?/en, który jest adresem URL, bieg prędkości strony Testy i które latarnia morska liczy się jako przekierowanie. Jedyną prawdziwą poprawką jest "localePrefix: 'as-potrzebujący'" i to przepisuje kanały, hreflang, mapy witryn I każda wewnętrzna href na trasach o wartości 250 funtów w 22 lokalizacjach, podczas gdy 301-osoba Dodekorowany /en/? URL. Jest to decyzja SEO, a nie performance, i hop kosztuje 60 mln euro na już otwarte połączenie.

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