
Duża 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.
- dożywotnie profity
- najlepsze warunki
- instrukcja krok po kroku
- wsparcie i pomoc od nas
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 potencjał swoich portali
- zbuduj źródło stale płynących prowizji
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.
Mara
Przydatne informacje.
Jak dobrze, że grafikę zaczęłam optymalizować już jakiś czas temu 😉
dorota
bardzo pomocne rady, dziekuje !
Grzegorz Szymański
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
Dzięki, cieszę się że artykuł okazał się pomocny.
Dawid Konopka || Marzeniawcele
Dzięki za rady. Z paru muszę koniecznie skorzystać!
Grzegorz Szymański
Nie ma sprawy:) Szybko działający blog to korzyści dla wszystkich, zwłaszcza dla użytkowników.
Edyta moj-kawalek-podlogi
Dzięki za przydatne wskazówki 🙂
Grzegorz Szymański
Nie ma sprawy:)
Bogusia Probierz
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
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 :/
Grzegorz Szymański
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
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.
Grzegorz Szymański
Dziękuję za uzupełnienie, to również istotne.