Szybkość strony i sklepu: jak upanafotografa.pl uzyskał 100 punktów w PageSpeed

Klient nie widzi kodu strony, widzi tylko, czy strona się otwiera, czy każe na siebie czekać. Przy stronie fotografa ślubnego, która składa się głównie z dużych zdjęć, to szczególnie trudne zadanie. Na przykładzie upanafotografa.pl, strony na WordPressie, której projekt graficzny i wdrożenie przygotowaliśmy, pokazujemy, dlaczego szybkość ma znaczenie i co konkretnie zrobiliśmy, żeby uzyskać 100 punktów w Google PageSpeed Insights w teście mobilnym.

Dlaczego szybkość strony ma znaczenie

Szybkość wpływa na trzy rzeczy jednocześnie: na to, ilu odwiedzających zostanie na stronie, na pozycję w Google i na to, ile kosztuje każdy klik z reklamy.

• Odwiedzający. Większość ruchu na stronach usługowych i w sklepach pochodzi z telefonów, często na mobilnym internecie. Każda sekunda pustego ekranu to moment, w którym można wrócić do wyników wyszukiwania i kliknąć konkurencję.
• Google. Wskaźniki Core Web Vitals są jednym z sygnałów, które Google bierze pod uwagę przy ocenie strony. Nie zastąpią dobrych treści, ale przy podobnych treściach szybsza strona ma przewagę.
• Reklamy. Płacisz za kliknięcie, a nie za wyświetlenie strony. Jeśli strona ładuje się zbyt długo, część opłaconych kliknięć kończy się, zanim klient cokolwiek zobaczy.

W sklepie internetowym ta zależność jest jeszcze wyraźniejsza: wolna karta produktu albo koszyk to porzucone zamówienia, które nigdy nie pojawią się w panelu.

Co właściwie mierzy PageSpeed Insights

PageSpeed Insights pokazuje dwa rodzaje danych. Wynik od 0 do 100 pochodzi z testu Lighthouse, czyli pomiaru laboratoryjnego na symulowanym urządzeniu. Osobno, jeśli strona ma wystarczająco dużo ruchu, Google pokazuje dane od prawdziwych użytkowników Chrome. Najważniejsze wskaźniki to:

Sam wynik 100 nie jest celem samym w sobie. Jest za to dobrym sprawdzianem, że strona nie ma żadnego oczywistego problemu z wydajnością.

Dlaczego strona fotografa to trudny przypadek

Portfolio fotografa ślubnego żyje zdjęciami. Na stronie głównej upanafotografa.pl jest duże zdjęcie na pierwszym ekranie, galerie realizacji oraz opinie klientów pobierane z Google. Każdy z tych elementów to potencjalny hamulec: ciężkie pliki graficzne, dodatkowe skrypty z zewnętrznych serwerów i czcionki ładowane z innych domen. Rezygnacja z dużych zdjęć nie wchodziła w grę, bo to one sprzedają usługę. Trzeba było sprawić, żeby ładowały się mądrze.

Co zrobiliśmy na upanafotografa.pl

1. Własny, lekki motyw zamiast uniwersalnego szablonu

Strona działa na motywie przygotowanym od zera pod ten projekt. Nie ma w nim kodu do funkcji, z których strona nie korzysta, co często spowalnia gotowe, wielofunkcyjne szablony i page buildery.

2. Zdjęcia w odpowiednim rozmiarze i formacie

Każde zdjęcie ma kilka wersji rozmiarowych, a przeglądarka sama wybiera tę dopasowaną do ekranu. Telefon nie pobiera pliku przygotowanego dla monitora 4K. Tam, gdzie to możliwe, strona serwuje lżejszy format WebP. Zdjęcia mają też podane wymiary, dzięki czemu układ nie przeskakuje w trakcie ładowania.

3. Priorytet dla pierwszego ekranu

Główne zdjęcie na górze strony jest wczytywane z najwyższym priorytetem, zanim przeglądarka zajmie się resztą. Zdjęcia w niższych sekcjach ładują się dopiero wtedy, gdy użytkownik do nich przewinie. To bezpośrednio poprawia LCP.

4. Skrypty uruchamiane dopiero wtedy, gdy są potrzebne

Analityka, widżet opinii i galeria z powiększaniem zdjęć nie blokują wyświetlenia strony. Skrypty są zminifikowane, a te, które nie są potrzebne do pierwszego widoku, uruchamiają się z opóźnieniem. Za tę część odpowiada skonfigurowany WP Rocket.

5. Odchudzony CSS i czcionki z własnego serwera

Arkusze stylów są zminifikowane, a tła z obrazami ładowane leniwie. Czcionki są hostowane lokalnie, więc przeglądarka nie musi łączyć się z dodatkowym serwerem, żeby wyświetlić tekst.

6. Cache i CDN

Strony są zapisywane w pamięci podręcznej jako gotowe pliki, więc serwer nie musi ich za każdym razem budować od nowa w PHP i bazie danych. Pliki statyczne są dostarczane przez CDN.

Efekt: 100 punktów w Google PageSpeed Insights na urządzeniach mobilnych, czyli w trudniejszym z dwóch testów, dla strony, która nadal pokazuje duże, wyraźne zdjęcia, opinie klientów i pełne portfolio.

A co ze sklepem internetowym?

Te same zasady działają w sklepie na WooCommerce, PrestaShop czy Shopify, ale sklep ma swoje dodatkowe wyzwania:

• Listy produktów z dziesiątkami miniatur, które muszą mieć właściwy rozmiar i ładować się leniwie.
• Moduły i wtyczki, które dokładają skrypty na każdej podstronie, także tam, gdzie nie są używane.
• Koszyk i zamówienie, których nie da się w całości zapisać w cache, więc liczy się wydajność samego serwera i bazy danych.
• Skrypty marketingowe, czyli piksele reklamowe, czaty i widżety opinii. Każdy z nich warto ocenić pod kątem tego, czy jego koszt w szybkości jest wart tego, co daje.

W sklepie rzadziej celujemy w okrągłe 100 punktów, a częściej w to, żeby kluczowe widoki, czyli strona główna, kategoria i karta produktu, mieściły się w zielonych progach Core Web Vitals dla prawdziwych użytkowników.

Jak sprawdzić swoją stronę w 5 minut

1. Wejdź na pagespeed.web.dev i wpisz adres strony głównej.
2. Patrz najpierw na wynik dla urządzeń mobilnych, bo tam problemy są najczęstsze.
3. Jeśli widzisz sekcję z danymi od prawdziwych użytkowników, sprawdź, czy LCP, INP i CLS są zielone.
4. Powtórz test dla najważniejszej podstrony: oferty, kategorii albo karty produktu, a nie tylko strony głównej.
5. Przejrzyj listę „Możliwości” i „Diagnostyka”. Zwykle pokazuje, czy problemem są zdjęcia, skrypty czy serwer.

Jeśli wyniki są czerwone albo pomarańczowe i nie wiesz, od czego zacząć, napisz do nas. Sprawdzimy, co spowalnia Twoją stronę lub sklep, i podpowiemy, co da największą poprawę przy najmniejszym nakładzie pracy.