Przyspiesz swoją stronę za pomocą tych darmowych narzędzi

Szybkość ma znaczenie! Przynajmniej, jeżeli chodzi o uzyskiwanie ważnych informacji w odpowiednim czasie. Podczas przeglądania Internetu, jednym z najbardziej zauważalnych aspektów jest prędkość ładowania się strony. Po wpisaniu adresu URL lub kliknięciu w link, wszyscy oczekują przekierowania na wybraną stronę w mniej niż sekundę, a maksymalnie 2 sekundy. Każda strona, której załadowanie się zajmuje więcej czasu, irytuje użytkowników. Sprawia to, że użytkownik przechodzi na inną stronę, która oferuje poszukiwane informacje w szybszym czasie. W końcu, w tym całym pracowitym świecie, nikt nie ma czasu na czekanie, aż strona się załaduje.

Potrzeba otrzymywania informacji w najkrótszym możliwym czasie stworzyła nowe, ważne wymaganie w projektowaniu stron internetowych – jeżeli strona nie jest wystarczająco szybka, nie jest dobra. Ta mantra jest często dość trudna do spełnienia, zwłaszcza w przypadku stron, na których istnieje wiele dynamicznej treści. Projektanci i deweloperzy z tej dziedziny zmagają się ze strategiami pozwalającymi na zminimalizowanie czasu ładowania się strony, aby klienci nie wychodzili z niej bez sprawdzenia jej treści.

Apel do wszystkich, którzy robią to codziennie. Rozumiemy, że czujecie presję, aby strony internetowe były bogate w treści, interesujące, unikalne, ale też na tyle lekkie, żeby otwierały się w mniej niż sekundę za każdym razem.
Ale zdajemy sobie też sprawę z tego, że internauci są generalnie niezbyt cierpliwi, zwłaszcza wtedy, kiedy korzystają z Internetu na telefonie. Przez to, projektanci stron internetowych muszą zadbać o to, żeby strona działała na tyle prężnie, żeby przez długie ładowanie użytkownicy nie przechodzili na inne strony.

Przychodzimy Ci z pomocą poprzez tę listę prostych sposobów i darmowych narzędzi, które ulepszą czas ładowania Twojej strony. Sprawdź je i wypróbuj. Jesteśmy ciekawi, jak zadziałają u Ciebie.

Dlaczego szybkie ładowanie się strony jest takie ważne?

Niezależnie od tego, jak oryginalny jest Twój produkt lub jak niezawodne są Twoje usługi, jeżeli nie jesteś w stanie zaprezentować ich światu w kilka sekund, najprawdopodobniej poniesiesz straty. Zawsze istnieje wiele firm oferujących takie same produkty i usługi (innymi słowy, zawsze masz konkurencję). Jeżeli nie upewnisz się, że klient zobaczy podczas zakupów Twój produkt jako pierwszy, praktycznie wyświadczasz przysługę swoim konkurentom.

Spójrzmy na te statystyki, które udowadniają naszą tezę:

• Według badania przeprowadzonego przez Amazon¹, na każde 100ms ulepszonego czasu ładowania strony, dochody wzrosły o przynajmniej 1%
• Według badań¹ Shopzilla zyskała około 12% większy dochód poprzez zmniejszenie czasu ładowania strony z 6 sekund do 1,2 sekundy. Dodatkowo, dzięki temu ruch na ich stronie wzrósł o 25%
• Z drugiej strony, dochód strony, która zmniejszyła swój czas ładowania w wyszukiwarce Bing o 2 sekundy spadł o 4,3% na użytkownika¹

Trzeba przyznać, że strona, która ładuje się zbyt długo jest skazana na spadek współczynnika konwersji oraz stratę nowych klientów. Fakt ten jest poparty badaniem¹, które wykazało, że dla 39% codziennych użytkowników Internetu, wydajność strony jest ważniejsza od jej funkcjonalności.

Wpływ na ruch organiczny

Prędkość ładowania się strony jest ważnym czynnikiem determinującym pozycję strony w rankingu Google. Jakiś czas temu Google zaczął brać pod uwagę szybkość strony, jeżeli strona jest zbyt wolna – jest uważana za nieprzydatną. Więc nawet jeżeli zawartość Twojej witryny jest świetna, nie pokaże się w pierwszych wynikach wyszukiwania, jeżeli jej czas ładowania jest zbyt długi.

Teraz już wiesz dlaczego, więc na pewno chcesz się dowiedzieć jak.

Sztuczki i narzędzia pozwalające przyspieszyć czas ładowania strony

Istnieje wiele artykułów, które dadzą Ci pomocne wskazówki, jak zwiększyć prędkość ładowania strony internetowej. Tutaj wskażemy Ci narzędzia, które mogą pomóc wcielić te wskazówki w życie, abyś odczuł zmianę. Każdej wskazówce towarzyszą nazwy narzędzi, których możesz użyć, aby odczuć efekt.

Zmierz obecną szybkość ładowania Twojej strony

Na początku musisz poznać stan początkowy (albo raczej zobaczyć, jak zły jest). Dowiedz się, w jakim czasie ładuje się Twoja strona używając któregokolwiek z tych narzędzi:

• Google Page Speed Insights i ich moduł Mobile Website Speed Test – oto strona sprawdzająca online prędkość stron internetowych, która zapewnia wgląd do wielu danych potrzebnych do ulepszenia wydajności strony. Te narzędzia pomogą Ci znaleźć dokładne przyczyny zbyt wolnego ładowania się strony. W czasie testu, strona zostanie oceniona w skali 0-100 punktów. Jeżeli zdobędzie ich powyżej 90, jest w dobrym stanie. Jeżeli nie, może powinieneś posłuchać sugestii Google podpowiadających, dlaczego strona się wolno ładuje i jak możesz to poprawić.
• WebPageTest.org – Jedna z najbardziej wszechstronnych stron tego typu. Oferuje narzędzie, które może sprawdzić szybkość Twojej strony z różnych lokalizacji na całym świecie, korzystając z prawdziwych wyszukiwarek. Domyślnie przeprowadza 3 testy, a potem ukazuje czas ładowania, szczegółowe wykresy, szczegóły żądania, a także sugestie optymalizacji. Ma swój własny system oceniania (6 stopni od F do A). Może nawet przechwycić film wideo ukazujący, jak Twoja strona się ładuje.
• GTmetrix – Zapewnia świetne analizy stron internetowych podając oceny zarówno Page Speed jak i YSlow. Dodatkowo, oprócz pomiaru prędkości, to narzędzie informuje Cię o przyczynach, dlaczego Twoja strona jest wolna.

Gdy przekonasz się, że Twoja strona wolno się ładuje, skorzystaj z przynajmniej jednej z poniższych metod, aby ją przyspieszyć. Podczas tego procesu pamiętaj o sprawdzaniu efektywności każdej z modyfikacji poprzez powtórzenie tego kroku.

Zoptymalizuj obrazy

To oczywiste, że najcięższym elementem postów są grafiki. Duże obrazy są głównym powodem, dlaczego strony się długo ładują. Ale to nie znaczy, że nie powinieneś ich używać na swojej stronie. Powinieneś je po prostu kompresować za pomocą odpowiednich narzędzi, aby zredukować ich rozmiar, przez co będą się dużo szybciej ładować. Możesz bezstratnie zmniejszyć rozmiar bitmap za pomocą tych narzędzi:

• TinyPNG (działa także dla plików JPG)
• Optimizilla
• Compressor

Gdy jesteś już na tym etapie, pewnie chciałbyś także zoptymalizować animacje typu GIF i obrazy wektorowe SVG za pomocą odpowiednich narzędzi. Dla animacji GIF jest to ezGIF, a SVG Optimizer by Peter Collingridge działa świetnie dla obrazów SVG.

Dodatkowa rada: Mimo, że kompresowanie obrazów to dobry pomysł, warto za każdym razem rozważyć, czy użycie dużych/ciężkich grafik na stronie jest naprawdę konieczne.

Zoptymalizuj kod strony

Oprócz zmniejszenia rozmiaru obrazów, możesz także zredukować wielkość kodu strony. To działanie, znane pod nazwą „optymalizacja kodu”, redukuje ilość danych przesyłanych do wyszukiwarki poprzez usuwanie niepotrzebnych znaków, takich jak spacje, tabulatory i entery. Możesz zminimalizować każdy rodzaj kodu – HTML, CSS oraz JavaScript. Co więcej, możesz skorzystać z inteligentnych technik, jak przenoszenie zasobów sieciowych, takich jak czcionki, pliki CSS i JavaScript na dół strony, aby tekst załadował się przed pozostałymi elementami, przez co, jeżeli zdarzy się, że Twoje obrazy czy filmy będą się ładować kilka sekund, użytkownik może przynajmniej zająć się czytaniem treści. Możesz zoptymalizować kod ręcznie albo korzystając z narzędzia jak Refresh-SF lub Minify Code.

Użyj cache

Buforowanie przeglądania ma przede wszystkim zastosowanie w przypadku stron z dostępem do baz danych, takich jak e-commerce czy platformy do zarządzania treścią, ale może być także używane do innych stron internetowych. Ideą tej koncepcji jest ustawienie daty wygaśnięcia lub maksymalnego limitu trwania zasobów statycznych w nagłówkach HTTP, takich jak obrazy, CSS, JavaScript, pliki PDF itp. Caching zapisuje “zrzuty ekranu” Twojej strony i dostarcza je jako statyczne treści HTML, co jest najprostszym sposobem na przekazanie danych na stronie. Zatem, dzięki buforowaniu, przeglądarki automatycznie ładują uprzednio pobrane dane z lokalnych dysków, a nie z sieci, przez co unikają bezpośredniego pobierania danych z bazy, co skutkuje szybszym czasem ładowania strony. Sprawdź, czy Twoja strona korzysta z buforowania za pomocą Browser Caching Checker. Aby umożliwić buforowanie na swojej stronie internetowej, możesz albo wprowadzić bezpośrednio zmiany do kodu, albo użyć wtyczki, jak na przykład W3 Total Cache for WordPress lub WP Super Cache.

Dodatkowa rada: Nierzadko zdarza się, że u nienajlepszych dostawców hostingu serwisy dynamiczne (korzystające z baz danych) działają niespodziewanie wolno. Dlatego, zanim spędzisz czas na optymalizacji cache, pomyśl o znalezieniu lepszego dostawcy.

Generuj CSS Sprites

Kolejnym świetnym sposobem, aby odciążyć Twoją stronę jest używanie CSS Sprites. Ta technika łączy wiele małych obrazów (ikony, przyciski itp.) w jeden plik nazwany „sprite” i wyświetla w danym miejscu tylko określony fragment tej grafiki. Poprzez łączenie mniejszych obrazków w jeden duży, wczytywany będzie tylko pojedynczy obrazek, co wpłynie na redukcję ilości żądań HTTP wysyłanych przez przeglądarkę, a co za tym idzie – strona będzie ładować się szybciej. Możesz z łatwością wygenerować takie pliki i równocześnie pozyskiwać kod CSS z CSS Sprites Tool lub CSS Sprites Generator.

Sprawdź kompresję GZIP

GZIP jest formatem plików i algorytmem używanym do kompresji oraz dekompresji plików. Oszczędza od 50% do 80% transferu, zwiększając znacząco prędkość ładowania się strony, przez co jest polecany przez narzędzia takie jak Google Page Speed. Jeżeli kompresja GZIP jest wyłączona na Twojej stronie, narzędzia sprawdzające prędkość strony Cię o tym poinformują i zasugerują Ci włączenie jej. Dzięki Check GZIP Compression możesz szybko sprawdzić, czy kompresja jest włączona i jak wiele transferu dzięki niej oszczędzasz.

Skorzystaj z systemu Content Delivery Network (CDN)

Podczas gdy cały Internet jest jednym, wielkim, niewidzialnym „połączeniem” sieci na całym świecie, w którym dystans nie gra roli, prawdą jest, że im dalej znajdują się ludzie odwiedzający Twoją stronę od serwera, z którego wychodzi, tym wolniej ta strona się dla nich ładuje. Jest to spowodowane tym, że dane muszą przejść przez więcej „węzłów Internetu” zanim dotrą do odbiorców. To dlatego wymyślono Content Delivery Networks (CDNs).
CDN to rozległa sieć serwerów, które zastępują statyczne zasoby Twojej strony i ukazują ją odwiedzającym z najbliższego POP. Mówiąc w skrócie, CDN to serwery proxy znajdujące się na całym świecie. Kiedy Internauci odwiedzają Twoją stronę, zostanie im ukazana treść z serwera znajdującego się geograficznie najbliżej ich lokalizacji. To działanie „klonowania” skutkuje dużo szybszym działaniem stron internetowych i jest jedną z najbardziej efektywnych metod na zwiększenie prędkości Twojej strony.
Możesz sprawdzić, jacy dostawcy CDN są wykorzystywani na stronie poprzez CDN Finder.

Wyedytuj plik .htaccess, aby przyspieszyć ładowanie strony

Oto prawdziwy zwycięzca tego zestawienia. Dużo danych konfiguracji serwera potrzebnych do przyspieszenia strony jest zawarta w pliku .htaccess. W zasadzie, edytowanie tego pliku jest głównym sposobem na implementację kompresji GZIP oraz buforowania.
Nie znaleźliśmy generatora plików .htaccess online, który skupiałby się na przyspieszającym kodzie (lub go zawierał). Zamiast tego, zgromadziliśmy niektóre z najlepszych fragmentów kodu, które często pojawiają się na wielu blogach i połączyliśmy je²:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
php_flag zlib.output_compression on
</IfModule>
<Files *.php>
SetOutputFilter DEFLATE
</Files>
<IfModule mod_headers.c>
Header unset ETag
Header unset Last-Modified
</IfModule>
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/cgi-php5
AddOutputFilterByType DEFLATE application/cgi-php53
AddOutputFilterByType DEFLATE application/cgi-php54
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:pdf|doc)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI \.(?:avi|mov|mp3|mp4|rm)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
</IfModule>
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
</ifModule>
FileETag None

Po prostu skopiuj to i wklej na początku Twojego pliku .htaccess i sprawdź rezultaty.

Podsumowując

Mamy nadzieję, że przedstawione triki i narzędzia pomogą Ci znacząco zwiększyć prędkość Twojej strony. Zbliżanie się do wyniku 100/100 w Google Page Speed to naprawdę miłe uczucie. Nie zapominaj jednak, że Twoja strona jest żywą jednostką. Zmienia się, a tak samo zmienia się jej czas ładowania. Warto monitorować ten czas. Pozwala to na szybką reakcję, zanim zauważą to użytkownicy oraz strona spadnie w wyszukiwaniu Google.

¹ Źródło danych statystycznych: https://www.fldtrace.com/why-a-fast-loading-website-is-good-for-your-business
² Plik .htaccess bazuje głównie na magento-htaccess