Jak przyśpieszyć stronę internetową

Dlaczego powinno się przyśpieszyć działanie strony internetowej?

  • Twoi potencjalni klienci jak i w zasadzie wszyscy użytkownicy przeglądarki liczą na to że strona www załaduje się w mgnieniu oka, tak więc jeżeli Twoja ładuje się kilka sekund dłużej niż powinna istnieje duże prawdopodobieństwo że po prostu z niej wyjdą. Jest to udokumentowany na podstawie statystyk fakt.
  • Przeglądarka google, która wychodzi naprzeciw użytkownikom przyznaje wyższe pozycje stronom, które ładują się szybko. Czynnik ten w oczach wyszukiwarki stał się na tyle ważny, że została zapowiedziana aktualizacja algorytmu page speed, która całkowicie odsunie wolno ładujące się strony.

Jak przyśpieszyć stronę?

Poniżej przedstawię zabiegi jakie należy wykonać aby strona ładowała się tak jak oczekują tego Twoi klienci oraz wyszukiwarka google.

Skompresuj zdjęcia

Zdjęcia często są główną przyczyną powolnego działania strony, jak sobie doskonale zdajesz sprawę dobrej jakości zdjęcie może “ważyć” nawet kilka, kilkanaście megabajtów. Z pomocą kompresji możemy zmniejszyć ich rozmiar do nawet kilkudziesięciu, kilkuset kilobajtów. Biorąc pod uwagę fakt że na stronie zazwyczaj zdjęć jest minimum 10 możemy zaoszczędzić nawet do kilku sekund podczas ładowania strony

Nie istnieje zasada, która mówi o tym do jakiej wielkości musimy skompresować zdjęcia natomiast im mniej ważą tym lepiej. Jeżeli nie wiesz jak wykonać kompresję zdjęć z pomocą przyjdą Ci odpowiednie narzędzia. Polecam sprawdzić http://optimizilla.com/pl/ gdzie wrzucamy nasze zdjęcia i już po chwili możemy cieszyć się ich skompresowaną wersją.

Minifikacja CSS

Czym jest minifikacja? Jest to zmniejszenie ilości kodu źródłowego. Jak widać na poniższym przykładzie chodzi przede wszystkim o usunięcie zbędnych znaków spacji etc.

kod po minifikacji

Do minifikacji możemy wykorzystać, np. Gulpa. Niektóre systemy zarządzania treścią posiadają odpowiednie wtyczki, które w pewnym sensie załatwią sprawę za nas. W najpopularniejszy CMS wordpress mamy do dyspozycji wtyczkę autooptimize

Minifikacja JS

Identyczny przypadek jak w minifikacji CSS – celem tego jest maksymalne zmniejszenie kodu. Jeżeli zawierasz skrypty, np. jQuery lub biblioteki, to zawsze warto dodać wersję zminifikowaną. Rozpoznać można je np po nazwie.

Problem pojawia się w momencie gdy próbujemy wykorzystać asynchroniczne wyświetlanie się kodu, strona może wtedy wyświetlać się nie poprawnie ze względu na to że niektóre elementy będą wyświetlały się w nieodpowiedniej kolejności.

Na czym to polega

Sposób ładowania asynchronicznego jest prosty: należy dopisać async, np.:

[code]

<script src=”sciezka_do_skrypt.js” async></script>

[/code]

Ładowanie fontów (czcionek)

Fonty przez ostatnie lata bardzo mocno się rozwinęły do tego stopnia że czasami możemy dysponować kilkunastoma stylami jednej czcionki. Całkiem nieźle 😉 Niestety to tylko tak brzmi w rzeczywistości ładowanie niepotrzebnych styli bardzo opóźnia działanie strony.

Jeżeli dodajesz fonty na stronę to najlepiej wybierz tylko te, których używasz. Dokładnie taka sama sytuacja jest gdy korzystasz z Google Fonts mają one dodatkową opcję, która pokazuje jak szybko ładował się będzie dany font.

ładowanie fontów

Glyphonic ikony

Jeżeli korzystasz z ikon warto nie robić tego w starym stylu czyli dodawaniu ikon w formatach zdjęć, lepiej jest skorzystać z bibliotek, z pomocą, których dodanie ikony będzie nie tylko łatwiejsze ale nie także przyśpieszy działanie strony www.

Stosowanie SVG

Sytuacja jest niemal identyczna jak w przypadku ikon. Największa różnica jest taka, że w tym przypadku nie korzystamy z gotowych obrazów, ale mamy możliwość stworzyć swoje. Jest to jeden ze sposobów na optymalizację niektórych grafik.  SVG to obraz wektorowy, znaczy to że nie są opisane za pomocą pikseli, lecz łuków, linii etc. Dzięki tej metodzie obraz mało waży a może być nieskończenie wielki.

Kompresja gzip

Cała sztuczka polega na tym, że strona nie jest przesyłana z serwera do przeglądarki w “fundamentalnej wersji”. Jest ona wcześniej odpowiednio kompresowana na serwerze, wysyłana do użytkowników w swojej finalnej – mniejszej (skompresowanej) wersji. Przesyłane dane są mniejsze dzięki czemu skracamy czas ładowania się strony.

Cache

Na koniec banał. Dzięki cache możemy zapisać naszą stronę do podręcznej pamięci, która “jest zawsze pod ręką” i nie musi pobierać/tworzyć tych danych na nowo. To znacznie przyśpiesza działanie strony.

Do wielu silników, np. WordPress możemy znaleźć gotowe wtyczki, które wystarczy wgrać.

Wykorzystaj pamięć podręczną przeglądarki

Najłatwiejszą metodą wykonania tej czynności jest umieszczenie w pliku .htaccess następującego kodu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault “access plus 1 month”
ExpiresByType text/html “access plus 1 seconds”
ExpiresByType image/gif “access plus 30 days”
ExpiresByType image/jpeg “access plus 30 days”
ExpiresByType image/png “access plus 30 days”
ExpiresByType image/jpg “access plus 30 days”
ExpiresByType image/svg+xml “access plus 30 days”
ExpiresByType text/css “access plus 30 days”
ExpiresByType text/javascript “access plus 30 days”
ExpiresByType application/javascript “access plus 30 days”
ExpiresByType application/x-javascript “access plus 30 days”
ExpiresByType text/xml “access plus 60 minutes”
</IfModule>

Wykonanie tego zabiegu w wielu przypadkach znacząco przyśpiesza działanie strony.

 

Podsumwanie:

Przyśpieszenie działania strony nie jest już jedynie kaprysem lecz bardzo ważną wytyczną, która w coraz większym stopniu będzie decydować o tym czy pozyskamy klienta przez stronę internetową oraz jakie pozycje uzyskamy w wynikach wyszukiwania google. Wykonanie powyżej opisanych czynności z pewnością wyprowadzi Twoją stronę na wyżyny prędkości jej wczytywania. Algorytm pagespeed został zapowiedziany na wakacje tak więc zostało już nie wiele czasu na przygotowanie się do niego.

Dodaj komentarz