Optymalizacja wydajności witryny w celu uzyskania lepszych pozycji w rankingach

Użytkownicy oczekują szybkich stron niezależnie od miejsca i urządzenia. Wydajność wpływa na wygodę, konwersje i widoczność. Zobacz, jak ją mierzyć i usuwać najważniejsze przeszkody.

Lepsza wydajność to lepsze doświadczenie użytkownika

Wyobraź sobie, że wchodzisz głodny do kawiarni i nikt Cię nie obsługuje. Prawdopodobnie pójdziesz gdzie indziej. Powolna strona wywołuje podobną frustrację.

Wolna strona zwiększa współczynnik odrzuceń

W internecie czekasz na załadowanie i reakcję strony. Słabe doświadczenie może skłonić użytkownika do powrotu do wyników, zanim zdąży wejść w interakcję.

Krok 1: zmierz wydajność

Zacznij od danych. Przetestuj kilka reprezentatywnych podstron na urządzeniach mobilnych i komputerach, a następnie sprawdź, czy głównym ograniczeniem jest serwer, sieć, renderowanie, skrypty, obrazy czy projekt strony.

PageSpeed Insights

PageSpeed Insights to narzędzie Google do analizy wydajności. Łączy testy laboratoryjne z dostępnymi danymi rzeczywistych użytkowników i pokazuje Core Web Vitals. Potraktuj zalecenia jako punkt wyjścia, a każdą poprawę potwierdź kilkoma testami oraz — jeśli to możliwe — danymi użytkowników.

Pingdom

Za pomocą Pingdom Website Speed Test możesz wybrać różne lokalizacje testowe oraz przeanalizować czas ładowania, rozmiar strony i każde żądanie. Wyniki mogą różnić się od PageSpeed Insights, ponieważ oba narzędzia korzystają z innych lokalizacji, urządzeń i metod testowania.

WebPageTest

Do bardziej szczegółowej analizy użyj WebPageTest. Możesz wybrać lokalizację, przeglądarkę, typ połączenia i urządzenie. Wykresy kaskadowe oraz nagrania wizualne pokazują, co ładuje się po kolei i gdzie użytkownicy odczuwają opóźnienia.

Krok 2: usuń najważniejsze wąskie gardła

Po znalezieniu przyczyn spowolnienia zacznij od zmian, które najbardziej poprawią doświadczenie użytkowników.

Najczęstsze przyczyny wolnego działania strony to:

...duże ilości danych,

nieskompresowane obrazy,

przeciążony motyw i

powolne bazy danych i serwery.

Sprawdź motyw i usuń zbędne wtyczki

Motyw WordPressa lub Joomla może wyglądać atrakcyjnie, a jednocześnie ładować dużo kodu, którego witryna nigdy nie wykorzystuje. Porównaj lżejsze opcje i przetestuj szablony, których faktycznie używasz, zamiast oceniać wydajność wyłącznie na podstawie strony demonstracyjnej.

Wtyczki mogą dodawać do każdej strony zapytania do bazy danych, skrypty i arkusze stylów. Sprawdź zainstalowane rozszerzenia, usuń nieużywane i w razie potrzeby zastąp te, które nie są już dobrze utrzymywane. Zmiany przetestuj najpierw w środowisku testowym.

Zmniejsz liczbę żądań HTTP

Każdy obraz, font, arkusz stylów i skrypt oznacza dodatkową pracę dla przeglądarki. Usuń nieużywane zasoby, ładuj funkcje tylko tam, gdzie są potrzebne, i ogranicz skrypty zewnętrzne, zanim zastosujesz bardziej złożone optymalizacje.

Wskazówka: minimalizuj CSS i usuwaj nieużywane reguły tam, gdzie ma to sens. Przy nowoczesnych wersjach HTTP połączenie wszystkich arkuszy stylów w jeden plik nie zawsze daje korzyści. Zmierz efekt, zamiast stosować tę technikę automatycznie.

Optymalizuj obrazy na potrzeby internetu

Obrazy często należą do najcięższych zasobów strony. Dopasuj ich wymiary, skompresuj je i korzystaj z wydajnych formatów, takich jak WebP lub AVIF, jeśli pozwalają na to jakość i kompatybilność. Dobieraj format do zawartości zamiast zawsze stosować tę samą regułę dla JPEG i PNG.

Jeśli obraz ma szerokość 2500 pikseli, ale jest wyświetlany tylko w rozmiarze 750 pikseli, użytkownik może mimo to pobierać większy plik. Przygotuj wersje responsywne i pozwól przeglądarce dobrać właściwe źródło do szerokości ekranu oraz gęstości pikseli.

Obrazy znajdujące się poza widocznym obszarem zwykle mogą ładować się dopiero wtedy, gdy są potrzebne. Nowsze wersje WordPressa obsługują lazy loading natywnie; w starszych instalacjach możesz użyć wtyczki takiej jak Crazy Lazy. Do automatycznej kompresji plików możesz wykorzystać także WP Smush.it — wtyczka automatycznie kompresuje nowe obrazy i potrafi zoptymalizować również wcześniej zapisane pliki. Przed masową optymalizacją sprawdź jakość i wykonaj kopię zapasową.

Włącz kompresję

Zasoby tekstowe, takie jak HTML, CSS i JavaScript, można kompresować podczas przesyłania za pomocą Brotli lub Gzip. Większość hostingów i platform cache pozwala włączyć to po stronie serwera. Jeśli nie masz takiej opcji, WordPress oferuje wtyczki, na przykład Gzip Ninja Speed Compression. Joomla i inne platformy mają podobne rozszerzenia, choć kompresją na serwerze zwykle łatwiej zarządzać w spójny sposób.

Korzystaj z pamięci podręcznej

Pamięć podręczna pozwala udostępniać wcześniej wygenerowane strony lub zasoby wielokrotnego użytku bez tworzenia wszystkiego od nowa przy każdym żądaniu. Użytkownicy WordPressa mają do wyboru wiele wtyczek; lekką opcją jest Cachify. W3 Total Cache oferuje więcej ustawień, natomiast WP Rocket to płatna alternatywa z prostszą, prowadzoną konfiguracją.

Dodatkowa wskazówka:

Możesz również minifikować HTML, CSS i JavaScript, aby zmniejszyć ilość przesyłanych danych. Na stronie, która już korzysta z kompresji, zysk może być niewielki, a zbyt agresywna konfiguracja może uszkodzić skrypty. Dlatego zawsze dokładnie testuj zmiany. Wtyczka W3 Total Cache zawiera ustawienia minifikacji, ale ręczna konfiguracja może być wymagająca. Prostszą, wyspecjalizowaną alternatywą jest Autoptimize.