D-119P1 · krytyczne
Audyt Core Web Vitals
Mierzymy trzy wskaźniki Core Web Vitals, czyli LCP, INP i CLS, na danych od użytkowników i w testach laboratoryjnych. Analizujemy osobno wersję mobilną i desktopową oraz różne typy stron, bo każdy szablon ma inne źródła problemów.
Jak to robimy
- Pobieramy dane polowe z raportu Core Web Vitals w Search Console i z PageSpeed Insights.
- Wybieramy reprezentatywne adresy dla strony głównej, kategorii, produktów, wpisów i landing page'y.
- Porównujemy wyniki z progami Google: LCP do 2,5 s, INP do 200 ms i CLS do 0,1.
- Uruchamiamy testy laboratoryjne w Lighthouse, żeby wskazać elementy odpowiedzialne za słabe wyniki.
Co otrzymujesz
Dostajesz raport stanu Core Web Vitals dla każdego typu strony z listą przyczyn i priorytetów naprawy. Ten raport wyznacza kolejność dalszych prac nad LCP, INP i CLS.
Kiedy i w jakiej formie: Miesięcznie/kwartalnie; CrUX, PSI, GSC
D-120P1 · krytyczne
Optymalizacja LCP
LCP mierzy, jak szybko pojawia się największy element w pierwszym widoku strony, najczęściej obraz hero lub nagłówek. Skracamy ten czas przez pracę nad obrazami, fontami, serwerem, blokującym CSS i JS oraz cache. Zaczynamy od najważniejszych landing page'y.
Jak to robimy
- Ustalamy, który element jest liczony jako LCP na każdym ważnym szablonie.
- Zmniejszamy i kompresujemy obraz hero, a potem nadajemy mu wysoki priorytet ładowania.
- Przenosimy blokujący CSS i JS tak, aby nie wstrzymywał renderowania pierwszego widoku.
- Sprawdzamy czas odpowiedzi serwera i konfigurację cache, bo wolny serwer opóźnia cały proces.
Co otrzymujesz
Otrzymujesz wdrożone poprawki LCP na priorytetowych stronach oraz pomiar przed zmianami i po nich. Celem jest wynik poniżej progu 2,5 s w danych od użytkowników.
Kiedy i w jakiej formie: Po audycie wydajności
D-121P1 · krytyczne
Optymalizacja INP
INP mierzy, jak szybko strona reaguje na kliknięcia, dotknięcia i wpisywanie tekstu. Ograniczamy ciężki JavaScript, zbędne wtyczki i tagi marketingowe, które blokują przeglądarkę długimi zadaniami i opóźniają reakcję.
Jak to robimy
- Testujemy interakcje podatne na opóźnienia: formularze, koszyk, filtry, menu mobilne i wyszukiwarkę wewnętrzną.
- Identyfikujemy długie zadania JavaScript i przypisujemy je do konkretnych skryptów oraz wtyczek.
- Usuwamy lub odchudzamy niepotrzebne wtyczki, a pozostałe skrypty ładujemy później.
- Dzielimy ciężkie operacje na mniejsze części, żeby przeglądarka szybciej odpowiadała użytkownikowi.
Co otrzymujesz
Dostajesz listę źródeł opóźnień oraz wdrożone zmiany w skryptach i wtyczkach. Strona reaguje na działania użytkownika bez zauważalnego zawieszania, a celem jest INP poniżej 200 ms.
Kiedy i w jakiej formie: Po audycie + monitoring
D-122P1 · krytyczne
Optymalizacja CLS
CLS opisuje, jak bardzo treść przesuwa się podczas ładowania strony. Rezerwujemy miejsce na obrazy, reklamy, banery, fonty i moduły dynamiczne, żeby przycisk lub formularz nie uciekał spod palca użytkownika.
Jak to robimy
- Nagrywamy ładowanie ważnych szablonów i wskazujemy elementy, które przesuwają układ.
- Dodajemy wymiary width i height do obrazów oraz stałe kontenery na reklamy i banery.
- Ustawiamy ładowanie fontów tak, aby zamiana kroju pisma nie zmieniała wysokości tekstu.
- Rezerwujemy stałe miejsce na elementy wstawiane dynamicznie, na przykład paski informacyjne i moduły polecanych treści.
Co otrzymujesz
Otrzymujesz stabilny układ stron, w którym CTA, formularze i główna treść nie zmieniają położenia. Celem jest CLS poniżej 0,1 w danych od użytkowników.
Kiedy i w jakiej formie: Po audycie szablonów
D-123P1 · krytyczne
Mobile UX
Przechodzimy przez stronę na smartfonie tak, jak robi to Twój klient. Oceniamy czytelność fontów, odstępy, formularze, menu, elementy przyklejone, pop-upy, koszyk, klikalne numery telefonu, mapy i dostępność CTA.
Jak to robimy
- Testujemy najważniejsze ścieżki na różnych urządzeniach i szerokościach ekranu, od wejścia do konwersji.
- Sprawdzamy, czy przyciski i linki mają rozmiar oraz odstępy pozwalające trafić je kciukiem.
- Weryfikujemy działanie klikalnego numeru telefonu, mapy i formularza bez powiększania ekranu.
- Wskazujemy przyklejone paski i pop-upy, które zasłaniają treść lub przycisk zakupu.
Co otrzymujesz
Dostajesz listę problemów mobilnych ze zrzutami ekranu i priorytetami poprawek. Po wdrożeniu klient na telefonie bez przeszkód dociera do kontaktu lub zakupu.
Kiedy i w jakiej formie: Start + kwartalnie
D-124P1 · krytyczne
Parytet mobile/desktop
Google indeksuje strony głównie na podstawie wersji mobilnej, dlatego musi ona zawierać wszystko, co ważne. Porównujemy obie wersje pod kątem treści głównej, linków, metadanych, schema, obrazów i funkcji potrzebnych do konwersji.
Jak to robimy
- Crawlujemy serwis z agentem mobilnym i desktopowym, a następnie zestawiamy wyniki dla tych samych adresów.
- Szukamy treści, linków i sekcji ukrytych lub usuniętych w wersji mobilnej.
- Porównujemy tytuły, meta description, canonical, dane strukturalne i atrybuty alt obrazów.
- Sprawdzamy, czy na telefonie działają te same funkcje, na przykład filtry, kalkulatory i formularze.
Co otrzymujesz
Otrzymujesz zestawienie różnic między wersjami z rekomendacją dla każdej z nich. Wersja mobilna, którą ocenia Google, zawiera pełną treść i wszystkie ważne elementy.
Kiedy i w jakiej formie: Po zmianach szablonów
D-125P2 · ważne
Cache i CDN
Konfigurujemy cache strony, cache obiektów, sieć CDN, kompresję gzip lub brotli oraz cache przeglądarki. Ustawiamy reguły dla zasobów statycznych i wyjątki dla koszyka oraz stron dynamicznych, żeby klienci nie widzieli nieaktualnych danych.
Jak to robimy
- Sprawdzamy nagłówki odpowiedzi serwera i ustalamy, co dziś trafia do cache i na jak długo.
- Włączamy cache stron oraz cache obiektów po stronie serwera lub systemu CMS.
- Ustawiamy długi czas przechowywania obrazów, stylów i skryptów oraz kompresję plików tekstowych.
- Wyłączamy z cache koszyk, konto klienta i proces zamówienia, a potem testujemy te ścieżki.
Co otrzymujesz
Dostajesz działającą konfigurację cache i CDN z opisem reguł oraz wyjątków. Strony ładują się szybciej, a dynamiczne sekcje sklepu pokazują aktualne dane.
Kiedy i w jakiej formie: Start + po zmianach hostingu
D-126P2 · ważne
Optymalizacja obrazów
Obrazy to zwykle największa część wagi strony. Wdrażamy formaty WebP lub AVIF, kompresję, właściwe wymiary, atrybut srcset i lazy-load poniżej pierwszego ekranu. Porządkujemy też nazwy plików i teksty alternatywne.
Jak to robimy
- Wyszukujemy obrazy zbyt duże względem miejsca, w którym są wyświetlane, i zmniejszamy je.
- Konwertujemy grafiki do WebP lub AVIF z zachowaniem wersji zapasowej dla starszych przeglądarek.
- Dodajemy srcset, żeby telefon pobierał mniejszy plik niż monitor komputera.
- Włączamy leniwe ładowanie poniżej pierwszego ekranu i piszemy alt tam, gdzie obraz niesie informację.
Co otrzymujesz
Otrzymujesz zoptymalizowaną bibliotekę obrazów i poprawione szablony. Strony są lżejsze, a opisowe nazwy plików i teksty alternatywne pomagają w wyszukiwarce grafik.
Kiedy i w jakiej formie: Stała obsługa + przy publikacji
D-127P2 · ważne
Optymalizacja fontów
Ograniczamy liczbę rodzin i wariantów fontów, bo każdy dodatkowy plik opóźnia wyświetlenie tekstu. Ustawiamy właściwość font-display, preload najważniejszych krojów i, gdy ma to sens, hostowanie fontów na własnym serwerze.
Jak to robimy
- Spisujemy wszystkie ładowane fonty i sprawdzamy, które warianty grubości faktycznie występują na stronie.
- Usuwamy nieużywane warianty i zostawiamy tylko te, których wymaga projekt graficzny.
- Dodajemy font-display i preload dla fontu nagłówków lub treści widocznej w pierwszym ekranie.
- Mierzymy wpływ zmian na LCP i CLS, bo zamiana kroju potrafi przesunąć układ.
Co otrzymujesz
Dostajesz odchudzony zestaw fontów z nową konfiguracją ładowania. Tekst pojawia się szybciej i nie skacze po podmianie kroju pisma.
Kiedy i w jakiej formie: Po audycie wydajności
D-128P2 · ważne
Skrypty zewnętrzne
Przeglądamy skrypty firm zewnętrznych: tagi reklamowe, mapy ciepła, czaty, widżety, piksele i biblioteki. Nieużywane usuwamy. Pozostałe ładujemy warunkowo albo z opóźnieniem, jeśli nie są potrzebne od razu.
Jak to robimy
- Tworzymy spis skryptów zewnętrznych z informacją, kto ich używa i do czego służą.
- Mierzymy, ile czasu i transferu zajmuje każdy skrypt podczas ładowania strony.
- Uzgadniamy z Tobą usunięcie narzędzi, z których nikt nie korzysta lub które się dublują.
- Przenosimy pozostałe tagi do Tag Managera i uruchamiamy je tylko na stronach, gdzie są potrzebne.
Co otrzymujesz
Otrzymujesz spis skryptów z decyzją dla każdego i wdrożone zmiany w ładowaniu. Strona pobiera mniej kodu zewnętrznego, a pomiar marketingowy działa dalej.
Kiedy i w jakiej formie: Kwartalnie
D-129P2 · ważne
Pop-upy i interstitiale
Pop-up zasłaniający treść zaraz po wejściu irytuje użytkownika i może obniżyć ocenę strony w wyszukiwarce. Sprawdzamy, czy okna nie blokują dostępu do głównej zawartości, szczególnie na telefonach. Gdy przeszkadzają, zmieniamy ich moment wyświetlenia oraz rozmiar.
Jak to robimy
- Spisujemy wszystkie pop-upy, paski i okna modalne wraz z warunkami ich wyświetlania.
- Sprawdzamy na smartfonie, czy okno zasłania treść i ma wygodny przycisk zamknięcia.
- Przesuwamy pokazanie okna na dalszą część wizyty lub zamieniamy je na mniejszy pasek.
- Zostawiamy komunikaty wymagane prawem, na przykład baner zgód, ale dbamy o ich wygodną obsługę.
Co otrzymujesz
Dostajesz nowe zasady wyświetlania pop-upów i poprawione ustawienia okien. Użytkownik od razu widzi treść, a komunikaty marketingowe pojawiają się w mniej inwazyjnej formie.
Kiedy i w jakiej formie: Kwartalnie
D-130P3 · rozwojowe
Podstawowa dostępność
Przeprowadzamy podstawowy przegląd dostępności: kontrast, widoczny fokus, teksty alternatywne, etykiety formularzy, strukturę nagłówków i obsługę menu. Poprawki pomagają osobom z niepełnosprawnościami i przy okazji porządkują strukturę treści dla robotów.
Jak to robimy
- Sprawdzamy kontrast tekstu i przycisków względem tła na najważniejszych szablonach.
- Przechodzimy stronę samą klawiaturą, oceniając widoczność fokusu i obsługę menu.
- Weryfikujemy etykiety pól formularzy oraz teksty alternatywne obrazów niosących informację.
- Porządkujemy hierarchię nagłówków tak, aby każda strona miała jeden H1 i logiczne sekcje.
Co otrzymujesz
Otrzymujesz listę problemów dostępności z priorytetami i wdrożone poprawki podstawowe. Strona staje się łatwiejsza w obsłudze, a jej struktura czytelniejsza dla wyszukiwarek.
Kiedy i w jakiej formie: Kwartalnie
