Pomiar kluczowych wskaźników internetowych
Śledzić i poprawiać wskaźniki wydajności
Pomiar kluczowych wskaźników internetowych to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Dlaczego wskaźniki mają znaczenie
Core Web Vitals to skoncentrowane na użytkowniku wskaźniki wydajności firmy Google. Mierzą ładowanie, interaktywność i stabilność wizualną, wpływając zarówno na UX, jak i pozycję w wynikach wyszukiwania.
Trzy wskaźniki
Ta trójka obejmuje LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) i INP (Interaction to Next Paint). Każdy z nich dotyczy innego aspektu postrzeganej wydajności.
LCP
LCP mierzy moment zakończenia renderowania największego widocznego elementu (obrazu głównego lub nagłówka). Dobry wynik to mniej niż 2,5 sekundy. SSR pomaga, dostarczając tę treść w początkowym kodzie HTML.
CLS
CLS mierzy nieoczekiwane przesunięcia układu podczas ładowania strony. Dobry wynik to mniej niż 0,1. Należy rezerwować miejsce na obrazy i reklamy oraz unikać wstawiania treści nad już istniejącą treścią.
<img src="hero.jpg" width="800" height="450" alt="...">
<!-- explicit dimensions prevent shift -->INP
INP mierzy reakcję na interakcje użytkownika w całym cyklu życia strony, zastępując starszy wskaźnik FID. Dobry wynik to mniej niż 200 ms. Ciężki kod JS w głównym wątku pogarsza INP.
Jak SSR pomaga wskaźnikom
SSR poprawia LCP, wcześniej wyświetlając treść, i może zmniejszyć CLS, dostarczając wcześnie stabilny układ. Hydratacja inkrementalna poprawia INP, dostarczając z góry mniej JavaScriptu.
Dane laboratoryjne a dane terenowe
Dane laboratoryjne pochodzą z narzędzi syntetycznych, takich jak Lighthouse, działających w kontrolowanym środowisku. Dane terenowe (CrUX, RUM) pochodzą od rzeczywistych użytkowników. Należy optymalizować na podstawie obu rodzajów danych, przy czym ranking wykorzystuje dane terenowe.
Pomiar za pomocą Lighthouse
Uruchom Lighthouse w Chrome DevTools lub w CI, aby uzyskać laboratoryjne wyniki LCP i CLS, przybliżenie INP w postaci całkowitego czasu blokowania oraz praktyczne wskazówki diagnostyczne.
// npx lighthouse https://example.com --viewBiblioteka web-vitals
Zbieraj wskaźniki od rzeczywistych użytkowników w przeglądarce za pomocą biblioteki web-vitals i wysyłaj je do punktu końcowego analityki.
import { onLCP, onCLS, onINP } from 'web-vitals';
onLCP(console.log);
onCLS(console.log);
onINP(console.log);Ograniczanie JavaScriptu
Mniejsze pakiety poprawiają INP i time-to-interactive. Korzystaj z leniwego ładowania na poziomie tras, @defer, hydratacji inkrementalnej i tree-shakingu, aby ograniczyć dostarczany kod JS.
Iterowanie i weryfikowanie
Praca nad wydajnością polega na pomiarze, wprowadzaniu zmian i ponownym pomiarze. Po włączeniu SSR, hydratacji lub defer ponownie uruchom Lighthouse i przez kilka tygodni obserwuj trendy w danych terenowych, aby potwierdzić rzeczywiste korzyści.
Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat Core Web Vitals.
Podsumowanie
Poznali Państwo wskaźniki Core Web Vitals (LCP, CLS, INP), sposób, w jaki SSR i hydratacja inkrementalna je poprawiają, różnicę między danymi laboratoryjnymi a terenowymi oraz pomiar za pomocą Lighthouse i biblioteki web-vitals, a także iteracyjne podejście oparte na ponownych pomiarach.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 38
- Lekcje
- 144
Często zadawane pytania
Czy lekcja „Pomiar kluczowych wskaźników internetowych” jest bezpłatna?
Tak — pełny tekst „Pomiar kluczowych wskaźników internetowych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Pomiar kluczowych wskaźników internetowych”?
Śledzić i poprawiać wskaźniki wydajności Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Pomiar kluczowych wskaźników internetowych”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Czym jest hydration
- Włączanie pełnego hydration
- Przyrostowy hydration za pomocą @defer
- Pomiar kluczowych wskaźników internetowych