Jak zwiększyć szybkość ładowania strony?

szybkość ładowania stronySzybkość ładowania strony wpływa na jej pozycję w wyszukiwarce Google. Chociażby dlatego warto zadbać, aby nasza witryna wczytywała się bez żadnych oporów. Jest jeszcze drugi, nie mniej istotny powód.

Szybkość ładowania strony jest bardzo ważna z punktu widzenia użytkownika. Witryny działające błyskawiczne zachęcają do przeglądania zawartości. Natomiast te działające wolno wprost przeciwnie – zniechęcają i odpychają.

 

 

Jak zwiększyć szybkość ładowania strony?

 

W pierwszej kolejności musimy dokładnie zbadać jak szybko ładuje się nasza strona. Google udostępnia narzędzie, które znakomicie się do tego nadaje: Page Speed Insights

Po wpisaniu adresu i kliknięciu „Analizuj” twoim oczom ukarze się rezultat badania. Wyświetlą się również elementy, które trzeba poprawić oraz sugestie w jaki sposób należy to zrobić:

zwiększyć szybkość ładowania strony

Jak widać Google podpowiada nam sposób usunięcia danego problemu. Niestety podpowiedzi te są dość enigmatyczne. W tym wpisie udzielę bardziej zrozumiałych wskazówek:

 

Wyeliminuj blokujący renderowanie kod JavaScript i CSS z części strony widocznej na ekranie

Jedną z metod rozwiązania tego problemu jest dodanie w odpowiednim miejscu polecenia async:

<script src="js/jquery-1.6.4.js"></script>
<script async src="js/jquery-1.6.4.js"></script>

Niestety nie jest to metoda doskonała. Nie mamy gwarancji, że pliki JavaScript załadują się w odpowiedniej kolejności. Może to spowodować błędy w wyświetlaniu strony. Jeśli tak się dzieje można spróbować testowania poszczególnych skryptów. Po każdorazowym dodaniu async należy sprawdzać, czy strona reaguje prawidłowo.

Jeśli strona oparta jest na WordPressie możecie skorzystać z wtyczek umożliwiających asynchroniczne ładowanie JavaScript i wczytywanie CSS bezpośrednio z pliku. Polecam dwie najbardziej wartościowe: Autoptimize lub Async JS and CSS

Optymalizacja CSS polega na wklejeniu odpowiedniego fragmentu kodu bezpośrednio do głównego pliku np. index.

 

 

Wykorzystaj pamięć podręczną przeglądarki

Należy znaleźć lub utworzyć plik .htaccess następnie na końcu wkleić poniższy fragment kodu. Dzięki temu przy każdej kolejnej wizycie użytkownika, zasoby będą wczytywane z pamięci podręcznej przeglądarki.

<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>

Dla użytkowników platformy WordPress polecam wtyczkę W3 Total Cache. Oprócz cachowania daje możliwość parsowania, czyli zmniejszania kodu (drugi punkt poniżej).

 

Zoptymalizuj obrazy

Tutaj chodzi o bezstratną kompresję obrazów. Należy skompresować i podmienić plik. W internecie bez problemów znajdziecie odpowiednie narzędzia: Optimizilla. Przed kompresowaniem obrazów pamiętajcie, aby zrobić kopię pliku. Dość często się okazuje, że kompresja wcale nie jest bezstratna. Oczywiście można posłużyć się odpowiednią wtyczką: WP Smush.it lub EWWW Image Optimizer.
Tutaj również zalecam wykonać kopię zapasową plików.

 

Zmniejsz HTML / Css / JavaScript

Należy sparsować kod, czyli usunąć z niego to co nie potrzebne. Tutaj narzędzie: Compressor. Zalecam dużą ostrożność przy automatycznym parsowaniu. Może się okazać, że ta operacja przyniesie więcej szkody niż pożytku. Automat może usunąć fragmenty kodu bez których strona nie wyświetli się tak jak powinna. Zmniejszanie tych elementów ma bardzo niewielki wpływ na szybkość ładowania strony. Dlatego ja z tego zrezygnowałem.

 

Włącz kompresję

Wystarczy odnaleźć plik .htaccess i wkleić do niego poniższy fragment kodu:

SetOutputFilter DEFLATE
 
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

Przy tym punkcie poruszę jeszcze jedno zagadnienie. Mianowicie istotnym czynnikiem wpływającym na szybkość ładowania strony jest ustawienie maksymalnej daty wygaśnięcia dla zasobów statycznych w nagłówkach. Za pomocą poniższego kodu możecie ustawić tę wartość na odpowiednim poziomie:

<IfModule mod_headers.c>
<FilesMatch "\.(jpg|jpeg|png|gif|swf|JPG)$">
Header set Cache-Control "max-age=4838400, public"
</FilesMatch>
<FilesMatch "\.(css|js)$">
Header set Cache-Control "max-age=4838400, private"
</FilesMatch>
</IfModule>

 

Konfiguracja okna roboczego

W sekcji Head trzeba wkleić fragment kodu umożliwiający skalowanie:

<meta name="viewport" content="width=device-width, initial-scale=1">

 

Narzędzie Page Speed Insights wychwytuje jeszcze szereg innych problemów. W tym wpisie skupiłem się na tych, które w największym stopniu wpływają na szybkość ładowania strony. Mam nadzieje, że zebrane tutaj informacje okażą się dla Was pomocne.

 


 

Znalazłem jeszcze jedno bardzo ciekawe narzędzie testujące szybkość ładowania strony: Gtmetrix. Posiada więcej funkcji niż Page Speed Insights. Pokazuje na przykład czas ładowania i całkowity rozmiar strony. Spróbujcie.

 


Jeśli uważasz, że artykuł jest wartościowy pozostaw komentarz i podziel się nim w mediach społecznościowych. Będzie to dla mnie nieoceniona pomoc i sygnał, że zmierzam w dobrą stronę. Dzięki:)

  • Przydatne informacje.
    Jak dobrze, że grafikę zaczęłam optymalizować już jakiś czas temu 😉

  • dorota

    bardzo pomocne rady, dziekuje !

  • Warto to robić zwłaszcza przez wzgląd na naszych czytelników.
    Zdecydowanie przyjemniej przegląda się bloga, który szybko się wczytuje.

  • Dzięki, cieszę się że artykuł okazał się pomocny.

  • Dzięki za rady. Z paru muszę koniecznie skorzystać!

    • Nie ma sprawy:) Szybko działający blog to korzyści dla wszystkich, zwłaszcza dla użytkowników.

  • Dzięki za przydatne wskazówki 🙂

  • No tak… moja strona jest super wolna wg google 😀 .. muszę koniecznie się za to zabrać, a raczej mój brat :D. Dziękuję za to! Świetne wskazówki!

    • Trochę zabawy jest, aby ustawić wszystko jak należy. Brat będzie miał pełne ręce roboty:)

  • Ewa Hes

    Fajna rzecz, tylko mnie Gtmetrix i PageSpeed Insights pokazują różnie. Na pewno optymalizacja obrazków u mnie siada :/

    • Według mnie trzeba optymalizować pod kątem PageSpeed. Jest to narzędzie ze stajni Google i to według niego najpopularniejsza wyszukiwarka określa szybkość ładowania strony. Wynik tego właśnie pomiaru wpływa na pozycję strony pozytywnie lub negatywnie. Gtmetrix podałem jako ciekawostkę

  • Oprócz wspomnianych Page Speed Insights i Gtmetrixs, warto zainteresować się jeszcze narzędziem Pingdom Website Speed Test, które pokazuje jakie pliki po kolei są ładowane w danym czasie – bardzo przydatna sprawa przy analizie czynników spowalniających stronę, opisaliśmy to dokładniej na blogu: https://widoczni.pl/blog/test-szybkosci-strony/