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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg"access plus 1 year"
ExpiresByType image/jpg"access plus 1 year"
ExpiresByType image/jpeg"access plus 1 year"
ExpiresByType image/gif"access plus 1 year"
ExpiresByType image/png"access plus 1 year"
ExpiresByType text/css"access plus 1 month"
ExpiresByType application/pdf"access plus 1 month"
ExpiresByType text/x-javascript"access plus 1 month"
ExpiresByType application/x-shockwave-flash"access plus 1 month"
ExpiresByType image/x-icon"access plus 1 year"
ExpiresDefault"access plus 1 month"
</IfModule>
|
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