5 najskuteczniejszych sposobów na skrócenie czasu ładowania strony

Pierwsze sekundy ładowania witryny internetowej lub aplikacji mają kluczowe znaczenie dla wrażeń użytkowników. W tym artykule przedstawimy sprawdzone metody, które pomogą Ci skrócić czas oczekiwania na załadowanie strony.

Czas inicjalnego ładowania

Moment, w którym użytkownik wpisuje adres Twojej strony internetowej, aż do pojawienia się jej zawartości, to zaledwie kilka sekund, które decydują o pierwszym wrażeniu. Warto zadbać, aby te sekundy były jak najkrótsze.

Badania Amazonu wykazały, że opóźnienie o zaledwie 100 milisekund skutkuje spadkiem sprzedaży o 1%. To pokazuje, jak istotna jest szybkość ładowania.

Niestety, wielu twórców stron internetowych bagatelizuje ten aspekt. Dodawanie kolejnych bibliotek, w celu zwiększenia funkcjonalności, stopniowo obniża wskaźnik konwersji. Co gorsza, straty te trudno zidentyfikować, ponieważ użytkownicy opuszczają wolno ładujące się strony, zanim zdążą one wysłać jakiekolwiek dane.

Niektóre techniki optymalizacji implementuje się po stronie klienta (frontend), inne po stronie serwera (backend). Niezależnie od tego, aplikacje internetowe muszą ładować się szybko i sprawnie.

Precyzyjne pomiary

Pierwszym krokiem do poprawy szybkości ładowania jest wprowadzenie precyzyjnych pomiarów. Proces ładowania składa się z wielu etapów, a bez analizy poszczególnych segmentów nie będziesz w stanie określić, gdzie pojawiają się wąskie gardła.

Oto najważniejsze etapy procesu ładowania:

Pomiary | Schemat opracowany przez Terrastruktura

Dlatego powinieneś monitorować metryki dla każdego elementu przedstawionego na powyższym diagramie.

Zobaczmy, jak możesz to zrobić.

Obsługa żądania przeglądarki:

Monitoruj ten etap na swoim serwerze. Powinieneś znać moment otrzymania żądania przez API i moment wysłania odpowiedzi. W zależności od tego, czy wysyłane są zapytania zewnętrzne (np. do baz danych), ten etap może być bardzo krótki lub stać się istotnym wąskim gardłem.

Wysłanie odpowiedzi na odebrane żądanie:

Pomiar tego etapu jest bardziej skomplikowany. Jednym z rozwiązań jest dodanie znacznika czasu w momencie wysłania odpowiedzi przez serwer i porównanie go z bieżącym czasem po stronie użytkownika, w możliwie najwcześniejszym momencie (znacznik skryptu w nagłówku kodu HTML).

Pojawienie się pierwszego elementu na ekranie:

Pierwsze wyrenderowanie treści oznacza wyświetlenie pierwszego elementu w DOM. Może to być prosty tekst, kolor tła lub animacja ładowania. Ten etap można zmierzyć za pomocą narzędzia Lighthouse w Chrome DevTools.

Wyświetlenie pierwszej pełnej treści, aż do największego elementu na ekranie:

Największe wyrenderowanie treści to moment, w którym wyświetlany jest największy element widoczny w przeglądarce użytkownika. Zwykle sygnalizuje on zakończenie fazy renderowania strony, a użytkownik widzi w pełni załadowany ekran. Ten etap również można zmierzyć za pomocą Lighthouse.

Od największego elementu na ekranie, do pełnej interaktywności:

Ostatnim etapem jest czas, w którym użytkownik może wejść w interakcję ze stroną, np. przewijać, klikać czy wpisywać tekst. Długi czas trwania tego etapu może być szczególnie frustrujący. Użytkownik widzi załadowaną stronę, ale nie może z nią interagować. Lighthouse pomoże Ci zmierzyć i ten element.

Zmniejszenie objętości kodu

Po przeprowadzeniu pomiarów możesz zacząć optymalizować kod. Optymalizacje to zawsze kompromis, a pomiary wskażą Ci, które z nich są warte wdrożenia.

Pusta strona ładuje się najszybciej, ale zanim użytkownik zauważy różnicę w czasie ładowania, do aplikacji można dodać sporą ilość kodu. Przyrosty są często tak małe, że trudno dostrzec różnicę między kolejnymi kompilacjami. Pewnego dnia strona po prostu zaczyna działać wolno. Wtedy zdajesz sobie sprawę, że Twoja aplikacja jest „napompowana” i zmniejszenie objętości kodu jest konieczne.

Zmniejszenie objętości kodu przynosi dwa główne korzyści:

• Aplikacja jest szybciej przesyłana przez sieć.
• Przeglądarka szybciej kończy analizę kodu.

Pierwsze przyspieszenie jest stosunkowo niewielkie. Ponieważ żądania są kompresowane w sieci, usunięcie 1 MB kodu źródłowego może zaoszczędzić jedynie 10 KB przepustowości. Jednak skrócenie czasu analizy ma duże znaczenie. Użytkownicy korzystają z Twojej aplikacji na różnych urządzeniach, z których wiele nie dysponuje dużą mocą obliczeniową do szybkiej analizy kodu. Różnice w szybkości mogą być rzędu kilku sekund.

Im mniejszy kod, tym szybciej przeglądarka go przeanalizuje i uruchomi aplikację. Nawet jeśli chcesz wyświetlić ekran ładowania, analiza kodu musi nastąpić wcześniej.

Nie chodzi o wycinanie funkcji i usuwanie kodu. Istnieją standardowe praktyki, które pozwalają na zmniejszenie objętości kodu bez utraty funkcjonalności.

• Użyj minifikatorów kodu. Minifikatory wykonują optymalizacje, takie jak skracanie długich nazw do krótkich (np. signUpDarkModeButton staje się ss), usuwanie białych znaków i inne zabiegi. Dzięki temu kod jest maksymalnie zwarty, bez utraty funkcjonalności.
• Importuj tylko potrzebne części. Biblioteki często zawierają funkcje, których nie potrzebujesz. Zamiast importować całą bibliotekę, możesz zaimportować tylko te fragmenty kodu, których faktycznie używasz.
• Zastosuj tree shaking, czyli usuwanie martwego kodu. Czasem zostawiasz kod do celów debugowania, albo nie usuniesz przestarzałej funkcji. Mimo, że kod źródłowy jest obecny, to nigdy nie zostaje uruchomiony. Narzędzia takie jak Webpack, potrafią wykryć martwy kod i nieużywane zależności, automatycznie usuwając je z produkcyjnej kompilacji.

Podział kodu na mniejsze fragmenty

Po zmniejszeniu objętości kodu, możesz rozważyć podzielenie go na mniejsze fragmenty, aby jeszcze bardziej przyspieszyć początkowe ładowanie. Załóżmy, że 20% kodu obsługuje funkcje, do których użytkownicy mają dostęp dopiero po kilku kliknięciach. Analiza tego kodu przed wyświetleniem ekranu ładowania byłaby marnotrawstwem czasu. Podział kodu na mniejsze fragmenty znacząco skróci czas interakcji.

Zamiast używać jednego, spójnego grafu zależności importu dla wszystkich plików JavaScript, zidentyfikuj obszary, które można łatwo wyciąć. Na przykład komponent może ładować ciężkie biblioteki. Możesz przenieść ten komponent do osobnego pliku i zaimportować go dopiero wtedy, gdy użytkownik będzie gotowy do interakcji z nim.

W zależności od wykorzystywanego frameworka, istnieje wiele bibliotek, które umożliwiają opóźnione ładowanie. Nie należy z tym przesadzać i rozdzielać każdego komponentu. Spowoduje to, że początkowe ładowanie będzie szybkie, ale każda kolejna interakcja będzie wymagała dodatkowego czasu oczekiwania. Wybierz największe fragmenty, które możesz wyodrębnić.

Renderowanie po stronie serwera

Biorąc pod uwagę intensywne analizowanie i kompilowanie kodu po stronie przeglądarki, a także korzystanie z urządzeń o ograniczonej mocy, np. Chromebooków i telefonów komórkowych, popularną techniką jest przeniesienie części tych zadań na serwer. Zamiast dawać pustą stronę, a następnie wypełniać całą jej zawartość za pomocą JavaScript, można uruchomić silnik JavaScript na serwerze (zwykle Node.js) i wstępnie wyrenderować jak najwięcej zawartości i danych.

Serwery działają znacznie szybciej i bardziej przewidywalnie niż przeglądarki użytkowników. Choć przeglądarka i tak będzie musiała przeanalizować kod JavaScript, aby strona była interaktywna, renderowanie po stronie serwera przyspieszy pojawienie się pierwszej treści. Użytkownik od razu zobaczy przynajmniej ekran ładowania lub pasek postępu.

Dodatkowo, jeśli wstępny widok wymaga danych, to klient nie musi składać oddzielnego żądania. Dane są już dostępne w aplikacji.

Kompresja zasobów

Zasoby ożywiają stronę. Strona nie wydaje się w pełni załadowana, dopóki wszystkie zasoby nie zostaną wyrenderowane. Mogą to być elementy tła, ikony interfejsu, zdjęcia profilowe użytkowników, a nawet animacje ładowania. Często zdarza się, że zasoby powodują zmiany w układzie strony. Jeżeli użytkownik zacznie wchodzić w interakcję, a zasoby nadal się ładują, strona może „skakać”. Czasami rozmiar tych zasobów jest największy.

Zasoby są też jednym z „najcięższych” elementów aplikacji. Obraz może ważyć kilka megabajtów, a załadowanie wielu ikon może przekroczyć limit jednoczesnych żądań sieciowych przeglądarki. W rezultacie, tworzy się długa kolejka.

Niemal nigdy nie chcesz pobierać z internetu obrazu w jego oryginalnym rozmiarze. Rozmiar obrazów powinien być dostosowany do wymiarów, w jakich będą one wyświetlane. Jeśli zdjęcie profilowe użytkownika ma wymiary 50×50 pikseli, to pobranie dużego obrazu w oryginalnym rozmiarze, a następnie zmniejszenie go, jest marnotrawstwem czasu i zasobów.

Format obrazu też ma znaczenie. Obecnie preferowany jest format WebP, ale technologia kompresji obrazów wciąż się rozwija i pojawiają się nowe formaty. Niektóre przeglądarki mogą nie obsługiwać najnowszych formatów. Na szczęście, mechanizmy przeglądarek pozwalają na załadowanie obrazu w dowolnym obsługiwanym formacie.

Dlatego, powinieneś kompresować obrazy do najnowszego i najlepszego formatu, ale zachować też starszą wersję. Użyj elementów typu <img> i <video>, które obsługują różne formaty.

Podsumowanie

Przedstawiliśmy pięć skutecznych technik, które pomogą Ci znacząco przyspieszyć pierwsze ładowanie aplikacji. Wdrożenie tych rozwiązań zwiększy współczynnik konwersji, zadowolenie użytkowników, a nawet pozycję w wynikach wyszukiwania, ponieważ algorytmy SEO premiują szybkie strony. W Terrastruktura stosujemy te i wiele innych technik, aby użytkownicy mogli tworzyć i wyświetlać diagramy, które widzisz w tym artykule, tak szybko, jak to tylko możliwe.