← Wszystkie tematy W 60% ogłoszeń · 28 z 47 ogłoszeń frontend React

Wydajność i Core Web Vitals

Szybki listonosz i lekki plecak

Wydajność pojawia się w 28 z 47 ogłoszeń, często jako „performance optimization” albo wprost Core Web Vitals. Trzeba umieć powiedzieć, co się mierzy, czym i co konkretnie zrobiłeś.

Przerobione Opanowane 0 z 5 pytań

Ucz się z Claude Wytłumacz od zera Próbna rozmowa Zadanie praktyczne Ściąga na 1 stronę

Co piszą w ogłoszeniach

„Ensure responsive design, performance optimization, and accessibility standards.”
emagine Polska · Frontend React Developer
„Frontend Mastery: Deep expertise in React and TypeScript (ideally Next.js), with a strong track record of delivering production-grade frontend applications, architectural design, and performance optimizations.”
HelloFresh · Senior Frontend Engineer, Consumer Alliance
„Analyse and resolve technical challenges, optimise application performance, and contribute to improvements in usability, accessibility, and application quality.”
Capco Poland · Front-End Engineer - React (Payments)

Scena pierwsza · LCP

Listonosz z plecakiem

Zanim zobaczysz stronę, listonosz musi przynieść ją w plecaku do Twojego domu. Im cięższy plecak, tym wolniej idzie. LCP mówi, po ilu sekundach pojawił się największy element strony, zwykle duży obrazek albo nagłówek. Odchudź plecak i zobacz, o ile szybciej dojdzie.

plecak: – KB

Zaznacz poprawki, a potem wyślij listonosza.

Scena druga · CLS

Skaczący przycisk

Chcesz kliknąć „Czytaj dalej”, ale w ostatniej chwili nad tekstem wskakuje obrazek i wszystko zjeżdża w dół. Klikasz w coś zupełnie innego. CLS mierzy, jak bardzo strona skacze podczas ładowania. Lekarstwo: zarezerwuj miejsce na obrazek, zanim przyjdzie.

Jak robot nauczył się liczyć

Krótka bajka o robocie, który pomylił cukierki z guzikami.

Czytaj dalej

Zarezerwuj miejsce (width/height, aspect-ratio)

Kliknij „Załaduj stronę”. Rączka spróbuje trafić w „Czytaj dalej”.

Scena trzecia · INP

Jedna kasa w sklepie

Przeglądarka ma jedną kasę, czyli główny wątek. Gdy przed Tobą stoi pan z ogromnym wózkiem (długie zadanie JavaScriptu), Twoje kliknięcie musi poczekać. INP mierzy, jak długo strona reaguje na kliknięcie. Lekarstwo: pan z wózkiem przepuszcza innych co chwilę, czyli dzielimy pracę na małe kawałki.

Kasa (główny wątek)

jedno wielkie zadanie małe kawałki (yield)

INP: –

Zacznij liczenie, a w trakcie kliknij „Kliknij mnie!”.

Porównajmy

Trzy liczby Google

	Co mierzy	Jak poprawić
LCP ≤ 2,5 s	Kiedy listonosz doniósł największą rzecz.Largest Contentful Paint: czas wyrenderowania największego elementu.	Lżejszy plecak i krótsza droga.Mniejszy bundle (code splitting, lazy), obrazy AVIF/WebP z `srcset`, `preload` / `fetchpriority="high"` dla hero, CDN, SSR.
CLS ≤ 0,1	Jak bardzo strona skakała.Cumulative Layout Shift: suma przesunięć układu.	Rezerwuj miejsce, zanim coś przyjdzie.`width`/`height` lub `aspect-ratio`, skeletony, `font-display` z dopasowanym fallbackiem.
INP ≤ 200 ms	Jak szybko kasa obsłużyła kliknięcie.Interaction to Next Paint: najgorsza z typowych interakcji.	Krótkie zadania przy kasie.Dzielenie pracy (`scheduler.yield`, `useTransition`), Web Worker, mniej re-renderów, debounce.

Lekki plecak

Przynoś tylko to, co potrzebne na tej stronie. Resztę doniesiesz później.

Miejsce zarezerwowane

Puste krzesło dla obrazka, zanim przyjdzie. Nikt nie musi się przesuwać.

Przepuszczaj

Duża praca w małych kawałkach, żeby kliknięcia nie czekały w kolejce.

Sprawdź się

Pytania z rozmów

Najpierw odpowiedz na głos, dopiero potem rozwiń odpowiedź.

Co mierzą LCP, INP i CLS i jak poprawić każdy z nich?

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: LCP: kiedy listonosz doniósł największą paczkę. CLS: czy meble skakały po pokoju. INP: jak szybko kasjer obsłużył Twoje kliknięcie.

Na rozmowę: LCP (≤ 2,5 s): czas wyrenderowania największego elementu. Poprawiam przez mniejszy JS, optymalizację i preload obrazu hero, fetchpriority, CDN, SSR. CLS (≤ 0,1): suma nieoczekiwanych przesunięć. Pomaga rezerwowanie miejsca (width/height, aspect-ratio), skeletony i fonty z dopasowanym fallbackiem. INP (≤ 200 ms): opóźnienie odpowiedzi na interakcję. Pomaga dzielenie długich zadań, useTransition, mniej re-renderów, Web Workery. Mierzę w polu (CrUX, biblioteka web-vitals), a w labie (Lighthouse) szukam przyczyn.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające

Jak zmniejszyć rozmiar bundla? (code splitting, lazy, tree shaking, analiza bundla)

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Pakujesz do plecaka tylko rzeczy na dzisiejszą wycieczkę. Resztę ktoś doniesie, kiedy będzie potrzebna.

Na rozmowę: Najpierw analiza (rollup-plugin-visualizer, webpack-bundle-analyzer, source-map-explorer). Potem: podział na trasy i ciężkie widoki (React.lazy, dynamic import), importy pozwalające na tree shaking (ESM, importy nazwane, sideEffects: false), wymiana ciężkich bibliotek (moment → date-fns / Intl), duże zależności tylko na żądanie, budżet rozmiaru w CI, kompresja brotli i długi cache z hashami w nazwach plików.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Jak znaleźć niepotrzebne re-rendery? (React Profiler, why-did-you-render)

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Na rozmowę: React DevTools Profiler: nagrywam interakcję i patrzę na flame graph, czasy commitów i „why did this render”. Opcja „Highlight updates” pokazuje miganie komponentów. Typowe przyczyny to niestabilne propsy (inline obiekty i funkcje), za szeroki Context, stan za wysoko w drzewie. Naprawiam kolokacją stanu, podziałem Contextu, memo z useCallback. Zawsze mierzę przed i po.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Jak wyświetlić listę 10 000 elementów bez zacinania? (wirtualizacja)

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Na scenie jest miejsce tylko dla kilku aktorów. Gdy jeden schodzi, za kulisami przebiera się w następnego. Widownia myśli, że aktorów jest tysiąc.

Na rozmowę: Wirtualizacja (TanStack Virtual, react-window): w DOM istnieją tylko widoczne wiersze plus mały bufor, a reszta to pusta przestrzeń o właściwej wysokości. Do tego stabilne key, memo wierszy, przy zmiennych wysokościach pomiar elementów. Alternatywy: paginacja lub infinite scroll, a dla prostych list CSS content-visibility: auto.

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające
Debounce vs throttle: różnica i przykłady użycia.

Moja odpowiedź

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż odpowiedź

Dla przedszkolaka: Debounce: winda czeka, aż wszyscy przestaną wsiadać, i dopiero rusza. Throttle: autobus odjeżdża co 5 minut, niezależnie od tego, ile osób przyszło.

Na rozmowę: Debounce wykonuje funkcję dopiero po X ms ciszy, np. wyszukiwarka z podpowiedziami czy autozapis. Throttle wykonuje najwyżej raz na X ms, np. scroll, resize, śledzenie myszy. W React trzeba trzymać funkcję stabilnie (useMemo, useRef) i czyścić timer przy odmontowaniu. Do wyszukiwania często lepiej łączyć debounce z anulowaniem poprzedniego żądania (AbortController).

Umiem?

Zapytaj Claude Rozwiń Przepytaj mnie Pytania pogłębiające

Poziom wyżej

Wersja dla seniora

Tak wyglądają pytania na seniora i leada: nie ma jednej dobrej odpowiedzi, liczy się to, jak ważysz kompromisy i czy mówisz o skali, ryzyku i ludziach.

Przypadek 1

Sklep z INP 600 ms na tanich telefonach z Androidem

Dane z CrUX pokazują INP 600 ms na mobile, głównie przy dodawaniu do koszyka i otwieraniu filtrów. Na MacBookach zespołu wszystko działa płynnie. Google Search Console oznacza strony jako słabe, a marketing pyta, kiedy będzie zielono.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy zaczynasz od danych z pola, a nie od Lighthouse
Czy umiesz znaleźć długie zadania i ich źródło
Czy znasz techniki dzielenia pracy i odchudzania głównego wątku

Odpowiedź seniora

Najpierw diagnoza na prawdziwych danych: biblioteka web-vitals z atrybucją (onINP z attribution) wysyła do analityki, która interakcja i który element jest wolny, z podziałem na input delay, processing i presentation delay. Do odtworzenia używam Performance panelu z CPU throttling 6x albo taniego telefonu przez remote debugging.

Typowe przyczyny przy koszyku: skrypty firm trzecich (tag manager, czaty) blokujące wątek, handler, który synchronicznie aktualizuje duży store i renderuje pół strony, oraz ciężkie wyliczenia w renderze. Naprawy: szybka odpowiedź wizualna od razu, a ciężka praca po await scheduler.yield() lub w startTransition, zawężenie re-renderów (selektory, kolokacja stanu), przeniesienie skryptów zewnętrznych do Partytown lub opóźnienie ich ładowania, Web Worker do obliczeń.

Cel i weryfikacja: INP p75 poniżej 200 ms w CrUX, ale ten ma 28-dniowe okno, więc postęp śledzę we własnym RUM z dnia na dzień. Każda poprawka idzie osobno, żeby wiedzieć, co dało efekt.

Typowe wpadki

Optymalizowanie wyniku Lighthouse, który nie mierzy INP
Testy tylko na szybkim laptopie
Wyłączenie animacji jako jedyna poprawa

Dopytają o

Jak negocjujesz z marketingiem o skryptach zewnętrznych?
Czym różni się TBT od INP?
Jak sprawdzisz, czy problem nie wróci?

Zapytaj Claude Rozwiń case Zagraj interviewera

Przypadek 2

Budżety wydajności, które nikt nie łamie, bo nikt ich nie pilnuje

Od roku bundle rośnie o 10% na kwartał, a LCP powoli się pogarsza. Każdy PR jest „mały”, więc nikt nie czuje odpowiedzialności. Masz wprowadzić mechanizm, który to zatrzyma, bez blokowania zespołów na każdym kroku.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy znasz narzędzia do budżetów w CI
Czy rozumiesz różnicę między metrykami labowymi i polowymi
Czy projektujesz proces z rozsądnymi wyjątkami

Odpowiedź seniora

Wprowadzam budżety na dwóch poziomach. W PR: rozmiar bundla per wejście (size-limit albo bundlewatch) z komentarzem pokazującym różnicę w KB, oraz Lighthouse CI na kilku kluczowych stronach z progami dla LCP, TBT i CLS w warunkach labowych. Przekroczenie blokuje merge, ale można je świadomie zaakceptować etykietą i uzasadnieniem, co zostaje w historii.

W produkcji: RUM (web-vitals do własnej analityki albo SpeedCurve, Vercel Analytics) z alertem, gdy p75 LCP lub INP pogorszy się o określony próg po wdrożeniu. Dashboard z trendem jest widoczny na przeglądach sprintu.

Budżety ustalam z produktem na podstawie obecnego stanu minus mały margines, a nie idealnych wartości, i obniżam je stopniowo. Właścicielem metryki jest konkretny zespół platformowy, a nie „wszyscy”.

Typowe wpadki

Budżet tak ostry, że wszyscy zaczynają go obchodzić
Tylko metryki labowe, bez danych od użytkowników
Brak właściciela i trendu

Dopytają o

Jak ustawisz Lighthouse CI, żeby nie był niestabilny?
Co zrobisz, gdy biznes chce dodać ciężką bibliotekę?
Jak powiążesz wydajność z konwersją?

Zapytaj Claude Rozwiń case Zagraj interviewera

Przypadek 3

LCP spadł o sekundę po starcie kampanii

W poniedziałek ruszyła kampania z nowym banerem na stronie głównej i dodatkowymi pikselami reklamowymi. We wtorek LCP p75 wzrósł z 2,1 s do 3,2 s. Kampania ma priorytet, nic nie może zniknąć ze strony.

Zanim rozwiniesz: powiedz na głos, jak byś to rozwiązał, i nazwij co najmniej jeden kompromis.

Moje rozwiązanie

Zapisuje się samo w tej przeglądarce. Kopię zrobisz na stronie Notatki.

Pokaż, czego szuka rekruter, i modelową odpowiedź

Co sprawdza rekruter

Czy umiesz szybko zdiagnozować regres i wskazać przyczynę
Czy znasz techniki optymalizacji LCP dla obrazu
Czy umiesz działać pod presją biznesu i komunikować się

Odpowiedź seniora

Najpierw ustalam, co jest elementem LCP teraz: atrybucja z web-vitals albo WebPageTest z porównaniem przed i po. Najczęściej nowy baner to obraz ładowany przez CSS background albo z JS karuzeli, bez wymiarów, w pełnej rozdzielczości, a dodatkowe piksele zajmują łącze i główny wątek na starcie.

Poprawki bez zmiany treści kampanii: baner jako img w HTML z fetchpriority="high" i bez lazy, w AVIF lub WebP w kilku rozmiarach (srcset, sizes) przez CDN obrazów, preload, jeśli jest w karuzeli. Piksele reklamowe ładowane po zdarzeniu load lub przez serwerowy tag manager. Pierwszy slajd karuzeli renderowany na serwerze, a nie po hydratacji.

Komunikacja: krótki raport z przyczyną, wpływem (np. dane o konwersji przy wolniejszym LCP) i planem. Na przyszłość: checklista dla kampanii i budżet LCP na stronie głównej w Lighthouse CI.

Typowe wpadki

Propozycja usunięcia banera
Optymalizowanie losowych rzeczy bez ustalenia elementu LCP
Lazy loading obrazu, który jest elementem LCP

Dopytają o

Jak zmierzysz wpływ zmian, skoro CrUX ma 28-dniowe okno?
Kto powinien akceptować nowe skrypty marketingowe?
Co zrobisz, gdy baner musi być wideo?

Zapytaj Claude Rozwiń case Zagraj interviewera