Wtyczka miała przyspieszyć stronę. Dlaczego teraz wszystko skacze?

Instalujesz wtyczkę do przyspieszania strony. Włączasz opóźnianie JavaScriptu, asynchroniczny CSS i lazy loading — najlepiej wszystko naraz, bo każde ustawienie brzmi jak obietnica.

Wynik rośnie. Strona zaczyna mrugać, menu pojawia się po chwili, a tekst ucieka spod palca.

Gratulacje: test jest szczęśliwy. Klient trochę mniej.

Zdjęcie: Call Me Fred / Unsplash

„Szybciej” nie zawsze oznacza „lepiej”

Wtyczka optymalizacyjna nie zna celu Twojej strony. Nie wie, że najważniejszy przycisk znajduje się w pierwszym ekranie, formularz ma być gotowy od razu, a menu na telefonie nie może przez sekundę udawać dekoracji.

Ona widzi pliki. CSS, JavaScript, obrazy, fonty i zapytania. Próbuje je zmniejszyć, opóźnić albo załadować w innej kolejności. Czasem świetnie. Czasem tak skutecznie, że człowiek przez chwilę ogląda stronę bez stylów, przesuwający się nagłówek albo przycisk, który jeszcze nie działa.

Trzy ustawienia, które najczęściej wyglądają niewinnie

1. Asynchroniczne ładowanie CSS

CSS odpowiada za wygląd strony. Jeśli zostanie załadowany za późno, przeglądarka najpierw pokazuje „surową” treść, a dopiero po chwili układa ją tak, jak zaprojektowano.

To właśnie wtedy nagłówek potrafi zmienić wysokość, tekst przeskakuje, a sekcja hero nagle wskakuje na swoje miejsce. Technicznie strona się ładuje. Wizualnie wygląda, jakby składała się przy kliencie.

2. Opóźnianie JavaScriptu

JavaScript obsługuje między innymi menu, formularze, slidery, zgody cookies i różne elementy interaktywne. Opóźnienie go może poprawić wynik testu, ale może też sprawić, że strona jest już widoczna, choć jeszcze nie jest gotowa do użycia.

Klient klika. Nic się nie dzieje. Klika drugi raz. Potem wraca do Google, bo nie przyszedł na stronę testować naszej cierpliwości.

3. Lazy loading i priorytet wszystkiego

Leniwe ładowanie ma sens dla treści, której jeszcze nie widać. Gorzej, gdy obejmuje zdjęcie otwierające stronę albo element potrzebny od razu. Podobnie działa wysoki priorytet: jeśli dostaje go kilka obrazów, przeglądarka nadal musi zgadywać, który naprawdę jest ważny.

Jeśli wszystko jest priorytetem, nic nim nie jest.

Jak sprawdzić, czy „optymalizacja” nie popsuła strony?

Nie trzeba od razu rozumieć każdego technicznego skrótu. Trzeba za to przestać oceniać stronę wyłącznie po jednej zielonej liczbie.

1. Zapisz obecne ustawienia albo wykonaj kopię. Musisz mieć drogę powrotu.
2. Włączaj jedną funkcję naraz. Po zmianie wyczyść pamięć podręczną i sprawdź stronę w trybie incognito.
3. Zacznij od telefonu. Otwórz stronę główną, ofertę lub produkt, kontakt oraz formularz. W sklepie przejdź również koszyk i zamówienie.
4. Patrz, nie tylko mierz. Czy tekst przeskakuje? Czy font zmienia się po chwili? Czy menu i przyciski reagują od razu?
5. Dopiero potem uruchom testy i porównaj LCP, CLS oraz INP. Wynik ma potwierdzać dobre doświadczenie, a nie je zastępować.
6. Sprawdź jeszcze raz po aktualizacji motywu, kreatora lub wtyczki. To, co działało miesiąc temu, nie musi zachować się identycznie po zmianie kodu.

Nie instaluj kolejnej wtyczki, żeby naprawić poprzednią

Kiedy po optymalizacji coś miga albo skacze, odruch jest prosty: dołożyć następne narzędzie. Jedno od CSS, drugie od obrazów, trzecie od cache, czwarte od sprzątania po pierwszych trzech.

Tymczasem problemem często nie jest brak funkcji. Problemem jest ich nadmiar, konflikt albo ustawienie bez sprawdzenia, co dana strona naprawdę potrzebuje załadować jako pierwsze.

Dobra optymalizacja nie polega na zaznaczeniu wszystkich pól. Polega na znalezieniu równowagi między wynikiem technicznym a tym, co widzi i może zrobić człowiek.

Jeżeli raport ładuje się szybciej, a klient gubi przycisk, nie zoptymalizowałaś strony. Zoptymalizowałaś raport.