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.

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.