Blog

Kategoria wpisu: #KNOW_HOW #TO_CIEKAWE!
Jak skr贸ci膰 czas 艂adowania strony? ';

Jak skr贸ci膰 czas 艂adowania strony?

呕ycie w ci膮g艂ym tempie wymusza na Internecie szybkie dzia艂anie stron internetowych. Oczekujemy, 偶e przej艣cie ze strony na stron臋 b臋dzie tak szybkie, 偶e a偶 niezauwa偶alne. Wolne 艂adowanie strony potrafi wzbudzi膰 zniecierpliwienie i irytacj臋 u偶ytkownika. W efekcie internauta opuszcza stron臋, a jej w艂a艣ciciel traci czytelnika i szans臋 na sprzeda偶. Jak wi臋c zapobiec takiej sytuacji, i jak wp艂ywa to na nasz膮 pozycj臋 w Google? Dlaczego strona si臋 wolno 艂aduje? W tym artykule znajdziesz odpowiedzi.

Czas 艂adowania strony – ile powinien wynosi膰? 

Statystyki czasu 艂adowania strony w odniesieniu do odczu膰 ich u偶ytkownik贸w wygl膮daj膮 nast臋puj膮co:

  • 20% wynosi spadek zadowolenia klient贸w, je艣li strona 艂aduj臋 si臋 d艂u偶ej ni偶 2 sekundy.
  • 40% u偶ytkownik贸w opu艣ci witryn臋 internetow膮, je艣li w przeci膮gu 3 sekund nie otrzyma wyniku.
  • 47% internaut贸w oczekuje, 偶e strona za艂aduje si臋 w przeci膮gu 2 sekund.
  • 90% u偶ytkownik贸w opu艣ci stron臋, je艣li nie za艂aduje si臋 do 5 sekund.

Jaki jest wi臋c optymalny czas 艂adowania? Wynika z nich, 偶e czas w kt贸rym strona powinna zosta膰 wyrenderowana wynosi 3 sekundy. Oczywi艣cie jest to cel do kt贸rego nale偶y d膮偶y膰, ale czy za wszelk膮 cen臋? Rozwa偶my korzy艣ci ze skr贸cenia czasu 艂adowania strony.

Zalety posiadania szybkiej strony WWW

  1. Szybkie 艂adowanie strony internetowej聽 poprawia pozycj臋 w wyszukiwarce. Dla Google jest to jeden z czynnik贸w rankingowych i na topowych pozycjach wy艣wietla strony, kt贸re nie maj膮 op贸藕nie艅 w czasie wczytywania.聽
  2. Szybko 艂aduj膮ca si臋 strona to lepsza satysfakcja u偶ytkownika (tzw. User Experience). Nikt z nas nie chce traci膰 czasu na d艂ugie oczekiwanie o wynik zapytania.
  3. Zwi臋kszenie konwersji. Je艣li u偶ytkownik otrzyma odpowied藕 zwrotn膮 szybko, istnieje wi臋ksza szansa na dokonanie konwersji, czyli np. sprzedania produktu czy zapisu do newsletter.
  4. Zmniejszenie wsp贸艂czynnika odrzuce艅. Zbyt d艂ugi czas 艂adowania strony spowoduje, 偶e mo偶emy straci膰 u偶ytkownika bezpowrotnie.聽
  5. Poprawa wska藕nika Quality Score, kt贸ry optymalizuje koszty klikni臋膰 i pozycj臋 wy艣wietlanych reklam np. w programie Google Ads.

Dlaczego moja strona si臋 wolno 艂aduje? 5 g艂贸wnych powod贸w

Jak skr贸ci膰 czas 艂adowania strony? 1

1. Tani, wsp贸艂dzielony hosting

Powinni艣my przeanalizowa膰 kilka kwestii, 偶eby zlokalizowa膰 przyczyny wolnego wczytywania strony internetowej. Hosting to pierwszy element, kt贸ry powinni艣my sprawdzi膰 w procesie poszukiwania winowajcy wolnego 艂adowania si臋 strony. Tanie, wsp贸艂dzielone serwery mog膮 nie radzi膰 sobie z jednoczesnym wy艣wietlaniem wielu stron internetowych. Obci膮偶one do granic mo偶liwo艣ci serwery nie nad膮偶aj膮 z ich renderowaniem, a to wp艂ywa na pr臋dko艣膰 wczytywania. 

Je艣li strona jest zbudowana na Wordpresie, warto skorzysta膰 z hostingu dedykowanego dla systemu. Takie serwery s膮 odpowiednio skonfigurowane do pracy z WP oraz posiadaj膮 preinstalowane modu艂y (np. LiteSpeed Cache), kt贸re optymalizuj膮 czas wczytywania takiej strony. Wi臋kszo艣膰 wiod膮cych us艂ugodawc贸w posiada w swojej ofercie odpowiednie pakiety hostingowe.聽

Nale偶y wiedzie膰, 偶e wraz ze wzrostem odwiedzalno艣ci naszego sklepu internetowego czy bloga, wzro艣nie potrzeba wydajno艣ci naszego serwera. To mo偶e wi膮za膰 si臋 z konieczno艣ci膮 przeprowadzki na serwer dedykowany. Koszty hostingu dedykowanego s膮 znacznie wi臋ksze. Cz臋sto konieczna jest r贸wnie偶 zaawansowana konfiguracja. Maj膮c serwer dedykowany b臋dziemy mieli pewno艣膰, 偶e nasza strona b臋dzie dzia艂a艂a bez przerwy, nawet przy tysi膮cach jednoczesnych odwiedzin. 

2. Brak odpowiedniej optymalizacji kodu strony internetowej

Na czas 艂adowania strony internetowej wp艂ywa r贸wnie偶 kod 藕r贸d艂owy naszej witryny. Cz臋sto bywa 鈥渙pas艂y鈥 i niezoptymalizowany. Wraz z rozwojem strony i dodaniem nowych funkcjonalno艣ci pojawiaj膮 si臋 kolejne linijki kodu i zasoby do wczytania. Z pomoc膮 przy diagnozie stanu kodu przychodzi Error log serwera, czyli dziennik b艂臋d贸w. Analiza takiego pliku pozwoli wyeliminowa膰 niepotrzebne b艂臋dy. Pomocna mo偶e si臋 okaza膰 r贸wnie偶 konsola b艂臋d贸w przegl膮darki czy Screamming frog. Ten ostatni pozwoli zidentyfikowa膰 niepotrzebne przekierowania, czy nieistniej膮ce zasoby, kt贸re generuj膮 b艂膮d 404. 

Cz臋sto spotykanym problemem jest r贸wnie偶 archaiczna struktura samej strony internetowej. Powszechne niegdy艣 systemy tabelaryczne, kt贸re by艂y wykorzystywane do programowania stron nios膮 za sob膮 mas臋 zb臋dnych linijek kodu. W tym przypadku jednak sama optymalizacja mo偶e nie wystarczy膰 i zmuszeni b臋dziemy do przeprojektowania i przeprogramowania ca艂ej strony internetowej. 

3. Wtyczki i jeszcze raz wtyczki

Nasze kolejne kroki zwi膮zane z optymalizacj膮 strony, powinny prowadzi膰 do ograniczenia ilo艣ci wykorzystywanych wtyczek. Programi艣ci cz臋sto id膮c na skr贸ty wykorzystuj膮 ca艂e wtyczki do zapewnienia funkcjonalno艣ci, do kt贸rej wystarczy艂oby kilka linijek kodu. 

Warto wi臋c pami臋ta膰 o tym aby ograniczy膰 ilo艣膰 wykorzystywanych wtyczek do niezb臋dnego minimum. Nasza strona internetowa odwdzi臋czy si臋 nie tylko szybszym dzia艂aniem ale i mniejsz膮 awaryjno艣ci膮. Wtyczki r贸wnie偶 potrafi膮 odm贸wi膰 wsp贸艂pracy, b艂臋dnie si臋 zaktualizowa膰, czy wr臋cz przyczyni膰 do podatno艣ci na w艂amania.

Wa偶na kwestia zwi膮zana z pr臋dko艣ci膮 strony to r贸wnie偶 korzystanie z edytor贸w wizualnych czyli tzw. Page Builder贸w typu drag & drop. Maj膮 one swoich zwolennik贸w ale nie brakuje r贸wnie偶 ich przeciwnik贸w. Ci pierwsi, chwal膮 edytory wizualne za mo偶liwo艣膰 samodzielnego wykonania layout贸w stron. Drudzy z kolei, krytykuj膮 je za du偶膮 ilo艣膰 niepotrzebnego kodu. Obie grupy maj膮 swoje racje, cho膰 ten kto widzia艂 kod wynikowy takiego kreatora, szybko do艂膮czy do ich przeciwnik贸w.

4. Obrazki ci臋偶kiego kalibru

Na czas 艂adowania strony internetowej du偶y wp艂yw maj膮 tak偶e grafiki i obrazki. Warto zadba膰 o ich odpowiedni format oraz rozmiar. Z regu艂y im wi臋ksze zdj臋cie, tym wi臋cej wa偶y, a wi臋c b臋dzie b臋dzie si臋 d艂u偶ej wczytywa膰.

Rozdzielczo艣膰 FullHD to 1920px x 1080. Nie ma wi臋c wi臋kszego uzasadnienia aby wgrywa膰 na stron臋 obrazek, kt贸ry ma 10 000 pikseli szeroko艣ci. Do nag艂贸wka strony spokojnie wystarczy nam 2500 px. Nieco wi臋kszy obrazek da nam komfort jego wykadrowania i zajmie mniej miejsca na serwerze. Podobnie jest w przypadku obraz贸w, ozdobnikowych dla tre艣ci. Je偶eli szeroko艣膰 tre艣ci wynosi ok. 1000 pikseli, to obrazek nie musi przekracza膰 tej warto艣ci. 

Nowoczesne systemy CMS jak WordPress serwuj膮 ju偶 pomniejszone wersj臋 nawet du偶ych obraz贸w. Warto jednak trzyma膰 kontrol臋 nad tym, jaka wielko艣膰 zdj臋cia jest wgrywana na serwer i jak膮 rozdzielczo艣膰 maj膮 zdj臋cia wy艣wietlane na stronie. 

Nie bez znaczenia jest r贸wnie偶 stopie艅 kompresji obraz贸w rastrowych np. JPG. W programach do obr贸bki graficznej, jak i w wielu narz臋dziach online mo偶emy skompresowa膰 jako艣膰, tak aby udost臋pni膰 obrazek o optymalnej jako艣ci i wadze. Wartym uwagi jest narz臋dzie TinyPNG, kt贸re skompresuje nasze obrazki zmniejszaj膮c ich wag臋, bez zauwa偶alnej straty jako艣ci.

Przez lata najcz臋艣ciej wykorzystywanymi formatami obraz贸w by艂y JPG, PNG oraz GIF. Wraz z rozwojem technologii internetowych pojawi艂y si臋 nowe formaty jak SVG czy Webm. Format Webm, pomimo 偶e rozwijany jest przez Google od 10 lat, nie wypar艂 innych format贸w rastrowych. Nie jest r贸wnie偶 obs艂ugiwany przez starsze wersje przegl膮darek. Warto jednak nim si臋 zainteresowa膰.  

Podsumowuj膮c temat optymalizacji obraz贸w, pami臋taj aby:

  • Zmniejsza膰 rozdzielczo艣膰 obraz贸w do takiej, jaka jest Ci potrzebna na stronie
  • Zadba膰 o optymaln膮 kompresj臋 obraz贸w
  • Wykorzystywa膰 nowoczesne formaty jak SVG czy Webp
  • Rozwa偶y膰 wykorzystanie narz臋dzi online, czy wtyczek, kt贸re pomog膮 w realizacji punkt贸w 1-3

5. Zastosowanie du偶ej ilo艣ci font贸w

Czcionka, a m贸wi膮c precyzyjniej font, r贸wnie偶 wp艂ywa na pr臋dko艣膰 艂adowania strony. Ka偶da font musi zosta膰 za艂adowany na stron臋, zanim zostanie na niej wy艣wietlony. 

Kreatywno艣膰 projektant贸w nie zna granic. Projektuj膮c interfejs witryny, zaplanuj optymaln膮 liczb臋 font贸w do wczytania. Optymalna ilo艣膰 to 2-3 r贸偶ne kroje. Pierwszy wykorzystywany b臋dzie to g艂贸wnej tre艣ci, drugi do nag艂贸wk贸w, a opcjonalny trzeci mo偶e by膰 u偶yty dla wprowadzenia odpowiedniego efektu wizualnego (np. odpowiedniego kontrastu, czy wyartyku艂owania danej tre艣ci).  

Nale偶y pami臋ta膰 tak偶e o dostosowaniu do wymog贸w dla danego j臋zyka. Nale偶y dobra膰 taki rodzaj fontu, kt贸ry zawiera glify dostosowane w danym j臋zyku jak np. polskie znaki diakrytyczne czy cyrylica.

Jak przetestowa膰 szybko艣膰 艂adowania strony?
Poznaj narz臋dzia diagnostyczne

Jak skr贸ci膰 czas 艂adowania strony? 3

Google PageSpeed Insights

To darmowe i najwa偶niejsze narz臋dzie prosto ze stajni Google. Po wprowadzeniu swojego adresu URL otrzymamy wyniki dotycz膮ce szybko艣ci wy艣wietlania na ka偶dym obszarze. Narz臋dzie zdiagnozuje potencjalne powody wyd艂u偶enia czasu 艂adowania. Otrzymamy sugestie, dotycz膮ce tego co mo偶emy zrobi膰, aby usprawnieniu pr臋dko艣ci 艂adowania witryny. Co wa偶ne, PageSpeed umo偶liwia sprawdzenie wydajno艣ci zar贸wno na komputerach jak i kom贸rkach.

Pingdom Website Speed Test

To proste i darmowe narz臋dzie zbada czas, wag臋 poszczeg贸lnych element贸w jak i ilo艣膰 zapyta艅 do serwera. Testy mo偶na wykonywa膰 z wykorzystaniem serwer贸w zlokalizowanych na r贸偶nych kontynentach. W wyniku badania otrzymamy kr贸tki audyt pomocny w zlokalizowaniu w膮skich garde艂 serwisu WWW.

Konsola przegl膮darki

W przegl膮darce Chrome znajdziemy narz臋dzie diagnostyczne o nazwie Chrome DevTools. Wystarczy na analizowanej stronie internetowej klikn膮膰 klawisz F12, aby uzyska膰 szczeg贸艂owe informacje na temat tego co si臋 dzieje „pod powierchni膮” przegl膮darki w momencie wczytywania strony. Interfejs mo偶e wydawa膰 si臋 z艂o偶ony, jednak po kr贸tkim czasie i przy odrobinie znajomo艣ci zasad dzia艂ania stron internetowych, otrzymamy nieocenione narz臋dzie diagnostyczne. Zidentyfikujemy wszystkie pobierane zasoby a nawet b艂臋dy kodu JavaScript.

Wtyczki dla WordPressa

Nie zawsze mamy mo偶liwo艣膰 manualnego zmniejszenia obraz贸w na naszej stronie. Dzieje si臋 tak, gdy nasz serwis istnieje ju偶 w Sieci i posiada du偶膮 ilo艣膰 zasob贸w. Wtedy z pomoc膮 mog膮 przyj艣膰 nam wtyczki, kt贸re przerobi膮 istniej膮ce zasoby na serwerze i zadbaj膮 aby kolejne renderowane by艂y ju偶 w nowych formatach. Takim, przyk艂adem jest wtyczka do WordPressa o nazwie Imagify lub darmowa Webp Express. Z pomoc膮 mo偶e przyj艣膰 r贸wnie偶 wtyczka WP Fastest Cache przeznaczona do cachowania strony internetowej lub p艂atny ale bardzie wszechstronny WP Rocket.

Podsumowanie

Google w swojej idei Internetu chce swoim u偶ytkownikom dostarczy膰 najwarto艣ciowsze wyniki w mo偶liwie kr贸tkim czasie – jest to zrozumia艂e. Optymalizacja pr臋dko艣膰 wy艣wietlania strony internetowej ma ogromne znaczenie w czasach, gdy o uwag臋 u偶ytkownika musimy walczy膰. Powiedzenie „czas to pieni膮dz” ma tutaj szczeg贸lnie dos艂owne znaczenie.

SZYBKA wycena
WYPE艁NIJ BRIEF ONLINE
TO NIC NIE KOSZTUJE