Do zoptymalizowania witryny pod kątem wyszukiwarek internetowych (SEO) oraz budowy współczynnika konwersji kluczowym elementem jest szybkość działania strony
Jeżeli zależy Ci na wysokich osiągnięciach, zwróć szczególną uwagę na aspekt działania Twojej witryny. Dodatkowo szybkość działania Twojej strony wpłynie na odbiór użytkownika (UX – user experience), nad którym również należy się skupić – strona internetowa jest wizytówką biznesu, a więc pierwsze wrażenie jakie wywoła Twoja strona na użytkowniku, wpływa na jego odbiór Twojej działalności.
Biorąc pod uwagę powyższe aspekty, przedstawię kilka sposób na poprawę jakości działania Twojej witryny.
Narzędzia, dzięki którym dowiesz się jakie kroki podjąć:
Jednym z najpopularniejszych narzędzi do sprawdzania szybkości strony jest Google PageSpeed Insights. W artykule wykorzystamy narzędzie od Google do przedstawienia przykładowych problemów.
Kilka dodatkowych narzędzi, które pomogą zwiększyć szybkość strony:
– Gtmetrix.com
– Load Impact
– Varvy
Przeprowadzając analizę strony przy użyciu PageSpeed Insights. otrzymujemy wynik szybkości w skali 0-100 oraz listę elementów, które możemy poprawić aby zwiększyć nasz wynik. Dodatkowym atutem tego narzędzia jest podgląd szybkości działania naszej witryny zarówno na urządzeniach mobilnych jaki i komputerach.
Dane laboratoryjne:
Pierwsze wyrenderowanie treści – Jest to pojawienie się na ekranie głównej zawartości. Czas od rozpoczęcia ładowania strony do pojawienia się pierwszego elementu interfejsu
Indeks szybkości – Odstęp czasu, w którym witryna przestaje się zmieniać wizualnie (zostaje załadowana cała zawartość strony – wideo, zdjęcia).
Czas to pełnej interaktywności – Informacja po jakim czasie strona: jest załadowana, odpowiedź na działania użytkownika jest mniejsza niż 50 ms oraz kiedy obsługa elementów znajdujących się na stronie jest możliwa.
Pierwsze wyrenderowanie elementu znaczącego – Google sprawdza załadowanie wszystkich czcionek oraz głównego elementu strony
CPU bezczynny po raz pierwszy – jest to czas, kiedy procesor urządzenia, na którym zostaie otwarta strona jest wolny od ładowania i gotowy do przetwarzania działań użytkownika (strona reaguje na działania użytkownika bez dużego opóźnienia).
Metody na zwiększenie osiągnięć witryny
Do poprawy wyników można wykorzystać podstawowe sposoby, które nie powinny sprawiać problemów nawet osobom, które nigdy wcześniej nie interesowały się tematem poprawy szybkości działania. Poniżej przedstawiam kilka z nich.
Wersja PHP
Jednym z podstawowych czynników wpływających na szybkość działania strony jest wersja PHP na serwerze. Warto przejść na wyższa wersję (Im wyższa wersja, tym szybciej będzie działała nasz strona). Dodatkowo takim działaniem możemy zwiększyć bezpieczeństwo naszej witryny.
Do sprawdzenia wersji PHP, możesz skorzystać z pliku phpinfo.php
phpinfo();
Plik należy umieścić na serwerze i wywołać z poziomu przeglądarki używając adresu kierującego do wybranego katalogu.
Np. Jeżeli plik znajduje się w katalogu głównym Twojej witryny możesz wpisać https://domena.pl/phpinfo.php (używając nazwy Twojej domeny).
W przypadku WordPressa sugeruje zastosować wersję 7.0. Pamiętaj aby po wprowadzeniu zmian sprawdzić poprawność działania twojej witryny. W razie niepowodzenia możesz powrócić do poprzedniej wersji.
Kompresja GZIP
Kolejnym sposobem będzie kompresja GZIP (bezstratna kompresja danych). Pliki zostaną wysłane do urządzenia użytkownika dopiero po skompresowaniu na hostingu . Dekompresja plików odbywa się na urządzeniu użytkownika. Stosowanie kompresji GZIP pozwala na bezstratną implementację certyfikatu SSL (który jest niezwykle ważnym elementem, jeżeli zależy nam na większej widoczności witryny). Mówiąc bezstratną mam na myśli proces szyfrowania danych, który może spowolnić szybkość działania strony. Kompresja pozwala nam na ominięcie problemu.
GZIP dla serwerów Apache – poniższy kod można umieścić w pliku .htaccess
# Kompresuj HTML, CSS, JavaScript, tekst, XML i czcionki
AddOutputFilterByType DEFLATE application / javascript
AddOutputFilterByType Aplikacja DEFLATE / rss + xml
AddOutputFilterByType Aplikacja DEFLATE / vnd.ms-fontobject
AddOutputFilterByType DEFLATE application / x-font
AddOutputFilterByType DEFLATE application / x-font-opentype
AddOutputFilterByType Aplikacja DEFLATE / x-font-otf
AddOutputFilterByType Aplikacja DEFLATE / x-font-truetype
AddOutputFilterByType Aplikacja DEFLATE / x-font-ttf
AddOutputFilterByType DEFLATE application / x-javascript
AddOutputFilterByType Aplikacja DEFLATE / xhtml + xml
AddOutputFilterByType DEFLATE application / xml
AddOutputFilterByType DEFLATE font / opentype
AddOutputFilterByType DEFLATE font / otf
AddOutputFilterByType DEFLATE font / ttf
AddOutputFilterByType DEFLATE image / svg + xml
AddOutputFilterByType DEFLATE image / x-icon
AddOutputFilterByType DEFLATE text / css
AddOutputFilterByType DEFLATE text / html
AddOutputFilterByType DEFLATE text / javascript
AddOutputFilterByType DEFLATE tekst / zwykły
AddOutputFilterByType DEFLATE text / xml
# Usuń błędy przeglądarki (potrzebne tylko w naprawdę starych przeglądarkach)
BrowserMatch ^ Mozilla / 4 gzip-only-text / html
BrowserMatch ^ Mozilla / 4 \ .0 [678] no-gzip
BrowserMatch \ bMSIE! No-gzip! Gzip-only-text / html
Nagłówek dołącz Vary User-Agent
lub mod_gzip
mod_gzip_on Yes
mod_gzip_dechunk Yes
#określenie zasobów do kompresji
mod_gzip_item_include file .(html?|txt|css|js)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
Przed zastosowanie warto skontaktować się z własnym hostingiem lub stronie znaleźć skrypt do zastosowania kompresji GZIP.
Optymalizacja obrazów
Jest to chyba najczęściej występujący błąd, który pojawia się przy stronach, przed wprowadzeniem optymalizacji. Dużą rolę odgrywa tutaj format obrazów, które stosujemy. Obrazy bardzo często zajmują dużo miejsca na naszym serwerze. Jednocześnie wysłanie grafiki do przeglądarki wymaga więcej czasu.
Aby zoptymalizować obrazy na swojej stronie możesz zastosować kompresję. Aby zoptymalizować grafiki w odpowiedni sposób możesz skorzystać z narzędzi online takich jak TinyPNG czy JPEG Optymizer. W przypadku WordPressa istnieje wiele wtyczek, które ułatwiają i automatyzują ten proces. Polecam zapoznać się z wtyczką WPSmush. Do zmiany formatu od jakiegoś czasu stosuję Webp Express.
Ważnym elementem jest stosowanie grafik odpowiedniej wielkości. Dostosowanie grafiki o szerokości kilku tysięcy pikseli do elementu znacznie mniejszego zajmuje sporą ilość czasu. Nie wszystkie grafiki możemy zmniejszać, jednak stosowanie możliwie najmniejszych rozmiarów to bardzo dobra praktyka, która przełoży się na szybkość działania strony.
Buforowanie przeglądarki
Jest to metoda, która w znacznym stopniu wpływa na szybkość działania strony dla użytkowników, którzy już raz pojawili się na naszej stronie. Buforowanie przeglądarki polega na zapisie i ponownym wykorzystaniu plików przy każdym powrocie użytkownika na stronę.
Przy pomocy kodu możemy określić jak długo pliki pozostają zapisane. W przypadku sklepów internetowych należy ustawić buforowanie jedynie na sekcje statyczne-stabilne (logo, style CSS). Nie ustawiaj buforowania dla sekcji, które zmieniane są na bieżąco (ceny itp).
Kod, który możesz wykorzystać do buforowania:
ExpiresActive On
# Obrazy
ExpiresByType image / jpeg „dostęp plus 1 rok”
ExpiresByType image / gif „dostęp plus 1 rok”
ExpiresByType image / png „dostęp plus 1 rok”
ExpiresByType image / webp „dostęp plus 1 rok”
ExpiresByType image / svg + xml „access plus 1 rok”
ExpiresByType image / x-icon „access plus 1 rok”
# Video
ExpiresByType video / mp4 „access plus 1 rok”
ExpiresByType video / mpeg „dostęp plus 1 rok”
# CSS, JavaScript
ExpiresByType tekst / css „dostęp plus 1 miesiąc”
ExpiresByType tekst / javascript „dostęp plus 1 miesiąc”
Aplikacja ExpiresByType / javascript „dostęp plus 1 miesiąc”
# Inne
Aplikacja ExpiresByType / pdf „dostęp plus 1 miesiąc”
Aplikacja ExpiresByType / x-shockwave-flash „dostęp plus 1 miesiąc”
Minifikacja HTML, JavaScript i CSS
Minifikacja polega na usunięciu tzw. znaków białych, przecinków, komentarzy itp. W skrócie polega to na zmniejszeniu ilości kodu w plikach internetowych. Minifikacja jest niezwykle skuteczna ponieważ zarówno przeglądarki jaki serwer pracują na mniejszych plikach. Oryginalne wersje kodu można zredukować nawet od 40-60%.
Zastosowanie minifikacja jest niezwykle łatwe w przypadku WordPressa. Wtyczka W3 Total Cache pozwala na szybką minifikacja kodu. Wykonanie ręcznej minifikacji jest znacznie trudniejszym procesem w którym możemy wykorzystać system dostarczania treści (CDN)
Czym różni się ładowanie plików synchronicznie i asynchronicznie?
Pliki ładowane synchronicznie to pliki ładowane w odpowiedniej kolejności (hierarchiczne przetwarzanie plików – pierwszeństwo mają pliki znajdujące się na samym początku strony). W przypadku ładowania plików asynchronicznie elementy ładują się jednocześnie (bez oczekiwania na zakończenie ładowania innego pliku).
Ograniczenie przekierowań
Przekierowanie wymaga wysłania żądania na serwer, dlatego każde przekierowanie to zwiększenie czasu na odpowiedź serwera. Aby sprawdzić gdzie w witrynie występują przekierowania możesz wykorzystać rozszerzenie do przeglądarki Google Chorme (Redirect Path).
Podsumowanie – Czy warto?
Zwiększenie szybkości działania strony wymaga pracy i czasu, ale efekt który możemy osiągnąć jest warty poświęcenia. Odpowiednio zoptymalizowana strona ma realne przełożenie na konwersję oraz pozycje w wynikach wyszukiwania dodatkowo klienci chętnie będą wracać do twojej witryny.