Szybkość działania strony internetowej jest bardzo ważna, zwłaszcza szybkość pierwszego ładowania w przeglądarce. Jeśli strona ładuje się zbyt wolno, to wielu internautów rezygnuje i próbuje otworzyć inną. Szczególnie niekorzystne jest to dla stron internetowych firm, ponieważ wiąże się z tym, że firma traci potencjalnych klientów z tego kanału marketingowego. Nie ma nowych odwiedzających, dotychczasowi również rezygnują, nie ma interakcji z nimi, w rezultacie taka strona internetowa jest do niczego nie przydatna.
Co z naszej reklamy, co z pierwszych pozycji na najważniejsze słowa kluczowe w wyszukiwarce Google, jeśli każdy, kto wejdzie na naszą stronę, wyjdzie, zanim cokolwiek zobaczy? Jeśli naszą stroną jest sklep internetowy, to zbyt mała szybkość ładowania się strony skutkuje po prostu niższą sprzedażą.
***
Co jest najważniejsze w trakcie ładowania strony w przeglądarce? Szybkość ładowania strony internetowej dla wielu uzytkowników często oznacza czas po jakim pojawia się jakakolwiek grafika ze strony, bo wtedy internauta wie, że strona zaraz się pokaże. Minie jeszcze trochę czasu zanim strona stanie się interaktywna, czyli będzie można coś na niej zrobić, ale to ma już mniejsze znaczenie. W tym czasie i tak pojawi się przycisk akceptacji cookies albo coś w tym rodzaju – trzeba na niego zareagować, a strona w tym czasie się ładuje. Wniosek z tego jest prosty: najpierw powinno się załadować tylko to co jest potrzebne do wyświetlenia strony na tzw. pierwszym ekranie, reszta może się załadować w drugiej kolejności. Ważna jest zawartość strony internetowej, a czas do pełnego załadowania strony nie musi oznaczać, że nie możemy z niej korzystać. Stosuje się tzw. lazy loadnig, czyli opóźnione ładowanie pewnych zasobów. Opóźnione ładowanie dotyczy to wielu skryptów js, API, obrazów, nieużywanych plików CSS, które są potrzebne poza pierwszym ekranem i często jest określane terminem „lazy load”, czyli leniwe ładowanie. Zastosowanie tego rozwiązania skraca czas do pełnej interaktywności strony. Pewne zasoby blokują renderowanie witryny internetowej, do czasu, aż zostaną załadowane. Należy sprawdzić, czy można załadować je później, jeśli tak, to zyskamy kolejne ułamki sekund.
Kolejny problem wpływający na szybkość strony to ilość i prędkość przesyłania danych, która ma wpływ na prędkość ładowania strony. Na prędkość przesyłu danych nie mamy wpływu, bo to głównie sprawa prędkości internetu i jakości hostingu. Ilość danych to wielkość wszystkich plików, które należy przesłać aby strona załadowała się. Ilość plików to jedno, a wielkość to drugie. Jest coś takiego jak kompresja plików tekstowych i serwery hostingu powinny umożliwiać działanie jednej z metod kompresji. Dane skompresowane to mniejsze pliki, czas przesyłu skraca się, szybkość ładowania strony wzrasta.
Dużo problemów z czasem ładowania strony mogą sprawić obrazy, przede w wszystkim ze względu na rozmiar plików, które trzeba przesłać Powodów do kłopotów jest kilka, między innymi niewłaściwy format plików. Google zaleca kilka nowych formatów, dających potencjalne oszczędności, ale należy z tym uważać, ponieważ nie zawsze można je zastosować. Niektóre przeglądarki ich nie akceptują nowych formatów, dlatego na razie lepiej pozostać przy dotychczasowych, najlepiej jpg. Przede wszystkim zanim wgramy pliki do CMS-a (systemu zarządzania treścią), w którym tworzona jest strona, to musimy je przygotować. Zdjęcia powinny mieć odpowiednią wielkość, taką, jaka potrzebna jest na stronie, nie większą. Jeśli zdjęcie na stronie internetowej ma maksymalną szerokość 800px, to nie należy wgrywać większego, bo to nic nie daje, a powiększa ilość danych do przesyłania. Zbyt duże zdjęcia zmniejszamy, „cięższe” formaty zdjęć, o ile można, zmieniamy na bardziej popularny, na przykład wspomniany jpg.
Kolejny krok to kompresja zdjęć, która zmniejsza wielkość plików. Robimy to, kilkakrotnie zmieniając stopień kompresji, do momentu kiedy utrata jakości jest jeszcze do zaakceptowania. Kompresując zdjęcia możemy zyskać dodatkowe kilkadziesiąt procent wielkości pliku. Mniej danych do przesłania, to szybsze działanie strony. Przykład z ostatniej chwili: zdjęcie w formacie png miało 1963 KB i 1594 px szerokości, po zmniejszeniu szerokości do 640 pikseli zdjęcie miało 298 KB, po zmianie formatu na jpg i kompresji plik ma tylko 32KB. Podmiana tego pliku na stronie internetowej to mniej o 1,9 MB danych do przesłania i skrócenie czasu ładowania strony nawet o 2 sekundy przy słabym łączu internetowym. Dobry CMS powinien wykonywać ze zdjęcia wszystkie niezbędne miniatury oraz rozmiary używane na stronie i podstronach oraz na różnych urządzeniach: komputerach desktop (stacjonarne), tabletach i smartfonach. W ten sposób mozna zwiekszyć szybkośc ładowania strony internetowej.
Korzystanie z pamięci podręcznej przeglądarki powoduje, że nie ma potrzeby przesyłania większości plików przy przeładowaniu strony lub ponownym otwarciu. W tym celu należy określić czas ważności plików (czas przechowywania w pamięci podręczne ) na odpowiednio długi, nawet do 360 dni. Przy kolejnym ładowaniu strony przeglądarka korzysta z plików przechowywanych w pamięci i nie wysyła żądania na serwer. Ilość danych do przesłania spada, a czas ładowania strony maleje ( czyli rośnie szybkość strony).
Co jeszcze można zrobić? Okazuje się, że sporo. Minifikacja plików html, CSS i Java Script pozwala na zmniejszenie ich wielkości, a tym samym ilości przesyłanych danych. Z kolei wcześniejsze nawiązanie połączenia z zewnętrznymi stronami, z których będą pobierane zasoby również skraca czas ładowania strony.
Można wymienić jeszcze wiele sposobów na skrócenie czasu ładowania strony, ale warto zacząć od sprawdzenia co można i powinno się zrobić. Web developerzy powinni używać narzędzia Lighthouse w środowisku przeglądarki chrome, jest do tego stosowne rozszerzenie przeglądarki. Z zasobów tego narzędzia korzysta inne, dostępne przez stronę internetową: https://developers.google.com/speed/pagespeed/insights/ (page speed insights). Dzięki narzędziu Google PageSpeed Insights dokonamy szybkiej analizy i uzyskamy konkretne porady. Pamiętajmy, że wysokie wartości punktowe w PS nie są jednoznaczne z szybkim ładowaniem strony. To raczej ocena optymalizacji strony wykonana przez Google i prawie na pewno ma wpływ na ranking w wyszukiwarce.
Prędkość strony warto również sprawdzić w innych narzędziach, np. webpagetest.org, które rysuje tzw. waterfall, na którym widać jakie zasoby blokują renderowanie, jakie zasoby są zbyt duże itd. Duże ilości wartościowych danych dostaje test na stroni gtmetrix.com. Jesli strona dodana jest do Google Search Console, to uzyskamy tam wiele konkretnych wskazówek z wewnętrznych testów prędkości wykonanych przez narzędzia od Google. Możemy wychwycić niektóre błędy na stronie internetowej.
Pamiętajmy, że testy ładowania strony internetowej przebiegają w środowiskach laboratoryjnych, więc stan faktyczny może być nieco inny ( ale tylko trochę). Czasami nie da się wykonać wszystkich zaleceń i nieraz nie warto tego robić. Nie chodzi o to, żeby uzyskać konieczne jak najlepszą ocenę strony w danym narzędziu. Liczy się przede wszystkim rzeczywisty czas ładowania strony internetowej, który warto sprawdzić otwierając stronę w trybie „incognito” na różnych urządzeniach i w różnych miejscach (różny dostawca internetu). Ponadto internauta zwraca uwagę jak szybko na ekranie pojawią sie jakieś elementy strony. Jeśli szybko, to wzrasta szansa na obejrzenie strony.
Czy szybkość ładowania sie strony internetowej wpływa na SEO? Tak, zwłaszcza przyspieszone strony mobilne, które od pewnego czasu są wyznacznikiem jakości dla Google. Optymalizacja strony powinna dotyczyć przede wszystkim zoptymalizowania wersji mobilnej pod kątem czasu ładowania. Dobrze wykonany audyt strony internetowej pozwala wychwycić najważniejsze błędy i zasugerować sposób naprawy.
