Eliminowanie niepotrzebnych plików do pobrania

Najszybszy i najlepiej zoptymalizowany zasób to zasób, który nie jest wysyłany. Wyeliminuj zbędne zasoby ze swojej aplikacji. Warto co jakiś czas kwestionować i od czasu do czasu kwestionować niejawne i jawne założenia w swoim zespole. Oto kilka przykładów:

  • Zasób X był zawsze uwzględniany na stronach, ale czy koszt jego pobrania i wyświetlania równoważy wartość, jaką zapewnia użytkownikowi? Czy możesz zmierzyć i udowodnić jego wartość?
  • Czy zasób (zwłaszcza jeśli należy do innej firmy) zapewnia stałą wydajność? Czy zasób należy do ścieżki krytycznej czy musi nim być? Jeśli zasób należy do ścieżki krytycznej, czy może on być pojedynczym punktem awarii witryny? To znaczy, jeśli zasób jest niedostępny, czy wpływa to na wydajność stron i wrażenia użytkowników?
  • Czy dla tego zasobu jest wymagana gwarancja jakości usług lub jest ona objęta gwarancją jakości usług? Czy ten zasób jest zgodny ze sprawdzonymi metodami dotyczącymi wydajności, takimi jak kompresja, pamięć podręczna itd.?

Zbyt często strony zawierają zasoby, które są niepotrzebne lub, co gorsza, pogarszają wydajność strony, nie przedstawiając przy tym wartości dla użytkownika ani witryny, w której się znajdują. Dotyczy to zarówno własnych zasobów oraz widżetów, jak i zasobów innych firm:

  • Witryna A wyświetla na stronie głównej karuzelę zdjęć, która umożliwia użytkownikowi wyświetlenie wielu zdjęć za pomocą jednego kliknięcia. Wszystkie zdjęcia są wczytywane podczas wczytywania strony, a użytkownik przewija je kolejno.
    • Pytanie: czy wiesz, ilu użytkowników wyświetla kilka zdjęć w karuzeli? Możesz ponosić duże nakłady pracy, gdy pobierasz zasoby, których większość użytkowników nigdy nie wyświetla.
  • Witryna B zdecydowała się zainstalować zewnętrzny widżet, który będzie wyświetlać powiązane treści, zwiększać zaangażowanie społecznościowe lub świadczyć inną usługę.
    • Pytanie: Czy wiesz, ilu użytkowników korzysta z widżetu lub po kliknięciu jego treści? Czy zaangażowanie, które generuje ten widżet, jest wystarczające, aby uzasadnić jego koszt? Sprawdź też, czy możesz zastosować strategię wczytywania, która zagwarantuje, że skrypt nie będzie wczytywany, dopóki nie będzie potrzebny.

Podjęcie decyzji o wyeliminowaniu niepotrzebnych plików do pobrania często wymaga dokładnego myślenia i pomiarów. Aby uzyskać najlepsze wyniki, co jakiś czas rób spis zasobów na stronie i zadawaj sobie te pytania w przypadku każdego zasobu.

Wpływ na podstawowe wskaźniki internetowe

Wprowadzenie podstawowych wskaźników internetowych zostało wprowadzone przez Google, aby dostarczać zestaw danych, które odzwierciedlają wrażenia użytkowników korzystających z internetu. Istnieje wiele strategii optymalizacji podstawowych wskaźników internetowych, ale jeśli zastanawiasz się, czy wczytać określony zasób na stronie, może okazać się, że możesz poprawić te dane w witrynie. Poniżej znajdziesz kilka przykładów wartych uwagi, pogrupowanych według poszczególnych podstawowych wskaźników internetowych. Ta lista nie jest wyczerpująca (a jest ich wiele), ale warto się z nimi zapoznać.

Największe wyrenderowanie treści (LCP)

Największe wyrenderowanie treści (LCP) mierzy, kiedy wczytuje się największa zawartość (np. baner powitalny lub nagłówek). Ten wskaźnik jest uważany za ważny wskaźnik percepcyjny, który daje użytkownikowi wrażenie, że strona wczytuje się szybko.

Ogólnie rzecz biorąc, pobieranie mniejszej ilości zasobów oznacza, że przepustowość użytkownika zostanie przydzielona do mniejszej ilości zasobów i może przełożyć się na poprawę LCP. Klasycznym przykładem jest leniwe ładowanie, które polega na tym, że podczas wczytywania strony obrazy znajdujące się poza widocznym obszarem nie są pobierane, dopóki przeglądarka nie ustali, że użytkownik ma większe szanse, że je zobaczy. Jeśli masz dużą galerię miniatur z np. 50 obrazami, leniwe ładowanie wszystkich (10 z pierwszych) oznacza, że przeglądarka może lepiej wykorzystać dostępną przepustowość łącza, a pierwsze obrazy, które zobaczy użytkownik, będą ładowały się szybciej.

Nie chodzi jednak tylko o wczytywanie mniejszej liczby obrazów. Przeglądarka ma wewnętrzny schemat ustalania priorytetów, który określa przepustowość łącza dla każdego zasobu. Jednak nawet w przypadku tych wszystkich zasobów – a zwłaszcza tych pobranych z wysokim priorytetem – może to spowodować zmniejszenie zasobów zależnych od elementu LCP. Dotyczy to zwłaszcza powolnych połączeń sieciowych. Takim zasobem zależnym może być plik graficzny reprezentujący element LCP strony, ale równie dobrze może też być zasobem czcionki internetowej potrzebnym przeglądarce do wyrenderowania węzła tekstowego, który można określić jako element LCP strony.

Jeśli Twoja witryna zawiera dużo tekstu, element LCP strony może być węzłem tekstowym. Chociaż istnieje wiele dobrych strategii optymalizacji i wczytywania czcionek, warto zastanowić się, czy czcionka systemowa jest wystarczająca do zaspokojenia potrzeb Twojej witryny. Dzięki temu elementy LCP, które są węzłami tekstowymi, mogą się ładować bez konieczności korzystania z zasobu czcionki internetowej i malować niemal natychmiast po otrzymaniu kodu CSS i HTML z serwera.

Skumulowane przesunięcie układu (CLS)

Każdy wczytywany zasób może mieć wpływ na skumulowane przesunięcie układu (CLS) strony, zwłaszcza jeśli pobieranie nie zostało zakończone do czasu początkowego wyrenderowania. W przypadku obrazów unikaj stosowania praktyk, takich jak ustawianie jawnych wymiarów. W przypadku czcionek zarządzanie ładowaniem czcionek i potencjalnym dopasowaniem zastępczym może zminimalizować przesunięcia podczas okresu wymiany czcionki internetowej. W przypadku JavaScriptu może to być zarządzanie sposobem, w jaki skrypt manipuluje DOM, tak aby przesunięcia układu były zredukowane do akceptowalnego poziomu.

Każdy zasób, który wpływa na CLS strony, wymaga trochę pracy, aby zapewnić jego wystarczająco stabilny układ. Zastanawiając się, czy potrzebujesz określonego zasobu, nie tylko przyspieszasz ładowanie strony, ale też zmniejszasz nakład pracy potrzebny do zachowania stabilności układu. Dzięki temu nie tylko będzie to bardziej nieprzyjemne dla użytkowników, ale też mniej frustrujące dla programistów, ponieważ będziesz mieć więcej czasu na realizację innych celów związanych z projektem.

od interakcji do następnego wyrenderowania (INP) i opóźnienia przy pierwszym działaniu (FID)

Interakcja z kolejnym wyrenderowaniem (INP) i opóźnienie po pierwszym działaniu (FID) to dane, które mierzą reagowanie na dane wejściowe użytkownika. W marcu 2024 r. ma zastąpić FID jako podstawowy wskaźnik internetowy, ale strategie optymalizacji dotyczące FID mają zwykle zastosowanie również w przypadku INP. Co więcej, INP jest zwykle trudniejsze do optymalizacji niż FID, ponieważ śledzi pełny czas oczekiwania na interakcję w przypadku wszystkich interakcji ze stroną, a nie tylko opóźnienie pierwszej interakcji jako miary FID.

Największy wpływ na INP i FID ma JavaScript, ponieważ to właśnie JavaScript odpowiada za większość interakcji w internecie. Zarówno w przypadku INP, jak i FID ilość zasobów skryptów pobieranych podczas wczytywania strony rozpocznie potencjalnie kosztowne prace związane z oceną i kompilacją skryptów. Im mniej kodu JavaScript wczytuje się podczas uruchamiania, tym mniej pracy musi wykonywać przeglądarka na tym kluczowym etapie działania strony.

Istnieją strategie ograniczania rozmiaru zasobów JavaScript pobieranych podczas uruchamiania – takie jak podział kodu i potrząsanie drzewem. Warto jednak sprawdzić pakiety, których używasz w projektach, aby sprawdzić, czy są w ogóle potrzebne. Na przykład lodash ma wiele metod, które nadal są przydatne, ale udostępnia metody, które przeglądarka udostępnia fabrycznie, takie jak specyficzne dla Array funkcje mapowania, zmniejszania i filtrowania oraz wiele innych.

Stopniowe ulepszanie języka JavaScript jest również przydatnym podejściem do języka JavaScript, ponieważ pozwala oferować podstawowe (ale wciąż funkcjonalne) funkcje użytkownikom, którzy mają bardziej wydajne urządzenia i szybsze połączenie sieciowe. Niezależnie od tego, czy przestrzegasz zasady stopniowego ulepszania, czy nie, chodzi o to: każdy zasób JavaScript, którego możesz uniknąć pobierania, może sprawić, że interfejs będzie szybciej reagować na interakcje użytkowników, co jest kluczowym aspektem wydajności witryny.

Podsumowanie

Kontrola witryny pod kątem zbędnych plików do pobrania to tylko jeden z elementów zapewniania szybkości użytkownikom, ale może on przynieść duże korzyści. Podsumowując:

  • Inwentaryzacja na Twoich stronach zasobów własnych i innych firm.
  • Pomiar skuteczności każdego zasobu: jego wartości i wydajności technicznej.
  • Określ, czy zasoby zapewniają wystarczającą wartość.
  • Dowiedz się, jaki wpływ na podstawowe wskaźniki internetowe i dane pomocnicze mają niepotrzebne pobrania.

Optymalizując w ten sposób wydajność treści, nie tylko poprawiasz ogólną wydajność, lecz także dbasz o to, aby nie marnować przepustowości łącza przez użytkowników, jak również potencjalnie poprawić dane na temat użytkowników i poprawić ich wygodę.