Optymalizacja szybkości ładowania strony

Dzisiaj na przykładzie tej strony omówimy, jak można zoptymalizować jakość i szybkość ładowania dla serwisu PageSpeed Insights.

Co to jest PageSpeed Insights?

PageSpeed Insights to darmowe narzędzie od Google, przeznaczone do analizy wydajności stron internetowych. Zapewnia ono ocenę szybkości ładowania stron i oferuje rekomendacje dotyczące ich poprawy, aby zwiększyć wydajność i doświadczenia użytkowników. Serwis jest dostępny zarówno dla urządzeń mobilnych, jak i stacjonarnych, i ocenia strony według szeregu kryteriów, dostarczając szczegółowych raportów i rekomendacji.

PageSpeed Insights pomaga webmasterom, deweloperom i specjalistom SEO zrozumieć, jak ich strony działają w rzeczywistych warunkach, oraz jakie konkretne kroki można podjąć, aby je poprawić. Poprawa wskaźników, które narzędzie sugeruje, nie tylko pozytywnie wpływa na doświadczenia użytkowników, ale również przyczynia się do wyższych pozycji w wynikach wyszukiwania Google.

Podstawowa optymalizacja strony

Podczas tworzenia szablonu kierowałem się następującymi zasadami:

• Kodowanie w czystym HTML i CSS;
• Dodawanie interaktywności tylko w czystym JavaScript;
• Unikanie użycia jakichkolwiek frameworków, takich jak Bootstrap czy jQuery;
• Przechowywanie czcionek lokalnie na serwerze wraz z szablonem strony;
• Używanie zoptymalizowanych dla internetu formatów czcionek, np. woff.

Dzięki rezygnacji z frameworków i przejściu na czysty HTML, CSS i JavaScript udało się znacznie zmniejszyć rozmiar plików ładowanych podczas inicjalizacji strony, co pozytywnie wpłynęło na szybkość ładowania.

Rezygnacja z przechowywania czcionek na zewnętrznych serwisach, takich jak Google Fonts, również pozytywnie wpływa na szybkość ładowania strony. Przy odpowiedniej konfiguracji, ładowanie czcionek nie będzie blokować kolejki ładowania i zwiększać czasu ładowania strony.

Używanie nowoczesnych formatów czcionek pozwala na znaczne zmniejszenie zużycia transferu danych. Na przykład, ta sama czcionka w formacie ttf waży 103 KB, a w formacie woff2 – tylko 15 KB. Różnica jest prawie siedmiokrotna!

Dla optymalizacji SEO instalujemy wtyczkę AIO SEO, przeprowadzamy wstępną konfigurację i wysyłamy stronę do sprawdzenia.

Wyniki po wstępnej optymalizacji

Jak widać, nawet tak proste kroki pozwoliły osiągnąć niemal idealne rezultaty. I to bez konfiguracji cache’owania i kompresji danych.

Konfiguracja cache’owania

Konfigurujemy cache’owanie przez wtyczkę WP Fastest Cache i sprawdzamy, jak to wpływa na wyniki. Cache’owanie nieco zwiększyło indeks szybkości ładowania strony, co jest pozytywnym wynikiem.

Poprawianie błędów

Test wykazał 3 niekrytyczne błędy związane z dostępnością:

• Kolory tła i pierwszego planu linków do kategorii strony są zbyt mało kontrastowe;
• Tekst linku do mojego profilu na LinkedIn nie jest widoczny dla programów odczytujących ekran;
• Elementy nagłówków nie są umieszczone kolejno w porządku malejącym.

Zaczniemy od najprostszego: sprawimy, by tekst linku był widoczny dla programów odczytujących ekran.

Dlaczego pojawił się ten problem? Chodzi o to, że jeśli spojrzeć na znacznik HTML linku, okaże się, że między otwierającym a zamykającym tagiem <a></a> nie ma żadnego tekstu, a to jest problem. Aby nie zmieniać struktury HTML i nie marnować czasu, po prostu dodałem atrybut title do tego linku. Problem rozwiązany.

Następny w kolejce jest błąd związany z kolejnością nagłówków.

Co tutaj jest nie tak? Na stronie używane są nagłówki <h1> i <h2>, a w stopce strony od razu<h5>. Widać, że nagłówki nie są kolejno, i to nie podoba się naszemu narzędziu do sprawdzania. Naprawienie tego nie jest trudne: wystarczy zamienić nagłówki <h5> w szablonie na <h3> i zrobić to samo w plikach stylów. Gdy tylko zmiany zostaną wprowadzone, zapominamy o tym problemie.

Ostatni problem, który zamierzam rozwiązać, dotyczy kontrastu między białym tekstem nazwy kategorii, do której należy wpis, a jej czerwoną ramką. Obecnie współczynnik kontrastu wynosi 3.86, a minimalny wymagany to 7.1. Po przetestowaniu z kalkulatorem kontrastu okazało się, że trzeba lekko przyciemnić czerwony kolor i zwiększyć rozmiar tekstu.

I tak oto ostatni błąd został naprawiony. Teraz strona będzie wyglądała jak najlepiej w oczach Google.

Wyniki optymalizacji witryny