Słownik pojęć

Aplikacja webowa zbudowana z użyciem nowoczesnych technologii przeglądarki, która zapewnia doświadczenia zbliżone do natywnych aplikacji mobilnych. PWA może działać bez połączenia z siecią, być instalowana na ekranie głównym urządzenia i wysyłać powiadomienia push. Kluczowe wymagania to serwowanie przez HTTPS, obecność Web App Manifest i co najmniej podstawowy Service Worker.

Kontekst użycia: Gdy serwis e-commerce chce zredukować czas do interaktywności na urządzeniach mobilnych i umożliwić przeglądanie katalogu bez sieci, PWA jest jedną z rozważanych architektur.

Skrypt JavaScript działający w tle przeglądarki, niezależnie od strony. Pełni rolę proxy sieciowego: przechwytuje żądania HTTP, może serwować zasoby z cache i synchronizować dane w tle. Service Worker rejestruje się na określonym zakresie URL i działa nawet gdy użytkownik zamknie kartę przeglądarki.

Kontekst użycia: Service Worker jest odpowiedzialny za tryb offline w PWA, ale jego możliwości są szersze: prefetching zasobów, cache strategie (cache-first, network-first) i synchronizacja danych w tle przez Background Sync API.

Plik JSON opisujący aplikację webową w sposób zrozumiały dla przeglądarki. Zawiera nazwę aplikacji, ikony w różnych rozmiarach, kolor motywu, tryb wyświetlania (standalone, fullscreen) i URL startowy. Manifest jest warunkiem koniecznym do wywołania przez przeglądarkę komunikatu o instalacji aplikacji.

Kontekst użycia: Właściwa konfiguracja manifest.json, w szczególności pole display oraz zestaw ikon zgodny ze specyfikacją, ma bezpośredni wpływ na to, czy przeglądarka uzna aplikację za instalowalną.

Metryka mierząca czas od nawigacji do momentu wyrenderowania największego elementu treści widocznego w oknie przeglądarki. Elementem LCP może być obraz, element video, blok tekstowy lub element z tłem CSS. Google uznaje wartości poniżej 2,5 sekundy za "dobre" i jest to jeden z sygnałów rankingowych Page Experience.

Kontekst użycia: Główne przyczyny złego LCP to zasoby blokujące renderowanie, nieoptymalny priorytet ładowania obrazów i powolny czas odpowiedzi serwera. Atrybut fetchpriority="high" na elemencie LCP jest jedną z technik optymalizacji.

Metryka mierząca responsywność strony na interakcje użytkownika. INP mierzy opóźnienie od momentu interakcji (kliknięcie, dotknięcie, naciśnięcie klawisza) do momentu gdy przeglądarka wyrenderuje następną klatkę wizualną. Zastąpiła First Input Delay (FID) jako oficjalna metryka Core Web Vitals w marcu 2024. Wartości poniżej 200 ms są uznawane za dobre.

Kontekst użycia: Długie zadania JavaScript blokujące wątek główny są najczęstszą przyczyną wysokiego INP. Techniki poprawy obejmują code splitting, przesunięcie pracy do Web Workers i unikanie synchronicznych operacji w obsługach zdarzeń.

Metryka mierząca stabilność wizualną strony podczas ładowania. CLS oblicza sumę punktacji przesunięć elementów layoutu, które nie były wywołane interakcją użytkownika. Wartości poniżej 0,1 są uznawane za dobre. Przesunięcia wywołane interakcją użytkownika (np. otwarcie menu) nie są wliczane do CLS.

Kontekst użycia: Obrazy bez zdefiniowanych atrybutów width i height, czcionki webowe powodujące FOUT (Flash of Unstyled Text) oraz dynamicznie wstrzykiwane treści to typowe źródła wysokiego CLS. Właściwość CSS aspect-ratio i font-display: swap pomagają stabilizować layout.

Mechanizm CSS pozwalający na jawne zdefiniowanie kolejności kaskady poprzez tworzenie nazwanych warstw. Style w warstwie o niższym priorytecie nigdy nie nadpiszą stylów z wyższej warstwy, niezależnie od specyficzności selektora. To rozwiązuje problem "wojen specyficzności" w dużych projektach CSS i pozwala na przewidywalne zarządzanie architekturą stylów.

Kontekst użycia: W systemie designu, który integruje style bazowe, komponenty, narzędziowe klasy i overrides specyficzne dla projektu, Cascade Layers eliminują konieczność używania !important i umożliwiają modularną kompozycję stylów.

Funkcja CSS pozwalająca komponentom reagować na rozmiar swojego kontenera zamiast rozmiaru okna przeglądarki (viewport). Zdefiniowanie kontenera przez właściwość container-type i container-name umożliwia pisanie reguł @container analogicznych do @media, ale bazujących na przestrzeni dostępnej dla komponentu, a nie całego widoku.

Kontekst użycia: Komponent karty produktu wyświetlany zarówno w sidebarze (wąskim), jak i w głównej siatce (szerokim) może adaptować swój layout bez duplikowania kodu i bez wiedzy o kontekście, w którym zostanie użyty.

Właściwości CSS zdefiniowane przez autora z użyciem prefiksu --. Dostępne w funkcji var() i dziedziczone przez drzewo DOM. W przeciwieństwie do zmiennych preprocesora CSS (Sass, Less), zmienne natywne działają w czasie wykonania przeglądarki, mogą być modyfikowane przez JavaScript i reagują na media queries.

Kontekst użycia: Implementacja motywów kolorystycznych (dark mode) bez przeładowania strony jest naturalnym zastosowaniem Custom Properties. Zmiana wartości na elemencie :root jest natychmiast dziedziczona przez cały dokument.

Natywny mechanizm HTML do tworzenia elementów nakładkowych (popoverów, tooltip, menu, dialog) bez JavaScript. Atrybut popover na elemencie i popovertarget na przycisku tworzą powiązanie wyzwalające. Przeglądarka automatycznie zarządza focusem, zamknięciem przez Escape i warstwą top-layer, eliminując problemy z z-index.

Kontekst użycia: Gdy komponenty oparte na JavaScript do obsługi popoverów powodują problemy z dostępnością i zarządzaniem focusem, natywne Popover API oferuje te funkcje jako wbudowane zachowanie przeglądarki bez dodatkowego kodu.

Atrybut HTML pozwalający autorowi wskazać przeglądarce priorytet pobierania zasobu (high, low, auto). Szczególnie przydatny dla elementu będącego LCP: ustawienie fetchpriority="high" na kluczowym obrazie pozwala przeglądarce pobrać go wcześniej bez czekania na analizę całego dokumentu.

Kontekst użycia: Strona lądowania z dużym obrazem bohaterskim, który jest elementem LCP. Dodanie fetchpriority="high" może zredukować wartość LCP o setki milisekund, ponieważ przeglądarka nie musi czekać na wstępne skanowanie dokumentu.

Narzędzie do automatycznego uruchamiania audytów Lighthouse w środowiskach ciągłej integracji (CI/CD). Lighthouse CI pozwala definiować progi (assertions) dla poszczególnych metryk i kategorii, porównywać wyniki między commitami i generować raporty historyczne. Wspiera integracje z GitHub Actions, GitLab CI i innymi platformami CI.

Kontekst użycia: Gdy Pull Request wprowadza regresję wydajności (np. LCP wzrasta o 500 ms), Lighthouse CI może zablokować merge i wskazać dokładną różnicę w wynikach w stosunku do gałęzi głównej.

Czas od wysłania żądania HTTP do momentu otrzymania pierwszego bajtu odpowiedzi z serwera. TTFB obejmuje czas DNS, nawiązanie połączenia TCP, negocjację TLS i czas przetwarzania po stronie serwera. Google rekomenduje TTFB poniżej 800 ms. Wysoki TTFB często wskazuje na problemy po stronie serwera, a nie po stronie klienta.

Kontekst użycia: Gdy LCP jest wysokie pomimo optymalnego kodu frontendowego, TTFB jest pierwszym miejscem do sprawdzenia. Wolna baza danych, brak cache'u odpowiedzi serwera lub geograficznie odległy serwer to typowe przyczyny.

Wzorzec architektoniczny dla aplikacji webowych, w którym strona jest renderowana głównie jako statyczny HTML, a interaktywne komponenty ("wyspy") są selektywnie hydratowane JavaScript. Podejście minimalizuje ilość JavaScript wysyłanego do przeglądarki i poprawia INP, ponieważ wątek główny nie jest zajęty hydratacją całego drzewa komponentów.

Kontekst użycia: Strona bloga z dynamicznym widżetem wyszukiwania i statyczną treścią artykułów. Islands Architecture pozwala zhydratować tylko komponent wyszukiwarki, pozostawiając resztę strony jako czyste HTML bez JavaScript.