Optymalizacja strony internetowej: 8 porad (100% w PageSpeed)

W internecie działam nie tylko jako twórca, ale i jako użytkownik. Właśnie dlatego tym bardziej cieszę się, że szybkość działania strony internetowej i jej układ mają coraz większy wpływ na odbiór użytkowników, a także na widoczność w wyszukiwarkach. Optymalizacja techniczna stron to zdecydowanie mój ulubiony aspekt całego SEO i z tego powodu podzielę się kilkoma ważnymi  wskazówkami.

Jeżeli chcesz przyspieszyć swoją stronę, poprawić wynik PageSpeed, albo po prostu przygotować się do Core Web Vitals – zapoznaj się z poniższymi wskazówkami. Przede wszystkim uzbrój się jednak w dużo cierpliwości i przygotuj się na długie analizy. Każda strona jest inna i nie ma jednego, uniwersalnego “złotego środka”.

Tak wygląda wynik testu PageSpeed dla serwisu webporady.pl. Strona działa na niedrogim, współdzielonym hostingu od MyDevil.net (kod rabatowy: 3FY9KGDFWX). Nie używam na niej nawet nahajpowanych bajerów pokroju LiteSpeed, czy Redis, a całość stoi na WordPress.

Zanim przejdziemy do konkretów, muszę tylko zaznaczyć, że nie ma co na siłę próbować wyciskać wyników pokroju 100/100. Dobry czas ładowania, brak problemów z CLS i już nawet 60-paro procentowe wyniki z reguły przechodzą podstawowe wskaźniki internetowe. Zadbaj przede wszystkim o użytkowników, nie flexuj na siłę suchych liczb. Sam bym tego u siebie nie robił, ale wyszło mi to dość przypadkowo, gdy poświęciłem około dwóch dni na testy wielu rozwiązań (nastawiałem się na coś pokroju 85-90%).

Przykład strony spełniającej wymagania ze znacznie niższymi procentami:

Wyniki webporady.pl

Zwykle różni się w zależności od konkretnej podstrony, na głównej powinno być kilka punktów niżej. Wszystko zależy m.in. od ilości obrazków i contentu (opisuję to niżej)

Na urządzeniach mobilnych:

Na komputerach:

Pochwaliłem się, Ty zobaczyłeś, że się da… To chyba możemy przejść do sedna sprawy. Oto 8 porad dotyczących optymalizacji naszych stron internetowych.

1. Zacznij od audytu

Strony internetowe nie są takie same. Jeśli liczyłeś na to, że podam Ci nazwę “sekretnej” wtyczki za 60 dolarów, która zrobi za Ciebie całą robotę – jesteś w złym miejscu. Nie chcę Cię tu na nic naciągać, bo z doświadczenia wiem, że magiczne rozwiązania nie zawsze muszą działać. Dobrze wykonana praca, powinna.  Oczywiście nazwy wtyczek też podam, ale niekoniecznie muszą być one gamechangerem, który załatwi całą sprawę.

Jeśli nie masz odpowiedniego zaplecza technicznego i nie potrafisz wprowadzać zmian w kodzie strony, możesz wynająć do tego osobę, która się w tym specjalizuje. Zanim zaczniecie jednak działać, warto dokładnie przeskanować całą stronę za pomocą kilku darmowych narzędzi. To one pomogą Ci zwrócić uwagę na zasoby, które znacznie opóźniają ładowanie Twojej strony. Takie narzędzia to między innymi PageSpeed Insights, Lighthouse (Chrome), czy GTmetrix.

Jeśli poprawimy układ strony, wyeliminujemy zbędne, długo ładujące się zasoby, a wyniki nadal będą kiepskie – wówczas powinniśmy rozważyć przeanalizowanie naszego kodu lub nawet zmianę hostingu. Przede wszystkim warto sprawdzić, czy wszystkie podstrony wyglądają równie źle (być może na którejś z nich mamy wyjątkowo obciążające zapytania do bazy danych) i czy sam kod nie wykonuje się zbyt wolno. Nawet doświadczony programista może przez przypadek napisać coś, co będzie muliło nawet na localhoście. Sam kupiłem kiedyś tzw. skrypt na jednej z największych tego rodzaju giełd. Miał bardzo pozytywne opinie, niezłą dokumentację i znanego autora – ogólnie super. Postawiony na nim serwis po jakimś czasie się odrobinę rozrósł i użytkownicy zaczęli zgłaszać wolne ładowanie się niektórych podstron. Okazało się, że jeden z mało istotnych modułów dotyczący statystyk był wdrożony w dość nieoptymalny sposób i jego wycięcie przyśpieszyło ładowanie tych stron o około 80%.

2. Responsywność i układ strony

Strona powinna być przystosowana zarówno do komputerów, jak i urządzeń mobilnych. Sam należę do tych, którzy praktycznie nie przeglądają internetu na telefonie, ale dobrze wiem, że ruch z urządzeń mobilnych w wielu przypadkach może stanowić nawet większość całego ruchu. Z tego powodu strona powinna dobrze dopasowywać się do takich urządzeń po to, żeby użytkownicy byli zadowoleni… I po to, żeby zrobić sobie dodatkowego boosta do SEO (a tak naprawdę, w obecnych czasach po prostu na tym nie ucierpieć – RWD to dziś standard).

Zobacz: Więcej na temat responsywności stron internetowych

Warto też zadbać o układ strony. W wyżej wymienionym narzędziu PageSpeed mamy tak zwany CLS, czyli Cumulative Layout Shift. Ma być on jednym ze składników aktualizacji Core Web Vitals. Chodzi przede wszystkim o to, żeby elementy strony “nie skakały” podczas jej ładowania i nie narażały użytkowników na przypadkowe kliknięcia. Z tego względu zamieszczając np. obrazki lub iframe’y warto nadawać im wymiarowe atrybuty. Tego rodzaju problem mogą powodować też np. zbyt późno włączające się reklamy.

3. Rozważ stosowanie pamięci podręcznej

Efektywne stosowanie pamięci podręcznej może znacząco przyśpieszyć ładowanie się treści naszym stałym użytkownikom. W przypadku WordPressa mogę polecić m.in. wtyczkę WP Fastest Cache, która pozwala w prosty sposób ustawić cache, zintegrować się z ewentualnym CDN jak CloudFlare i ustawić minifikację kodu.

4. Zmiana wielkości zdjęć i lazy-loading

Serwowanie zdjęć w zbyt dużej rozdzielczości to prawdziwy optymalizacyjny killer. Ich kompresja i dostosowywanie do mniejszego formatu pomaga zaoszczędzić naprawdę mnóstwo czasu przy ładowaniu. Na szczęście bardziej rozwinięte CMSy takie jak WordPress automatycznie zapisują obrazek w kilku mniejszych rozdzielczościach. Kwestia odpowiedniego skorzystania z tego benefitu przy dostosowywaniu tych zdjęć do szablonu to już zadanie dla jego autora lub dla osoby, która będzie poprawiać kwestie optymalizacyjne. W przypadku WordPress oprócz tego mogę polecić wtyczki pozwalające na kompresję zdjęć. Z darmowych i tych, które nie narzucają nam wielkich limitów mogę polecić np.  “Resize Image After Upload”.

Dość ważny jest też lazy-loading, czyli ładowanie zdjęć z opóźnieniem, już po załadowaniu pozostałej zawartości strony. Przyda się to szczególnie w przypadku bardziej obciążonych stron. Taki lazy-loading można wdrożyć samemu w kodzie szablonu lub można skorzystać z gotowej wtyczki.

5. Przemyśl własne serwowanie czcionek, nie przesadzaj z ich ilością

Serwowanie czcionek z CDNów ma swoje plusy. Problem może pojawiać się wtedy, gdy używacie linków np. z Google Fonts. Z doświadczenia wiem, że to właśnie te czcionki potrafiły zabierać mi cenne sekundy i co najmniej kilka-kilkanaście punktów w PageSpeedzie. Obecnie staram się je serwować bezpośrednio z mojego serwera. W tym przypadku mogę serdecznie polecić aplikację google-webfonts-helper, która pozwala je łatwo wyeksportować i hostować bezpośrednio u siebie.

6. Nie instaluj zbyt wielu wtyczek

Zwłaszcza początkujący adepci tworzenia stron internetowych przy pierwszym zetknięciu z popularnym CMSem instalują mnóstwo najróżniejszych wtyczek. Wiem, że wiele wygląda naprawdę fajnie, są bardzo kolorowe i mają dobre opinie… Ale to nie jest gra w “zbierz je wszystkie”, nawet pomimo tego, że są darmowe. Oprócz aspektów związanych z bezpieczeństwem strony, nadmierna ilość wtyczek może także obciążać jej działanie. Proponuję nie używać zbyt wielkiej ilości i ograniczać się wyłącznie do tego, czego w danym momencie potrzebujemy. W przypadku WordPress sam korzystam zwykle z ok. 10-15 wtyczek i już uważam, że jest to za dużo (a znam takich mających ponad 50).

7. Zoptymalizuj stronę główną

Strona główna bardzo często działa wolniej od podstron. Nie ma w tym za bardzo nic dziwnego, ale właśnie z tego względu nie powinniśmy jej nadmiernie przeładowywać. Nie polecam używania setek widgetów i innych zbędnych ozdobników, które wpłyną na jej wydajność. Rekomendowałbym też nie przesadzać z ilością postów (zwłaszcza wtedy, kiedy zamieszczamy miniaturki). Nie wiem jaki macie portal i ilu wpisów na stronie głównej potrzebujecie, ale gdyby udało Wam się zmieścić w ilościach 5-10 postów na stronę byłoby świetnie.

Odradzam też dodawanie treści postów na stronach głównych. W większości przypadków wystarczy tytuł i miniaturka. To zła praktyka zwłaszcza wtedy, gdy takie treści zabierają obrazki, albo gdy wyświetlamy długą część tekstu lub jego całość – wówczas taki zabieg oprócz dodatkowego spowalniania strony może przy okazji stanowić niechciany duplikat docelowego posta (aspekty SEO).

8. Pomyśl o wyłączeniu lub zredukowaniu ilości reklam

Reklamy są fajne, pomagają zarabiać i tak dalej. Tutaj wyliczenia należą do Ciebie. Nie mówię, że reklamy totalnie obciążają stronę, bo dobrze zoptymalizowana witryna poradzi sobie bez problemu nawet z kilkoma jednostkami. Nie zmienia to faktu, że obciążające reklamy pochodzące od zewnętrznych dostawców (nie mówię tu o zwykłych obrazkowych bannerach) potrafią odjąć nam nawet kilkadziesiąt punktów procentowych w PageSpeedzie, a co gorsze – opóźnić ładowanie całej strony o nawet kilka sekund.

Oczywiście nie sugerujcie się przesadnie wynikami, bo też nie chodzi o to, żeby zwariować. Dla chcącego nic trudnego i zaawansowani webmasterzy powinni jakoś poradzić sobie z optymalizacją nawet wtedy, kiedy reklam jest dość sporo. Niemniej, warto skalkulować to sobie na własną rękę i dokładnie zastanowić się, czy reklamy na naszej stronie aby na pewno są dobrym pomysłem.