11 sposobów na optymalizację czasu ładowania strony

Dlaczego warto zoptymalizować stronę pod kątem wydajności?

Google już dawno potwierdziło, że szybkość oraz łatwość poruszania się po stronie przez Googlebota są ważne. Czas wczytywania strony jest jednym z ważniejszych elementów User Experience. Ma duże znaczenie chociażby na zadowolenie użytkowników, a co za tym idzie również inne czynniki behawioralne. Z punktu widzenia pozycjonowania, TTFB (Time To First Byte) i TTLB (Time To Last Byte) to jedne z najważniejszych parametrów wydajności witryny. Szybkość ładowania strony ma więc wpływ na SEO, ale również na efektywność, ruch na stronie, współczynnik odrzuceń czy konwersje, a także wynik jakości w Ads co przekłada się na niższe ceny i wyższe pozycje reklam. Jeśli strona ładuje się zbyt wolno, tracisz potencjalnych klientów.

Badanie Google pokazało, że zwiększenie czasu wczytywania strony mobilnej z 1s do 5s powoduje wzrost prawdopodobieństwa odrzucenia aż o 90%.

Należy też pamiętać, że dużo osób korzysta z urządzeń mobilnych, które ogranicza nieduża moc obliczeniowa i wolniej działający internet, więc ten czynnik ma w tym przypadku jeszcze większe znaczenie.

Jak sprawdzić czas ładowania strony?

Narzędzi analizujących szybkość ładowania strony oraz podpowiadających, z jakimi problemami mamy do czynienia i jak je rozwiązać jest dużo. Oto te od Google:

1. Raport szybkość witryny w Google Analytics w sekcji Zachowanie > Szybkość Witryny. Można sprawdzić ile wynosił czas wczytywania strony i poszczególnych dokumentów.

2. Google PageSpeed Insights podaje ocenę szybkości ładowania strony na komputerach jak i urządzeniach mobilnych oraz uwagi dotyczące elementów wymagających poprawy i ich rozwiązania.

3. Test My Site przedstawia czas wczytywania strony na urządzeniach mobilnych, wraz z jego oceną i szacunkowym odsetkiem utraconych użytkowników. Są również porady na temat zoptymalizowania najważniejszych elementów z przybliżonym czasem, o który może skrócić się wczytywanie. Można też porównać parametry strony z innymi witrynami z tej samej lub innych branż.

Sposoby skrócenia czasu ładowania się strony

1. Zmniejszenie rozmiaru grafiki i dynamiczne ładowanie zdjęć

Nie przesyłaj na serwer grafik większych niż są one wyświetlane na stronie oraz dokonaj konwersji rozmiaru nie tracąc jakości. W galeriach zdjęć stosuj dynamiczne ładowanie grafik.

2. Odinstaluj nieużywane wtyczki

Jeśli korzystasz z systemów CMS, np. WordPress, PrestaShop czy Drupal to większość funkcjonalności twojej strony zapewniają wtyczki. Sprawdź czy wszystkie są niezbędne, odinstaluj niepotrzebne, nieużywane czy takie, które powielają swoje funkcjonalności.

3. Eliminuj zbędne przekierowania

Każde przekierowanie to ponowne wywołanie strony. Sprawdź czy nieistniejące adresy nie odsyłają do nieistniejącej strony, która przekierowuje do kolejnej podstrony.

4. Korzystaj z pamięci podręcznej przeglądarki – Expire headers

Dla użytkowników ponownie odwiedzających witrynę dane mogą być pobierane z tzw. cache’a. Dzięki regułom .htaccess lub wtyczkom możesz określić, które elementy strony i przez jaki czas będą pobierane z pamięci podręcznej przeglądarki.

5. Kompresja kodu CSS, JS czy HTML – minifikacja

Usuń zbędne znaki jak spacje, znaki nowych linii, komentarze. W plikach JS skróć nazwy zmiennych. Do minifikacji CSS i JS można użyć narzędzi online.

6. Minimalizacja liczby zapytań do serwera

Zmniejszenie liczby plików CSS

Połącz kilka plików css w jeden pamiętając o zachowaniu kolejności w jakiej były wczytywane na stronie.

Zmniejszenie liczby plików JS

Umieść kod JavaScript bezpośrednio w kodzie strony (jeśli skrypt niewielki) lub ładuj go z opóźnieniem czy w sposób asynchroniczny – wskazówka od Google.

Wyeliminowanie ładowania niepotrzebnych elementów

Sprawdź w kodzie strony czy nie są ładowane czcionki lub skrypty, które nie są już wykorzystywane. Realizując ten punkt zastanów się również czy wszystkie funkcjonalności strony są istotne dla użytkownika.

7. Miejsce plików CSS i JS w kodzie strony

Odwołanie do pliku CSS powinno znajdować się na końcu sekcji head, a odwołanie do pliku JS na końcu znacznika body. Ponieważ skrypt JS blokuje ładowanie się innych komponentów to jego wczytywanie powinno odbywać się jak najpóźniej. Można też użyć parametru async lub defer.

8. Kompresja GZIP

Włącz na witrynie bezstratną kompresję danych przesyłanych z serwera do komputera użytkownika.

9. CSS Sprites

Jeśli na Twojej stronie jest dużo małych elementów graficznych to dzięki temu rozwiązaniu można połączyć je w jeden plik i wykorzystać je za pomocą stylów CSS.

10. Hosting

Nie bez znaczenia jest również czas odpowiedzi serwera. Problemy mogą pojawiać się np. gdy korzystasz z współdzielonego serwera. Jeśli hosting ma problem z prędkością to zmień dostawcę lub wykorzystaj opisane poniżej rozwiązanie.

11. CDN (ang. content delivery network)

Czyli ładowanie treści z kilku serwerów jednocześnie. Sieć dostarczania treści oferuje Microsoft czy Google.

Wyświetlanie na urządzaniach mobilnych

Trzeba również wspomnieć o przystosowaniu strony do wyświetlania na urządzeniach mobilnych, gdzie jest największe ryzyko ograniczonej przepustowości łącza, a jednocześnie nie ma potrzeby wyświetlania grafik o bardzo dużej rozdzielczości. Zastosowanie bardziej skompresowanych i o mniejszych wymiarach grafik w wersji mobilnej jest jednym z najprostszych sposobów na skrócenie czasu ładowania. Najlepiej aby strona była w pełni responsywna, ale można też stworzyć osobną stronę lub aplikację dedykowaną specjalnie dla smartfonów i tabletów.

Można również stworzyć wersję strony AMP (ang. Accelerated Mobile Pages). Przyspieszone strony mobilne to inicjatywa open source, dostarczająca witryny, które ładują się szybko i dobrze wyglądają na urządzeniach mobilnych, nawet w przypadku wolnych sieci. Są to strony oparte na statycznych treściach, które mają się szybko renderować. Taka strona może się zapisać i ładować na przykład z cache Google.

Jak widać zmniejszyć czas ładowania witryny można dzięki podstawowym zabiegom nie wymagającym specjalistycznej wiedzy, a jeśli mamy możliwości to warto również skorzystać z bardziej zaawansowanych technik. Wprowadzenie wszystkich opisanych zmian będzie niestety czasochłonne, ale wdrożenie nawet jednego z opisanych rozwiązań np. optymalizacji grafik może przyczynić się skrócenia czasu ładowania strony i poprawę współczynnika konwersji.