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]

POLECANE ARTYKUŁY

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *