Wydajność – najważniejsze zmienne

First Contentful Paint (pierwsze wyrendowane treści, FCP)

Jest to czas, w jakim na ekranie pojawi się pierwszy element strony (cokolwiek). Pojawienie się takiego elementu daje użytkownikowi świadomość, że “coś się dzieje”

Total Blocking Time (całkowity czas blokowania)

To czas, w którym użytkownik odzyskuje kontrolę nad stroną lub inaczej, to czas, po którym strona zaczyna reagować na dane wejściowe, czyli np. skrolowanie lub kliknięcia. Jeżeli czas blokowania jest długi (powyżej 50 ms), użytkownik może zauważyć opóźnienie i określić, że strona jest powolna lub niestabilna.

Speed Index (index prędkości)

Mierzy jaki procent strony jest wizualnie ukończony co 100ms. Speed Indeks mierzy w jakim stopniu strona jest kompletna w danym interwale czasowym. Poszczególne wyniki są następnie dodawane w celu obliczenia indeksu szybkości strony.

Largest Contentful Paint (LCP) (największa część treści)

Czas potrzebny na wyświetlenie największej części treści. Do największych części należą media, w tym zdjęcia (faza: czas wczytywania). Wniosek może sugerować wyświetlanie zasobów statycznych stosując efektywne zasoby pamięci podręcznej (buforowanie). Stosując efektywne zasoby pamięci podręcznej możemy przyspieszyć otwieranie się podstron.

Cumulative Layout Shift (skumulowane przesunięcie układu. CLS)

Im niższy wskaźnik tym lepiej. Wyższy wskaźnik informuje, że przesunięcia układu strony zakłócają korzystanie z witryny i zniechęcają użytkowników do przeglądania strony.

W ramach prac nad wydajnością strony wymagane może być:

  • wyeliminowanie zasobów blokujących renderowanie, co dotyczy zwłaszcza kodu JS i CSS, a w tym np. Google Fonts,
  • skrócenie czasu wykonywania JavaScriptu, a w tym wyeliminowanie kodów Google Tag Manager, TikTok, Facebook, itp..
  • minimalizacja aktywności głównego wątku,
  • ograniczenie wpływu kodu spoza witryny (Google Tag Manager, TikTok, Facebook, itp..),
  • eliminacja największego wyrenderowanego elementu, np. slider,
  • unikanie zbyt dużego drzewa DOM, czyli dużej ilości węzłów,
  • ograniczenie nieużywanego kodu CSS,
  • minifikacja plików CSS,
  • wyświetlanie obrazów w formatach nowej generacji,
  • wyświetlanie zasobów statycznych, stosując efektywne zasoby pamięci podręcznej,
  • nie używanie pasywnych detektorów do poprawy działania przewijania,
  • zmiana rozmiaru obrazów,
  • odłożenie ładowania obrazów poza ekranem,
  • ograniczenie nieużywanego JavaScript,
  • użycie efektywnego kodowania obrazów,
  • unikanie używania starszych skryptów JavaScript w nowoczesnych przeglądarkach,
  • unikanie bardzo dużych ładunków sieciowych,
  • unikanie długich zadań w wątku głównym,
  • unikanie dużych przesunięć układu,
  • unikanie nieskomponowanych animacji,
  • unikanie długiego czasu reakcji serwera,
  • unikanie tworzenia łańcuchów żądań krytycznych