Ka\u017cdy, kto kiedykolwiek pracowa\u0142 przy aplikacji webowej, s\u0142ysza\u0142 mantr\u0119: \u201eszybko\u015b\u0107 strony to podstawa\u201d. Problem w tym, \u017ce wi\u0119kszo\u015b\u0107 firm mierzy pr\u0119dko\u015b\u0107 tak, jakby mierzy\u0142a pr\u0119dko\u015b\u0107 samochodu za pomoc\u0105 temperatury oleju \u2013 niby co\u015b m\u00f3wi, ale nie do ko\u0144ca wiadomo czy to jest to.<\/p>\n
W audytach, kt\u00f3re przeprowadzam dla klient\u00f3w JurskiTech, regularnie widz\u0119 zespo\u0142y, kt\u00f3re patrz\u0105 na Lighthouse na 100, a u\u017cytkownicy i tak narzekaj\u0105, \u017ce aplikacja \u201elaguje\u201d. Albo skupiaj\u0105 si\u0119 na czasie \u0142adowania strony, podczas gdy prawdziwy problem le\u017cy w interaktywno\u015bci. Dlaczego tak si\u0119 dzieje? Bo bran\u017ca marketingowa wykreowa\u0142a kilka lat temu kult szybko\u015bci \u0142adowania, kt\u00f3ry dzi\u015b nie ma wiele wsp\u00f3lnego z rzeczywistym do\u015bwiadczeniem u\u017cytkownika.<\/p>\n
Google pr\u00f3buje to zmieni\u0107 od 2020 roku, wprowadzaj\u0105c Core Web Vitals \u2013 ale nawet tam wiele firm dalej patrzy na zast\u0119pcze metryki. W tym artykule poka\u017c\u0119 trzy wska\u017aniki, kt\u00f3re realnie decyduj\u0105 o tym, czy Twoja aplikacja jest postrzegana jako szybka, czy wr\u0119cz przeciwnie \u2013 i jak je praktycznie poprawi\u0107.<\/p>\n
Zacznijmy od najwa\u017cniejszego: czy Twoja aplikacja reaguje na klikni\u0119cie? Wiele stron \u0142aduje si\u0119 b\u0142yskawicznie, ale gdy u\u017cytkownik chce co\u015b zrobi\u0107 \u2013 klikn\u0105\u0107 przycisk, otworzy\u0107 menu, wpisa\u0107 tekst \u2013 nast\u0119puje sekunda martwej ciszy. To jest w\u0142a\u015bnie First Input Delay (FID) \u2013 czas od momentu interakcji do rozpocz\u0119cia jej obs\u0142ugi przez g\u0142\u00f3wny w\u0105tek przegl\u0105darki.<\/p>\n
W 2024 roku Google zast\u0105pi\u0142o FID now\u0105 metryk\u0105 \u2013 Interaction to Next Paint (INP), kt\u00f3ra mierzy op\u00f3\u017anienie dla wszystkich interakcji, nie tylko pierwszej. Je\u015bli INP przekracza 200 ms, aplikacja jest odbierana jako \u201eop\u00f3\u017aniona\u201d. Je\u015bli przekracza 500 ms \u2013 u\u017cytkownicy zaczynaj\u0105 klika\u0107 wielokrotnie, irytowa\u0107 si\u0119 i odchodzi\u0107.<\/p>\n
Dlaczego wi\u0119kszo\u015b\u0107 firm to ignoruje?<\/strong> Bo narz\u0119dzia takie jak Lighthouse nie zawsze pokazuj\u0105 realne warto\u015bci FID\/INP \u2013 one szacuj\u0105 na podstawie symulacji. Prawdziwe dane zbierasz jedynie z pola (RUM \u2013 Real User Monitoring). I tu pojawia si\u0119 pierwszy b\u0142\u0105d: firmy optymalizuj\u0105 pod k\u0105tem test\u00f3w syntetycznych, a nie rzeczywistego zachowania u\u017cytkownik\u00f3w.<\/p>\n Jak to poprawi\u0107?<\/strong> Przede wszystkim audyt kodu JavaScript: zbyt wiele bibliotek, nieoptymalne nas\u0142uchiwacze zdarze\u0144, blokuj\u0105cy rendering CSS. Kluczowe jest \u201ecode splitting\u201d \u2013 dzielenie kodu na mniejsze fragmenty wczytywane na \u017c\u0105danie. U\u017cyj narz\u0119dzi takich jak Webpack Bundle Analyzer, by zidentyfikowa\u0107 \u201eci\u0119\u017ckie\u201d fragmenty. W JurskiTech cz\u0119sto stosujemy te\u017c technik\u0119 \u201eidle until urgent\u201d \u2013 pozwalaj\u0105c przegl\u0105darce przetwarza\u0107 kod tylko wtedy, gdy jest faktycznie potrzebny.<\/p>\n Praktyczny przyk\u0142ad: pracowa\u0142em niedawno z SaaS-em z bran\u017cy fintech. Ich panel klienta \u0142adowa\u0142 si\u0119 w 1,2 s (wed\u0142ug Lighthouse), ale INP wynosi\u0142 800 ms. Przyczyn\u0105 by\u0142a ogromna biblioteka chartingowa wczytywana od razu, podczas gdy pierwsze interakcje u\u017cytkownika dotyczy\u0142y logowania. Po odroczeniu \u0142adowania wykres\u00f3w do momentu wej\u015bcia w zak\u0142adk\u0119 raport\u00f3w, INP spad\u0142 do 150 ms. Wzrost konwersji? +12%.<\/p>\n TTI to metryka, kt\u00f3ra m\u00f3wi, po jakim czasie u\u017cytkownik mo\u017ce w pe\u0142ni korzysta\u0107 z aplikacji \u2013 czyli wszystkie elementy s\u0105 wy\u015bwietlone, a g\u0142\u00f3wny w\u0105tek nie jest zablokowany. Jest to istotne zw\u0142aszcza dla aplikacji single-page (SPA), gdzie pocz\u0105tkowy HTML jest cz\u0119sto \u201epust\u0105 skorup\u0105\u201d, a ca\u0142a tre\u015b\u0107 dostarczana jest przez JavaScript.<\/p>\n Wiele firm myli TTI z Largest Contentful Paint (LCP) \u2013 czyli momentem wy\u015bwietlenia najwi\u0119kszego elementu. LCP mo\u017ce by\u0107 niskie, ale TTI wysokie, je\u015bli zaraz po wyrenderowaniu obrazka przegl\u0105darka zaczyna przetwarza\u0107 du\u017ce skrypty. U\u017cytkownik widzi stron\u0119, ale nie mo\u017ce nic klikn\u0105\u0107.<\/p>\n Dlaczego to boli biznes?<\/strong> Je\u015bli prowadzisz sklep internetowy i aplikacja jest interaktywna dopiero po 5 sekundach, u\u017cytkownik zd\u0105\u017cy ju\u017c przej\u015b\u0107 do konkurencji. Badania Google pokazuj\u0105, \u017ce wzrost TTI z 2 do 5 sekund zwi\u0119ksza wsp\u00f3\u0142czynnik odrzuce\u0144 o 30%.<\/p>\n Jak poprawi\u0107 TTI?<\/strong> Lista dzia\u0142a\u0144 jest prosta, ale wymaga dyscypliny: ogranicz JavaScript, wczytuj go asynchronicznie, u\u017cywaj lazy loading dla komponent\u00f3w, unikaj blokuj\u0105cych skrypt\u00f3w zewn\u0119trznych (np. czat na \u017cywo, systemy analityczne). W jednym z projekt\u00f3w dla klienta z bran\u017cy e-commerce zredukowali\u015bmy TTI z 6,2 s do 1,8 s poprzez usuni\u0119cie nieu\u017cywanych wtyczek i przeniesienie skrypt\u00f3w analitycznych do Web Workera. Efekt? Wzrost konwersji o 15%.<\/p>\n Warto te\u017c rozwa\u017cy\u0107 technik\u0119 \u201eprogressive hydration\u201d (np. w frameworkach takich jak React czy Vue), czyli stopniowe aktywowanie komponent\u00f3w w miar\u0119 potrzeby. Zamiast hydratowa\u0107 ca\u0142\u0105 aplikacj\u0119 od razu, robisz to partiami. To szczeg\u00f3lnie wa\u017cne w aplikacjach z dynamiczn\u0105 tre\u015bci\u0105.<\/p>\n CLS mierzy, jak bardzo uk\u0142ad strony \u201eskacze\u201d podczas \u0142adowania. Ka\u017cdy zna to uczucie: czytasz artyku\u0142, nagle wyskakuje obrazek, reklama przesuwa tekst, klikasz w reklam\u0119 zamiast w przycisk. To w\u0142a\u015bnie CLS. Google uzna\u0142o to za jeden z kluczowych wska\u017anik\u00f3w Core Web Vitals, i s\u0142usznie \u2013 destabilizacja wizualna dra\u017cni u\u017cytkownik\u00f3w i prowadzi do b\u0142\u0119dnych klikni\u0119\u0107.<\/p>\n Dlaczego wi\u0119kszo\u015b\u0107 firm ignoruje CLS?<\/strong> Bo wydaje si\u0119, \u017ce to detal. Jednak w praktyce CLS powy\u017cej 0,25 mo\u017ce oznacza\u0107 nawet 20% spadek konwersji w e-commerce. W sklepie, gdzie klient chce doda\u0107 produkt do koszyka, a przycisk nagle si\u0119 przesuwa, u\u017cytkownik najprawdopodobniej zamknie zak\u0142adk\u0119.<\/p>\n Jak poprawi\u0107 CLS?<\/strong> Podstawowa zasada: zawsze rezerwuj miejsce dla element\u00f3w, kt\u00f3re \u0142aduj\u0105 si\u0119 p\u00f3\u017aniej \u2013 obrazk\u00f3w, wideo, reklam, a tak\u017ce czcionek (poprzez font-display: swap lub optional). U\u017cywaj atrybut\u00f3w width i height w znacznikach img, unikaj dynamicznego wstrzykiwania tre\u015bci nad ju\u017c widoczn\u0105 zawarto\u015bci\u0105.<\/p>\n Przyk\u0142ad z autopsji: w jednym z landing page\u2019\u00f3w dla klienta z bran\u017cy fintech CLS wynosi\u0142 0,45. Pow\u00f3d? Biblioteka animacji wczytywa\u0142a si\u0119 z op\u00f3\u017anieniem i powodowa\u0142a przesuni\u0119cie ca\u0142ej sekcji hero. Po zarezerwowaniu dla niej sta\u0142ej wysoko\u015bci i dodaniu placeholdera, CLS spad\u0142 do 0,05. Wzrost zapyta\u0144 ofertowych o 8%.<\/p>\n Podsumowuj\u0105c: nie daj si\u0119 zwariowa\u0107 wy\u015bcigowi o jak najni\u017cszy LCP czy perfekcyjny wynik Lighthouse. Te metryki s\u0105 wa\u017cne, ale tylko jako cz\u0119\u015b\u0107 wi\u0119kszego obrazu. Je\u015bli Twoja aplikacja ma niski LCP, ale wysoki INP i TTI, u\u017cytkownicy i tak b\u0119d\u0105 narzeka\u0107. Podobnie, CLS mo\u017ce zniweczy\u0107 pierwsze dobre wra\u017cenie, gdy strona ju\u017c si\u0119 za\u0142aduje.<\/p>\n Kluczem jest monitorowanie rzeczywistej wydajno\u015bci u\u017cytkownik\u00f3w (RUM) i koncentracja na wska\u017anikach, kt\u00f3re faktycznie koreluj\u0105 z behawiorem \u2013 INP, TTI, CLS. W JurskiTech zawsze doradzamy klientom, by zainwestowali w narz\u0119dzia takie jak Google Analytics z raportem Core Web Vitals, Sentry dla performance, lub w\u0142asne skrypty zbieraj\u0105ce metryki po stronie klienta.<\/p>\n Wydajno\u015b\u0107 to nie sprint, to maraton. Ale startuj\u0105c z dobrymi metrykami, masz szans\u0119 dobiec na podium, zanim konkurencja w og\u00f3le zda sobie spraw\u0119, \u017ce \u015bcigaj\u0105 si\u0119 w z\u0142ym kierunku.<\/p>\n","protected":false},"excerpt":{"rendered":" Jak realnie mierzy\u0107 wydajno\u015b\u0107 aplikacji? 3 metryki, kt\u00f3re faktycznie maj\u0105 znaczenie Ka\u017cdy, kto kiedykolwiek pracowa\u0142 przy aplikacji webowej, s\u0142ysza\u0142 mantr\u0119: \u201eszybko\u015b\u0107 strony to podstawa\u201d. Problem w tym, \u017ce wi\u0119kszo\u015b\u0107 firm mierzy pr\u0119dko\u015b\u0107 tak, jakby mierzy\u0142a pr\u0119dko\u015b\u0107 samochodu za pomoc\u0105 temperatury oleju \u2013 niby co\u015b m\u00f3wi, ale nie do ko\u0144ca wiadomo czy to jest to. W<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[44,9,958,539,81],"class_list":["post-2496","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-core-web-vitals","tag-jurskitech","tag-metryki-webowe","tag-optymalizacja-aplikacji","tag-wydajnosc-aplikacji"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/comments?post=2496"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2496\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=2496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=2496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=2496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}2. Time to Interactive (TTI) \u2013 czas do pe\u0142nej interaktywno\u015bci<\/h2>\n
3. Cumulative Layout Shift (CLS) \u2013 stabilno\u015b\u0107 wizualna<\/h2>\n
Mierzenie, kt\u00f3re ma sens<\/h2>\n