Top
szybkość ładowania strony

Poradnik jak zwiększyć szybkość ładowania strony

Szybkość ł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ę elementy, które trzeba poprawić oraz sugestie w jaki sposób należy to zrobić: 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 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.

Konfiguracja okna roboczego

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

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

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). Jako uzupełnienie zobacz 14 przydatnych wtyczek WordPress.

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. Optymalizacja obrazów znacznie przyspiesza ładowanie strony.

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>

Teraz już wiesz jak zwiększyć szybkość ładowania strony

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

Umiejętności i doświadczenie zdobywał w czołowych polskich agencjach SEO. Uczestniczył w działaniach promocyjnych realizowanych dla liderów rynku e-commerce z różnych branż. Specjalista od content marketingu oraz pozycjonowania. Z zamiłowania twórca grafiki artystycznej.

Comments

  • Mara
    10 stycznia 2016

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

  • dorota
    10 stycznia 2016

    bardzo pomocne rady, dziekuje !

  • Grzegorz Szymański
    12 stycznia 2016

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

  • Grzegorz Szymański
    12 stycznia 2016

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

  • Dawid Konopka || Marzeniawcele
    4 lutego 2016

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

    • Grzegorz Szymański
      5 lutego 2016

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

  • Edyta moj-kawalek-podlogi
    7 lutego 2016

    Dzięki za przydatne wskazówki 🙂

  • Bogusia Probierz
    9 lutego 2016

    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!

    • Grzegorz Szymański
      9 lutego 2016

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

  • Ewa Hes
    10 lutego 2016

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

    • Grzegorz Szymański
      10 lutego 2016

      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ę

  • Widoczni
    12 stycznia 2017

    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.

Post a Comment