Sposoby na to, jak poprawić szybkość ładowania strony internetowej

Jak często wychodzicie ze strony, zanim zdąży się załadować? Według Google aż 53% mobilnych użytkowników decyduje sie porzucić stronę, jeśli ładuje się dłużej niż 3 sekundy. Co wpływa na to, jak wolno strona się wczytuje, a przede wszystkim - jak temu zaradzić? W naszym artykule szczegółowo omówimy te zagadnienia.

Co to jest szybkość ładowania strony i co na nią wpływa?

Szybkość ładowania strony internetowej to różnica czasu od chwili kliknięcia w dany link a momentu, w którym dana strona się wczytała (bądź już odpowiada na nasza interakcję). Kwestia ta jest bardzo ważna pod względem UX (User Experience - doświadczenie użytkownika), nikt z nas przecież nie chce czekać na powolną stronę.

Warto też zaznaczyć, że w obecnych czasach prędkość ładowania strony na urządzeniach mobilnych jest równie ważna, a czasami nawet ważniejsza, niż na komputerach stacjonarnych i laptopach. Dobrze jest zacząć myśleć o tym aspekcie już podczas procesu projektowania aplikacji. Podejście mobile first (tworzenie wersji mobilnych aplikacji w pierwszej kolejności) przy stylowaniu naszego serwisu zazwyczaj pozwoli oszczędzić paręnaście procent wielkości pliku, co na dłuższą metę może zrobić widoczną różnicę.

Liczba i rozmiar dodatkowych plików

Zdecydowana większość witryn, które możecie zobaczyć w Internecie, nierzadko korzysta z różnorakich obrazków lub skryptów, aby np. odzwierciedlić to, co chce przedstawić, poprawić doświadczenie użytkownika czy zachęcić go do podjęcia jakichś akcji.

Czasy stron z długimi ścianami tekstu dawno minęły, aczkolwiek zmiana ta przyniosła konsekwencję w postaci znacznie większej ilości danych, które przeglądarka musi obsłużyć. W każdej chwili możemy sprawdzić, co dokładnie ściąga nasza przeglądarka, po wejściu na jakąkolwiek stronę. Aby to zrobić, wystarczy otworzyć zakładkę Network w narzędziach deweloperskich (polecamy do tego skrót klawiszowy Ctrl+Shift+I). Należy wtedy odświeżyć stronę, a cała lista ściąganych plików uzupełni się na naszych oczach.

Przykład ze strony https://youtube.com.

Fonty

Choć wydają się niepozorne, bo to tylko rodzaj i krój czcionki, fonty potrafią dołożyć swoją cegiełkę do łącznego czasu ładowania strony. Ta kwestia leży bardziej po stronie designerów, choć oczywiście trochę odpowiedzialności ciąży także na barkach naszych - deweloperów, gdyż musimy sobie odpowiedzieć na kilka pytań:

• Czy nasz serwis potrzebuje tyle różnych fontów?
• Czy czcionki, które wgraliśmy na serwer mają tylko te style, które wykorzystujemy?
• Czy wykorzystujemy mechanizm podmiany fontów, aby ograniczyć skumulowane przesunięcie układu (ang. CLS - Cumulative Layout Shift)?
• Czy przesyłamy fonty w najbardziej optymalnym formacie?

Niewidoczne elementy

Krąg życia na naszej stronie trwa nie tylko tam, gdzie akurat patrzymy. Niektóre witryny potrafią być obficie obłożone różnorakimi elementami, które - choć obecnie niewidoczne - mogą obciążyć naszą przeglądarkę.

Załóżmy, że chcemy odwiedzić naprawdę długą stronę. Im dłuższa witryna tym więcej rzeczy ma w sobie, co oznacza więcej danych do pobrania. Przeglądarka pobierze całą stronę i wszystko co zostało dla niej przygotowane, aby było dostępne “na start”, mimo że to, co możemy zobaczyć, stanowi tylko ułamek tej wielkiej całości.

Nieoptymalny kod

Jeśli spotkaliście się kiedyś z sytuacją, w której wydawało się Wam, że strona się już wczytała, ale nie można było wejść z nią w interakcję, np. poprzez klikanie czy przewijanie, winowajcą mógł być prawdopodobnie niewydajny kod.

Najczęściej efekt, który chcemy osiągnąć na stronie można napisać na tysiąc różnych sposobów. Nie każdy jednak sprawi, że kod będzie wykonywał się z takim rezultatem, jakiego oczekujemy.

Skrypt, który śledzi przewijanie strony przez użytkownika zazwyczaj nie musi odpalać się za każdym razem, a wtedy, gdy odwiedzający przestał przewijać stronę. Natomiast wysyłanie kilkunastu lub kilkudziesięciu żądań do API na sekundę na pewno nie jest dobrym rozwiązaniem.

Jak zbadać szybkość ładowania strony internetowej?

Do sprawdzenia szybkości ładowania strony, jak i całej jej wydajności, można wykorzystać narzędzie, które jest wbudowane w przeglądarki z rodziny Chromium (np. Chrome, Brave). W tym celu ponownie uruchamiamy narzędzia deweloperskie, a konkretniej zakładkę Lighthouse. Za pomocą tego narzędzia możemy przeprowadzić audyt strony, na której się znajdujemy. Możemy też oczywiście tego dokonać za pomocą innych przeglądarek przez stronę PageSpeed Insights.

Przykładowy audyt strony, wykonany za pomocą PageSpeed Insights.

Po przeprowadzonej inspekcji otrzymamy pakiet danych dotyczących różnych zagadnień, związanych z wczytywaniem się strony i nie tylko. Narzędzie dostarcza różne statystyki oraz wykresy. Dużym plusem korzystania z tej aplikacji jest fakt, że oprócz samych znalezionych problemów, dostajemy także wyjaśnienie, dlaczego dana rzecz jest niekorzystna oraz jak temu zaradzić.

 

Dobrym pomysłem będzie uruchomienie takiego testu zarówno w wersji mobilnej jak i desktopowej, gdyż wyniki te mogą się znacznie różnić. Wynika to z faktu, że na różne urządzenia mogą być przesyłane różne wersje skryptów czy stylów. Dla urządzeń mobilnych inne aspekty są brane pod uwagę bardziej, a inne mniej, w zależności od przyjętych standardów.

Warto też zaznaczyć, że poprawiając czynniki z sekcji Core Web Vitals, ulepszymy zarówno komfort użytkowników na stronie jak i aspekty związane z SEO. Google (lub inne wyszukiwarki) będą wyświetlać chętniej taką witrynę na pierwszych stronach wyszukiwań.

Dodatkową pomocą w walce z optymalizacją działania naszej strony jest zakładka Performance w narzędziach deweloperskich. Przy jej użyciu możemy nagrać działanie strony, a następnie przeanalizować, dlaczego ta strona potrzebowała daną ilość czasu, żeby się załadować i czym było to spowodowane. Dostaniemy tam dokładną hierarchię wywołań kodu, wraz ze zrzutami strony podczas jej nagrywania. Sprawdzimy tam również animacje dostępne na stronie, potencjalne wycieki pamięci czy np. wykorzystanie karty graficznej.

Jak poprawić szybkość ładowania strony?

Wiemy już, co wpływa na ładowanie strony oraz jak można to sprawdzić. Pozostała najważniejsza kwestia, jak teraz wdrożyć świeżo nabytą wiedzę i poprawić wydajność naszej witryny. Kto jest jednak odpowiedzialny za prędkość wczytywania? Deweloperzy, content marketerzy czy może osoba zajmująca się serwerem hostingowym i wdrożeniami? Okazuje się, że każdy może dołożyć swoją cegiełkę do tego, aby dany serwis wczytywał się szybciej.

Optymalizacja obrazów

Niezoptymalizowane grafiki potrafią znacznie obciążyć naszą przeglądarkę swoją wagą. Szczególną uwagę należy zwrócić tam, gdzie użytkownicy mogą wgrywać własne obrazki. Najczęściej obrazy, które dodajemy na stronę nie mają rozmiaru większego niż ok. 500x500px (nie licząc tych do tworzenia oryginalnych designów), trzeba więc upewnić się, że rzeczywisty rozmiar grafiki nie przekracza rozmiaru wyświetlanego w przeglądarce.

W Drupalu idealnie sprawdzi się do tego moduł Responsive Image, który pozwoli przygotować odpowiednio zeskalowany obrazek, w zależności od szerokości wyświetlacza naszego urządzenia, w połączeniu z potężnym mechanizmem przeglądarki - picture tagiem. Wewnątrz niego możemy dowolenie ustawić, który rozmiar obrazka ma zostać pobrany z serwera do przeglądarki użytkownika, w zależności od kilku czynników:

• szerokości wyświetlacza,
• gęstości pikseli (urządzenia Apple i nowsze telefony korzystają z większej gęstości niż zwykłe monitory),
• wsparcia dla różnych rozszerzeń grafik.

Dodatkowo możemy również ”odchudzić” nasze zdjęcia za pomocą kompresji. Do tego celu powstały różne narzędzia, takie jak Image Compressor. Taka kompresja pozwoli zaoszczędzić parędziesiąt kilobajtów,a czasami nawet i więcej.

Kluczowym aspektem przy optymalizacji grafik jest również to, w jakim rozszerzeniu je wysyłamy. Chociaż .jpg i .png świetnie służa nam od lat, w przypadku przeglądarek warto przemyśleć korzystanie z nowszych, bardziej optymalnych rozwiązań. Grafiki zapisane w formacie .webp, lub .avif potrafią ważyć nawet do 10x mniej niż ich odpowiedniki w starszych rozszerzeniach, jednakże należy je odpowiednio wdrożyć. Niepoprawna implementacja tego rozwiązania, oprócz dodatkowych kosztów, może przełożyć się na odwrotny efekt, niż zamierzony.

Optymalizacja zasobów

Kolejnymi plikami, które zazwyczaj są przesyłane wraz ze stroną, są te określające styl i zachowanie witryny (odpowiednio pliki CSS i JS). Tak jak w przypadku grafik, możemy tutaj dokonać pewnych optymalizacji.

Przede wszystkim pliki te należy poddać minimalizacji, czyli procesowi usuwania z nich niepotrzebnych znaków (takich jak spacje, znaki końca linii czy komentarze deweloperów). Nie zaburzają one działania tych plików, a zwiększają ich wagę.

Następnie za pomocą bundlerów, czy innych narzędzi, możemy połączyć kilkanaście bądź kilkadziesiąt małych plików w jeden większy. Ten zabieg ograniczy liczbę zapytań wysyłanych do serwera, co również pozytywnie wpłynie na prędkość wczytywania strony.

Źródło: Webpack

CDN

Content Delivery Network jest rozwiązaniem, które pozwala umieszczać nasze pliki na różnych serwerach w różnych zakątkach świata tak, aby każda osoba z dowolnego miejsca na ziemii miała pliki serwowane z najszybszego połączenia, jakie w danym momencie jest dla niej dostępne.

Obecnie korzystanie z CDN nie jest tak wydajne, jak bywało to kilka lat wcześniej, gdyż pobrane z niego pliki mogły być cache’owane w pamięci przeglądarki, nawet jeśli były pobierane z innych serwisów. Metoda ta została jednak wycofana ze względu na bezpieczeństwo i prywatność użytkowników.

Pomimo tego, wykorzystanie tego rozwiązania pomoże nam serwować nasze pliki szybciej, szczególnie gdy mamy użytkowników na całym globie.

Lazy load

Leniwe wczytanie obrazków, które w najnowszych przeglądarkach jest już obsługiwane natywnie, również pozwala oszczędzić kilkadziesiąt milisekund podczas wczytywania strony. Jest to proces umożliwiający wczytanie tylko tych zasobów, które są w danym momencie niezbędne dla użytkownika. Natomiast każde kolejne pliki są doładowywane na żądanie, gdy przeglądarka uzna, że jest to już wymagane.

Prostym przykładem użyteczności tego mechanizmu może być kilka obrazków na dole jakiejś strony. Podczas załadowywania strony nie musimy ich od razu pobierać, gdyż kiedy strona będzie gotowa, obejrzymy tylko jej górną część. Dopiero gdy będziemy ją przewijać, przeglądarka zacznie kalkulować, czy treść na dole strony należy już pobrać.

Opisaliśmy dokładniej działanie tego mechanizmu na przykładzie modułu Lazy-load w Drupalu.

Prefetching

Prefetching to mechanizm, który pozwala zacząć wczytanie strony zanim w nią nawet klikniemy. Metoda ta może działać na dwa sposoby:

• rozpoczęcie wczytywania strony w chwili najechania na link,
• w momencie wczytania strony, skrypt skanuje całą stronę w poszukiwaniu wszystkich dostępnych linków, a następnie wczytuje strony z tych linków.

Zarówno w jednym jak i w drugim przypadku nie odczujemy negatywnych konsekwencji pobierania dodatkowych danych (innych stron), ponieważ te dane będą pobierane w tle, gdy przeglądarka nie jest zbytnio obciążona.

Mamy więc kolejną metodę, która może oszczędzić nam kilkudziesięciu milisekund. Jednak ta technika zazwyczaj sprawdzi się tylko podczas wewnętrznego linkowania na naszej witrynie, gdzie mamy odnośniki do innych naszych stron.

Jak zwiększyć prędkość ładowania witryny? Podsumowanie

Skupienie się na zoptymalizowaniu ładowania naszej strony przyniesie za sobą szereg korzyści. Potencjalni klienci nie będą się irytować przy długim wczytywaniu, poprawimy tym samym UX, a polepszając SEO możemy zdobyć nowych odwiedzających.

Za pomocą dostępnych narzędzi nawet osoba nietechniczna może bez problemu przeprowadzić audyt każdej strony i na jego podstawie podjąć kroki ku przyśpieszeniu wczytywania swojego serwisu.

Przy optymalizacji zdecydowanie polecamy zacząć od sposobów wymienionych powyżej, jak i korzystaniu z rad, które udzieli Lighthouse. Nasz zespół programistów zajmujących się serwisami internetowymi również chętnie Was wesprze i rozpatrzy nawet najbardziej zaawansowane problemy z wczytywaniem witryny.