Jak przyspieszyć wczytywanie strony internetowej?
To jak szybko wczytuje się strona internetowa ma nie tylko wpływ na ogólne wrażenia użytkowników ale również wpływa na pozycję strony w wynikach wyszukiwania.
Co oznacza 1 sekundowe opóźnienie w czasie ładowania witryny?
11% mniej wyświetleń, obniżona satysfakcja klientów, do tego 57% użytkowników opuszcza witrynę, która ładuje się dłużej niż 3 sekundy.
Z tego powodu warto przygotować stronę www pod kątem optymalnego czasu ładowania. Wszystkie poszczególne elementy takie jak: skrypty, style i obrazki powinny być wczytywane w odpowiedniej kolejności.
Średni szacowany czas w jakim nasza strona powinna zostać w pełni załadowana wynosi 2 sekundy. Czas dłuższy niż 2 sekundy ma negatywne odbicie na odbiór naszej witrynie przez odwiedzających, czyli naszych potencjalnych klientów. Jeśli nasza strona ładuję się dłużej niż 2 sekundy, powinniśmy poinformować użytkowników o postępie w ładowaniu poprzez wyświetlenie paska ładowania lub jakiejkolwiek innej formy przedstawiającej postęp ładowania. Dzięki temu zwiększymy dopuszczalny czas oczekiwania na załadowanie strony z 2 sekund do nawet 38 sekund. Jeśli korzystamy z CMS, możemy zainstalować odpowiednie rozszerzenie, które doda pasek ładowania na naszą stronę. W przypadku WordPressa taką funkcjonalność umożliwia darmowy plugin WP Pace.
Sposoby na przyspieszenie wczytywania strony internetowej:
1. Włączenie kompresji gzip
Duże strony pobierane są powoli z serwera. Najlepszą metodą na przyspieszenie czasu wczytywania takich stron jest kompresja gzip. Odpowiednio skompresowane pliki redukują odpowiedź ze strony HTTP, a co za tym idzie przyspieszają czas ładowania strony www. Dla tych, którzy korzystają z CMS istnieje możliwość aktywowania kompresji poprzez pluginy lub po prostu za pomocą panelu globalnej konfiguracji witryny, tak jak ma to miejsce w Joomli. Jeśli nie korzystamy z CMS, możemy aktywować kompresję gzip poprzez dodanie do naszego pliku .htaccess następującego fragmentu kodu:
[sourcecode language=”plain”]<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
</IfModule>[/sourcecode]
Niestety, niektórzy dostawcy hostingu nie udostępniają możliwości kompresji gzip, dlatego warto najpierw sprawdzić czy dany hosting udostępnia taką funkcjonalność.
2. Kolejność i ilość wczytywanych plików CSS i Javascript
Zmniejszenie ilości plików .css i .js zmniejszy liczbę żądań wysyłanych do serwera. Aby przyspieszyć wczytywanie strony internetowej, należy postarać się również o odpowiednią kolejność wczytywania naszych plików. W sekcji head naszej strony chcemy umieścić w pierwszej kolejności plik ze stylami (CSS) a w następnej kod Javascript (JS). Dzięki temu strona szybko stanie się widoczna, natomiast ewentualne skrypty zostaną pobrane później. W przeciwnym wypadku wczytywanie strony zostałoby zatrzymane, aż do wczytania wszystkich skryptów JS.
3. Wykorzystanie CSS sprites
Cała magia w CSS sprites polega na przesyłaniu na serwer jednego obrazka, który zawiera wszystkie niezbędne elementy np. ikony, a następnie umieszczenie poszczególnych fragmentów przesłanego przez nas obrazka wzywając jego pozycję w CSS:
[code lang=”css”]
<!DOCTYPE html>
<html>
<head>
<style>
#ikona1 {
width: 50px;
height: 50px;
background: url(obrazek.gif) 0 0;
}
#ikona2 {
width: 50px;
height: 50px;
background: url(obrazek.gif) -90px 0;
}
</style>
</head>
<body>
<img id=”ikona2″ src=”img_trans.gif”><br><br>
<img id=”ikona2″ src=”img_trans.gif”>
</body>
</html>
[/code]
Dzięki temu z serwera zostanie pobrany wyłącznie jeden obrazek, który następnie zostanie podzielony na 2 różne obrazki dzięki wybraniu odpowiedniej pozycji.
Więcej o tym jak wykorzystać tę metodę znajdziecie pod linkiem: CSS sprites.
4. Zmniejszenie rozmiaru obrazków
Nawet jeśli wrzucamy obrazek o rozmiarach 800×800 pikseli ale zmniejszamy jego rozmiar do 200×200 za pomocą CSS to i tak użytkownik będzie musiał pobrać z serwera większy obrazek. Dlatego umieszczając grafikę na stronie internetowej, należy wrzucać zdjęcia w takim rozmiarze jakiego rzeczywiście chcemy użyć. Jeśli korzystamy z Joomli, możemy dodatkowo użyć darmowego rozszerzenia Prizm Image, które automatycznie skompresuje każde przesyłane przez nas zdjęcie.
5. Wykorzystanie pamięci podręcznej (caching)
Kiedy odwiedzamy stronę internetową, część jej danych jest zapisywana i przechowywana na naszym komputerze w pamięci podręcznej. Podczas pierwszego uruchomienia witryny musimy pobrać jej całą zawartość z serwera. Podczas kolejnych wizyt te same dane zostaną pobrane z naszego komputera bez konieczności wysyłania zapytania HTTP do serwera, co znacząco przyspieszy czas ładowania strony podczas kolejnych odwiedzin. Nie wpłynie to jednak na czas wczytywania przy pierwszym uruchomienie strony, o czym należy pamiętać.
W przypadku CMS pamięć podręczną możemy włączyć za pomocą panelu administratora. Możemy to również zrobić dodając poniższy kod do naszego pliku .htaccess:
[sourcecode language=”plain”]<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>[/sourcecode]
