Szybkość działania strony strony internetowej

smartfon

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?

Co jest najważniejsze w trakcie ładowania strony w przeglądarce? 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. Opóźnione ładowanie dotyczy to wielu skryptów, 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 strony, 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 to ilość i prędkość przesyłanych danych, która ma wpływ na prędkość ładowania strony. Na prędkość przesyłu danych nie mamy wpływu, bo to główni sprawa prędkości internetu. 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ę, strona działa szybciej.

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 o1,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.

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/. Dzięki niemu dokonamy szybkiej analizy i uzyskamy konkretne porady. Stronę 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.

Pamiętajmy, że testy 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, który warto sprawdzić otwierając stronę w trybie „incognito” na różnych urządzeniach i w różnych miejscach (różny dostawca internetu).