kreatywność innowacyjność
pomysłowość koncept

Jak skrócić czas ładowania strony?

CHCESZ BYĆ NA BIEŻĄCO?
ZAPISZ SIĘ DO NEWSLETTERA
Sylwia Jasiak AUTOR: Sylwia Jasiak

Ż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

Czas ladowania strony 1

1. Tani, współdzielony hosting

Powinniśmy przeanalizować kilka kwestii, żeby zlokalizować przyczyny wolnego wczytywania strony internetowej. Usługa hostingu to pierwsze miejsce, w którym powinniśmy doszukiwać się 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 “opasł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

Szybkosc wczytywania strony internetowej

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.

Powrót do listy blogowej
Newsletter Newsletter Newsletter Newsletter Newsletter Newsletter Newsletter Newsletter