Czas ładowania strony – błędy, porady i tricki
Szybkość ładowania strony jest jednym z kluczowych zagadnień, jeżeli mówimy o skuteczności witryny. Od tego czynnika zależy nie tylko pozycja w wyszukiwarce Google, lecz także to, czy użytkownik na niej pozostanie.
Czy szybkość ładowania strony internetowej ma znaczenie?
Obecne możliwości technologiczne pozwalają tworzyć piękne, eleganckie i stylowe strony internetowe, które swoim wyglądem zadowoliłyby nawet najwybredniejszych. Coraz więcej elementów graficznych strony oraz zaawansowanych animacji powoduje, że użytkownika można zatrzymać na stronie dłużej, co często przekłada się na większą sprzedaż.
W końcu strona jest jak wirtualne biuro. Kiedy jest brzydkie, ponure i odpychające, odwiedzający po prostu wychodzą.
Jeżeli jesteście ciekawi jak wypada Wasza strona, możecie sprawdzić to na specjalnej stronie Google, analizującej jej prędkość tutaj
Wszystko ma swoją cenę
Wizualnie miłe dla oka efekty niestety często wiążą się z kosztami, które na końcu ponosi użytkownik. Efektowne animacje wymagają większej ilości kodu, co przekłada się na wagę plików strony internetowej. Większe pliki to dłuższy czas pobierania ich z serwera – a co za tym idzie – wydłuża się czas załadowania kompletnej witryny.
Dodając do tego animacje, które wymagają dodatkowych zasobów obliczeniowych komputera użytkownika to mamy przepis na porażkę.
Gdy założeniem strony jest jedynie wyglądać i czas ładowania nie ma znaczenia dla właściciela i użytkownika to wówczas problem nie istnieje.
Jednak rzadko taka sytuacja ma miejsce, ponieważ głównym celem witryn w sieci jest jakiś wymierny cel, najczęściej finansowy.
Dziś, gdy mamy tak mało czasu, strona która wczytuje się dłużej niż kilka sekund jest przez nas praktycznie automatycznie zamykana. Nikt przecież nie będzie tracił ośmiu sekund swojego życia na bezsensowne wpatrywanie się w biały ekran przeglądarki. Już przy czterech sekundach tak naprawdę tracimy cierpliwość.
Biorąc pod uwagę wszystkie te czynniki możemy odnieść wrażenie, że jednak czas wczytywania strony może być dość istotnym elementem naszej strony internetowej.
Jakie czynniki wpływają na czas ładowania strony?
* mała uwaga: nie mając wiedzy technicznej z zakresu tworzenia stron internetowych warto udać się z prośbą o przeanalizowanie poniższych punktów do osoby zajmującej się naszą witryną, jeżeli chcemy przyspieszyć działanie strony.
✅ Wielkość plików
Opasłe pliki zawierające kod strony znacznie spowalniają działanie strony. Szczególnie wówczas, gdy kod jest rozsiany po wielu miejscach w plikach i przeglądarka wczytując stronę musi skakać od punktu do punktu, zbierając informacje potrzebne do zakończenia procesu. Kod znajdujący się w plikach wykonywalnych strony powinien być napisany możliwie krótko i zwięźle, ograniczając niepotrzebne informacje do minimum. Warto również przeanalizować czy przypadkiem strona nie wczytuje plików, które są kompletnie niepotrzebne na danej podstronie.
✅ Długi czas odpowiedzi serwera
Czas odpowiedzi serwera to nic innego jak czas od wprowadzenia adresu do wyszukiwarki do uzyskania połącznia z konkretnym miejscem na serwerze, gdzie znajduje się nasza strona. Jeżeli korzystamy z hostingu współdzielonego (popularna, najtańsza opcja serwera) – a w większości przypadków tak jest – to możemy na tym etapie tracić nawet kilka sekund. Jest to podyktowane tym, że na hostingu współdzielonym mamy ograniczone zasoby serwera właśnie z powodu współdzielenia dysku z innymi użytkownikami. Rozwiązaniem tego problemu byłoby wykupienie droższej usługi takiej jak serwer VPS lub dedykowany.
✅ Źle zoptymalizowane zapytania do bazy danych
Projektując stronę, sklep lub aplikację internetową powinno zacząć się od projektu bazy danych oraz zapytań do niej. Częstym powodem długiego czasu wczytywania strony jest właśnie źle zaprojektowana baza danych. Jeżeli pobierając produkty do sklepu aplikacja musi pobrać dane z jednej tabel, która ma setki tysięcy rekordów, nic dziwnego, że potrzebuje na to sporo czasu. W takiej sytuacji warto przeanalizować jakość naszych zapytań do bazy danych (czy nie ma zbędnych lub czy nie są w bezsensownej pętli) oraz strukturę bazy danych (choć naprawa struktury na działającej stronie będzie trudna).
✅ Wielkość plików graficznych
Opasłe zdjęcia i grafiki na naszej stronie często są powodem żółwiego tępa ładowania. Każde zdjęcie umieszczane w treści powinno być skompresowane do jak najmniejszego rozmiaru, uważając jednak na utratę jakości. Powinno się tutaj osiągnąć kompromis pomiędzy dobrą jakością zdjęcia a jego wagą. Absolutnie nie ma potrzeby umieszczać na stronie zdjęć, które ważą kilka megabajtów, ponieważ taka jakość zdjęcia jest zbędna przy wyświetlaniu na ekranie komputera. Większość grafik z powodzeniem można skompresować nawet o 90% nie tracąc widocznie na jakości wyświetlania w przeglądarce.
✅ Nieodpowiednia kolejność ładowania się elementów strony
Gdy działanie strony internetowej jest zależne od wielu plików zależnych od siebie, to aby strona została załadowana muszą zostać wczytane również te pliki. Wczytywanie kodu działa na zasadzie prostolinijnej – z góry do dołu. Jeżeli przeglądarka napotka plik, który potrzebuje inne pliku do działania to musi również wczytać ten drugi. Przykładowo gdy nagłówek strony potrzebuje pliku do załadowania animacji banneru to wczytywanie strony zatrzymuje się na chwilę, do czasu załadowania odpowiedniego pliku. Jeżeli spora część plików, które nie są potrzebne w samym procesie wczytywania jest zamieszczana w górze kodu strony, wówczas czas pobierania strony się niepotrzebnie wydłuża. Pliki takie mogą zostać przeniesione na dół kodu strony, aby wczytały się już po załadowaniu strony w przeglądarce.
✅ Źle napisany kod
Jakość kodu naszej strony ma kolosalne znaczenie w przypadku szybkości strony. O ile w przypadku małych stron firmowych, nie ma to dużego znaczenia, tak problem pojawia się gdy mamy do czynienia z większym serwisem. Niedbale napisany kod może powodować niepotrzebne wykorzystanie mocy obliczeniowej serwera, powodując nie tylko powolne ładowanie lecz także szybsze zużywanie zasobów serwera, które mamy wykupione (miesięczny transfer danych).
✅ Przeładowane animacje
To prawda, że ciekawe animacje zwiększają atrakcyjność strony internetowej (zazwyczaj). Dzisiejsze przeglądarki posiadają bardzo dużo możliwości jeżeli chodzi o prezentowanie ruchomych elementów, co z przyjemnością wykorzystują projektanci stron. Jednak duża ilość animowanych grafik może spowodować bardzo poważne opóźnienia w ładowaniu witryny, szczególnie w przypadku, gdy użytkownik posiada słabe połączenie internetowe oraz mało wydajny komputer. Warto się zastanowić wówczas kto jest naszym docelowym odbiorcą i czy będzie on miał możliwość płynnego odtworzenia animacji.
✅ Szybkość łącza użytkownika
Na to niestety nie mamy dużego wpływu jakie użytkownik ma łącze internetowe. Jednak tworząc stronę internetową musimy brać pod uwagę to, że nie wszyscy posiadają szybki internet w domu lub w podróży. Jest to szczególnie ważne, gdy projektujemy witrynę dostępności publicznej lub dla szerokiego grona odbiorców. Zbyt ciężka strona dla użytkowników ze słabym połączeniem internetowym może wczytywać się minutami, a czasem serwer może nawet przerwać wczytywanie ze względu na zbyt długi czas. W przypadku stron posiadających ważne informacje publiczne taka sytuacja jest oczywiście niedopuszczalna.
Google też patrzy Ci na ręce
Ucieczka użytkowników ze strony internetowej ze względu na długi czas wczytywania to nie jedyny problem właściciela witryny. Od dłuższego czasu wyszukiwarka Google kategoryzuje strony pod względem czasu ich ładowania i na jego podstawie ustala ich pozycję w katalogu.
Czas ładowania strony ma ogromny wpływ na pozycję strony w Google po wpisaniu poszukiwanego hasła. Czyli wpisując np. „używane kombajny”, strona firmy, która wczytuje się szybko ma spore szanse być na pierwszych miejscach. Natomiast jej konkurencja, z czasem wczytywania strony kilkunastu sekund (z powodu klimatycznej muzyki w tle) może być na drugiej lub nawet trzeciej stronie wyników.
Przy pozycjonowaniu witryny czas ładowania strony jest bardzo ważnym czynnikiem dla wyszukiwarki Google. Dzieje się tak dlatego, że wyszukiwana strona – oprócz serwowanej treści – powinna być także przyjazna dla odwiedzającego. Czytelna, łatwa w nawigacji, responsywna i właśnie – szybka.
Na takie elementy Google również patrzy przy pozycjonowaniu strony w swoim katalogu. Tak naprawdę nie warto nawet zaczynać pozycjonowania, jeżeli najpierw nie rozwiąże się problemu z wczytywaniem strony.
Narzędzia przydatne do optymalizacji czasu ładowania strony
Istnieje wiele narzędzi – płatnych i darmowych – pozwalających na analizę szybkości wczytywania strony internetowej. Część z nich da nam zwrotną informację po prostu o czasie załadowania strony, niektóre powiedzą nam które elementy ładowały się najdłużej.
Są też takie, które powiedzą dokładnie czas wczytywania każdego elementu oraz jak to naprawić. Im droższe programy tym często dokładniejsza i wartościowsza analiza.
Jednak Google w swoich wymaganiach nie pozostawia nas samych. Istnieje świetne, w dodatku darmowe narzędzie do analizy czasu ładowania strony. W nim dowiemy się jak Google ocenia szybkość naszej witryny. W punktacji możemy uzyskać 100/100 punktów, jednak taki wynik jest zarezerwowany dla błyskawicznych stron.
Google Insights podpowie dokładnie jakie zabiegi optymalizacyjne powinny zostać przeprowadzone na stronie aby ładowała się ona szybciej. Sugerując się uwagami tylko z tego jednego narzędzia możemy kilkukrotnie przyspieszyć czas ładowania strony, co da nie tylko przewagę w wyszukiwarce, lecz także zatrzyma niekontrolowany odpływ użytkowników.
Warto jednak nadmienić, że spora część z tych uwag wymaga odrobiny wiedzy technicznej, więc warto się wówczas zgłosić do firmy, która zajmuje się naszą stroną.
Co mogę sam zrobić aby poprawić sytuację?
Nie zawsze posiadamy wystarczającą wiedzę techniczną aby samodzielnie przyspieszyć naszą stronę. Jednak istnieją pewne sposoby, które bez większej wiedzy technicznej możemy wykorzystać do przyspieszenia naszej witryny internetowej.
💡 Lepszy serwer
Gdy mamy możliwość wykupienia wyższego pakietu usług serwerowych, które zwiększą zasoby serwera (a w tym może i jego prędkość) warto skorzystać z takiej opcji. Firmy hostingowe mają również w swojej usłudze serwery VPS oraz dedykowane (droższe, lecz dużo szybsze). Za pewną opłatą firma hostingowa nawet pomoże nam przenieść naszą stronę internetową na lepszy serwer, co pozwoli się cieszyć dużo szybszą witryną.
💡 Darmowe wtyczki cache (WordPress, Joomla)
Ze względu na popularność systemów WordPress i Joomla sporo stron internetowych opiera się właśnie na nich. Przemawia za nimi ich popularność oraz cena (są darmowe). Ogromna popularność tych systemów przyczyniła się do powstania dużej społeczności wokół nich. Dzięki temu istnieje bardzo dużo darmowych rozwiązań (wtyczek, pluginów), które pozwalają na przyspieszenie działania strony. Popularnym rozwiązaniem jest pamięć podręczna strony (Cache), która zapisuje dynamiczne elementy strony w formie statycznej i nadpisuje je tylko wtedy, gdy zaszła w nich jakaś zmiana. Pozwala to na dużo szybsze pobieranie zasobów strony. Warto poszukać darmowych wtyczek Cache, które odciążą nasz serwer. Instalacja najczęściej jest banalnie prosta.
💡 Obrazy na stronie w jak najmniejszej wadze pliku
Wgrywając zdjęcia na stronę internetową warto najpierw przeprowadzić na nich odpowiednią kompresję. Rozdzielczość zdjęcia liczymy w pikselach na cal. Często zdjęcia dobrej jakości, z aparatu fotograficznego posiadają rozdzielczość 300 dpi (piksele na cal) aby były dobrej jakości w druku. Jednak takiej jakości absolutnie nie potrzebujemy do grafiki komputerowej. Ekran komputera wyświetla grafikę w rozdzielczości 72 dpi. Zmniejszając rozdzielczość zdjęcia możemy zaoszczędzić mnóstwo miejsca. Dodatkowo jak zmniejszymy jakość zdjęcia o kilkanaście lub kilkadziesiąt procent, zyskujemy kolejne, cenne megabajty. I tak ze zdjęcia które waży 5 MB możemy zejść nawet do 300 KB! Warto taki zabieg przeprowadzać na każdej wgrywanej na stronę grafice.
💡 Brak multimediów jak muzyka czy filmy
Wszelkiego rodzaju animacje lub filmy video na stronie – jakkolwiek atrakcyjne by one nie były – spowalniają czas ładowania strony. To jest po prostu taki element strony, który ciężko zoptymalizować. Zawsze będzie cięższy od innych elementów na stronie internetowej. Jeżeli potrzebujemy tego na stronie, możemy spróbować zmniejszyć jego rozmiar do minimum oraz spróbować ładować go asynchronicznie, aby wczytał się dopiero wówczas, kiedy będzie potrzebny. Jeżeli jednak nie potrzebujemy multimediów na stronie, a tylko nam się tak wydaje, wtedy warto zastanowić się nad potrzebą ich umieszczania.
💡 Mniejsza ilość animacji
Animacje – wiadomo – ożywiają stronę. Jednak przeładowanie witryny ruchomymi elementami może mieć skutek odwrotny od zamierzonego. Zamiast przyciągać użytkownika atrakcyjnością, odrzucą go przez to, że korzystanie ze strony stanie się utrudnione. Korzystajmy z animacji, lecz z rozwagą. Warto po uruchomieniu animacji zrobić testy szybkości ładowania strony i wyłączyć te, które najbardziej spowalniają witrynę.
