Szybkość wczytywania strony to jeden z ważniejszych czynników jej wartości zarówno dla seo, jak i użytkowników. I nie ma tu nic dziwnego, bo każdy lubi jak podstrony przeskakują płynnie i nie trzeba czekać po kilka sekund na załadowanie wyników. Na rynku jest wiele narzędzi wspomagających sprawdzanie szybkości wczytywania strony – fast page speed od pingdoma, gtmetrix czy pagespeed insights od google. I temu ostatniemu przyjrzymy się z bliska.

Kilka miesięcy temu przy zakładaniu hostmark.pl zdecydowałem się na postawienie wszystkiego na wordpressie ze skórką z themeforest . Jak powszechnie wiadomo szablony z tego serwisu w większości są nastawione na to by miały jak najwięcej ulepszeń w postaci animacji, przejść, szybkiego tworzenia elementów na stronie czy całych podstron, co nie zawsze idzie w parze z szybkością i wydajnością.

Najczęściej pojawiające się uwagi to:

• Zoptymalizuj obrazy
• Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie
• Wykorzystaj pamięć podręczną przeglądarki
• Zmniejsz JavaScript
• Włącz kompresję
• Zmniejsz HTML
• Zmniejsz CSS
• Skróć czas odpowiedzi serwera

Omówmy pokrótce każdy z nich:

Zoptymalizuj obrazy

Tutaj zazwyczaj mamy dwie wytyczne:

• kompresja https://adres.witryny/obraz.jpg pozwoli zaoszczędzić xx% (xx kb)
• kompresja i zmiana rozmiaru https://adres.witryny/obraz.jpg pozwoli zaoszczędzić xx% (xx kb)

Pierwsza wytyczna tyczy się jakości obrazu – krótko mówiąc jeśli nie jesteś fotografem gdzie zdjęcia faktycznie muszą być wysokiej jakości warto dokonać kompresji obrazków .
Można to zrobić dwoma narzędziami – jednym to kompresji png i drugim do kompresji jpg. Wystarczy wgrać obrazki na wskazane witryny, dokonać automatycznej kompresji i po ich pobraniu umieścić spowrotem na stronie.

Druga, a w zasadzie fragment “i zmiana rozmiaru” pojawia się wtedy, gdy wczytywany jest obraz o pełnym rozmiarze  i zmniejszany ręcznie w kodzie za pomocą ustawienia “width” czy “height”. W tym przypadku zależy wziąść pod uwagę czy obraz jest zmniejszony w tym miejscu celowo ( np miniaturka wpisu), i czy zmiana jego rozmiaru nie spowoduje problemów na stronie docelowej. Decyzje czy zmniejszać obrazek, czy używać osobnej wersji jako miniaturki i stronie docelowej zostawiam tobie – dwie wersje to zawsze więcej zajętego miejsca.
Prawda że proste?

Zmniejsz css/javascript/html

Tutaj również wymagana jest od Nas podstawowa znajomość obsługi stron, a całą resztę zrobią narzędzia online. Podobnie jak w kompresji obrazków wystarczy otworzyć plik który powinien ulec zmniejszeniu, skopiować jego zawartość i wgrać w jedno z bezpłatnych narzędzi dostępnych w google – dla css polecam szukanie pod frazą “css minifier”, dla pozostałych ormatów zmieniamy pierwszy człon.

Wykorzystaj pamięć podręczną przeglądarki

W większości przypadków głównym serwerem www jest nadal apache – modułem odpowiedzialnym za powyższy punkt jest mod_expires.
Wystarczy więc dodać do pliku .htaccess następujący kod:

Skróć czas odpowiedzi serwera

Ten punkt specjalnie zostawiłem na koniec. Dlaczego? Bo większość osób które pierwszy raz zrobią test i widzą ten komunikat odrazu pisze do firmy hostingowej że serwer długo odpowiada