Stop wysyłce 1,8 MB nieregabarytowego tła po nawodnieniu

Performancekamo-marketing
Szycy
19 sierpnia 2026 17:50 UTC
Autor
Kamo
Pochęt się
849051c

ThemedBackground był najdroższą rzeczą, jaka pozostała na stronie głównej, i żadna z nich nie była Wyglądał jak robak. Uprawiał surowe "img" prosto w wiadro tematu, więc przeglądarka otrzymała nietknięty plik źródłowy — 606, 646 i 585 KB, WebP, Pełna rozdzielczość, na telefonie. Nic ich nie przerodziło i nic nie służyło AVIF, Ponieważ żądanie nigdy nie zbliżyło się do optymalizatora obrazu. Nic leniwiego załadowanego Albo i wszystkie trzy instancje (Fatury, ceny, SignupSection) montują się na Nawodnienie, więc około 1,8 MB zaczęło pobierać w momencie, gdy strona próbowała Stać się interaktywnym, dla trzech sekcji nikt nie przewinął. I każda ramka Została pobrana dwa razy: sonda dostępności zbudowała "nowy obraz" - ", czekała na to" Załadunek w całości, a dopiero potem ustaw stan, który renderował prawdziwy element. "onError" jest właściwym narzędziem do tego i nic nie kosztuje. Poprzez "następny/obraz" każdy jest leniwie naciągany, poprawnie wywymiarowany AVIF na Niezmienny adres URL, a rozliczenie to przejście CSS, a nie Framer Motion "animat" na "img">. "images.qualities" jest skonfigurowany, co jest warunkiem wstępnym, a nie strojeniem Pokrętło: Następne 16 odpowiedzi 400 dla dowolnej jakości nie na tej liście, a lista domyślna Tylko [75] – więc „równość 50” nie była ignorowana, kosztowałoby to koszty Obraz wprost. Jakość jest teraz ustawiona na podstawie tego, jak każda powierzchnia jest faktycznie kompozytowa, mierzona raczej - Zgadł. Dekodowanie zarówno kodowania, jak i porównywanie ich - "po" własnej stronie Filtry: Jasność tarczy w tle (.21) 41.1 dB PSNR 0,57% pikseli różni się o >8/255 - jakość 50 Ozdobna jasności tła(.6), skala szarości 20%, Promieniowa czarna nakładka 36.9 dB PSNR 6,60% pikseli różni się o >8/255, lejąc w wieku 75 lat. Bohater jest elementem LCP i jest złożony na jednej piątej jego luminancji, więc Połowa bitów kupuje szczegóły, które nic nie może rozwiązać przez tyle czerni: 77.7 KB w domyślnym poziomie, 22,0 KB przy 50, dla różnicy 0,57% pikseli może być wyraźnych. Ramy tematyczne siedzą pod znacznie lżejszą nakładką, gdzie ten sam krok sięga 6,6% – wystarczająco, aby pasować do gładkiego obszaru nieba na pełnej powierzchni. Ich Oszczędzanie nigdy nie było ustawieniem jakości; była to zmiana wielkości i lenistwo. Ramka plakatu jest mierzona, a nie zakładana. Stałe w 828 było trzy razy piksele, które przysłona pokazuje na telefonie, gdzie jest około 370 CSS px; to jest Obecnie wywodzi się z szerokości elementu i stosunku piksela urządzenia, w stosunku do Konfigurowane urządzenieRozmiar. 26,5 KB - 7,6 KB na telefon. Dwa prekonjedynki są teraz dns-prefetch. Preconnect otwiera gniazdo Natychmiast i trzyma go, co zarabia tylko dla pochodzenia potrzebnego podczas Pierwsza farba. Z tematyczną fotografią przechodzącą przez optymalizator tego pochodzenia, Pierwsze żądanie przeglądarki do theme.kamorm.com to widget czatu lub widżet Bohater bębnowy, zarówno celowo po wydarzeniu obciążeniowym, jak i początkiem analityki Ta sama historia, odkąd tracker przeniósł się do leniwegoPloada. Lighthouse poinformowała o Motyw preconnect jako nieużywany i tak było: gniazdo otwarte podczas ścieżki krytycznej, Konkurowanie z nim, bezczynne aż do zamknięcia się. Dwie rzeczy mierzone i celowo NIE zmienione, więc nie są one ponownie wiązane: Lista przeglądarki skierowane do nowoczesnych przeglądarek nie usuwa 13.5 KB Flagi latarni polifills Lighthouse Object.fromEntries/ma Własne, - są Własny "moduł-polyfill", dołączony bezwarunkowo; z listą przeglądarek Zestaw zawierający kawałek zbudowany byte-identical, ten sam hash. Dodawanie konfig To, co jest możliwe, jest tym, czym był „optymłączenieCss”. Usuwanie 90 ze 149 składników, do których się nie odnoszą, nigdzie się nie porusza Arkusz stylizacji render-blocking przez 678 bajtów gzip (17,398 x 16,720). Tailwind (ujednoznacznienie) Skanowanie martwych plików nie jest tym, co sprawia, że plik 17 KB, więc 90-plikowe usunięcie Nie można jej uzasadnić jako poprawkę wydajności. Nadal otwarty i nie można go naprawić z tego repozytorium: kamo-chat.js jest obsługiwany od Wiadro przewodnie bez nagłówka Cache-Control w ogóle, 143 KB. Lista odtwarzania HLS' 300s TTL jest celowy — bohater-hls-encode-job.yaml przepisuje je na rekonstrukcji — Jest warta 1 KiB, więc zostaje.

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