Najszybszy i najlepiej zoptymalizowany zasób to zasób, który nie został wysłany. Usuń z aplikacji niepotrzebne zasoby. Warto okresowo sprawdzać i poddawać w wątpliwość założenia, zarówno dorozumiane, jak i wyrażone wprost, w swoim zespole. Oto kilka przykładów:
- Zawsze umieszczasz na swoich stronach zasób X, ale czy koszt jego pobierania i wyświetlania jest adekwatny do wartości, jaką dostarcza użytkownikowi? Czy możesz zmierzyć i udowodnić jego wartość?
- Czy zasób (zwłaszcza zewnętrzny) zapewnia spójną wydajność? Czy ten zasób znajduje się na ścieżce krytycznej lub musi się na niej znajdować? Jeśli zasób znajduje się na ścieżce krytycznej, czy może być jedynym punktem awarii w witrynie? Czy to znaczy, że jeśli zasób jest niedostępny, wpływa to na wydajność i wrażenia użytkownika związane z Twoimi stronami?
- Czy ten zasób wymaga gwarancji jakości usług lub czy jest objęty gwarancją jakości usług? Czy ten zasób stosuje sprawdzone metody dotyczące wydajności, np. kompresję, buforowanie itp.?
Zbyt często strony zawierają zasoby, które są niepotrzebne lub wręcz utrudniają działanie strony, nie przynosząc przy tym większych korzyści dla odwiedzających ani dla witryny, w której są hostowane. Dotyczy to zasobów i widżetów własnych i pochodzących od innych firm:
- Witryna A wyświetla na stronie głównej karuzelę zdjęć, aby umożliwić użytkownikom szybkie wyświetlanie podglądu wielu zdjęć. Wszystkie zdjęcia są wczytywane po załadowaniu strony, a użytkownik może je przeglądać.
- Pytanie: czy zmierzono, ilu użytkowników wyświetla w karuzeli więcej niż 1 zdjęcie? Pobieranie zasobów, których większość użytkowników nigdy nie widzi, może generować wysokie koszty.
- Witryna B zdecydowała się zainstalować widget innej firmy, aby wyświetlać powiązane treści, zwiększać zaangażowanie użytkowników w mediach społecznościowych lub świadczyć inne usługi.
- Pytanie: czy śledzisz, ilu użytkowników korzysta z widżetu lub klika treści, które udostępnia? Czy zaangażowanie, które ten element generuje, jest wystarczające, aby uzasadnić jego koszty? Czy możesz też zastosować strategię wczytywania, aby skrypt nie był wczytywany, dopóki nie będzie potrzebny?
Podjęcie decyzji o wyeliminowaniu zbędnych plików wymaga często dokładnego przemyślenia i zmierzenia. Aby uzyskać najlepsze wyniki, okresowo sprawdzaj te pytania w przypadku każdego komponentu na swoich stronach.
Wpływ na podstawowe wskaźniki internetowe
Inicjatywa dotycząca podstawowych wskaźników internetowych została wprowadzona przez Google, aby zapewnić zestaw danych, które odzwierciedlają wrażenia użytkowników podczas korzystania z internetu. Istnieje wiele strategii optymalizacji podstawowych wskaźników internetowych, ale zastanowienie się nad tym, czy ładować dany zasób na stronie, może pomóc Ci poprawić te wskaźniki w swojej witrynie. Poniżej znajdziesz kilka przykładów (pogrupowanych według poszczególnych podstawowych wskaźników internetowych), które warto wziąć pod uwagę. Ta lista nie jest wyczerpująca (jest ich dużo), ale może być przydatna.
Największe wyrenderowanie treści (LCP)
Największe wyrenderowanie treści (LCP) mierzy czas wczytywania największej treści (np. obrazu nagłówkowego lub nagłówka). Jest to ważny wskaźnik postrzegania, który sprawia, że użytkownik ma wrażenie, że strona wczytuje się szybko.
Ogólnie pobieranie mniejszej liczby zasobów oznacza, że przepustowość, z której korzysta użytkownik, zostanie przydzielona mniejszej liczbie zasobów, co może przełożyć się na poprawę LCP. Klasycznym przykładem jest leniwy ładowanie, w którym obrazy znajdujące się poza widocznym obszarem podczas wczytywania strony nie są pobierane, dopóki przeglądarka nie stwierdzi, że użytkownik prawdopodobnie je zobaczy. Jeśli masz dużą galerię miniatur, np. 50 obrazów, opóźnione wczytywanie wszystkich oprócz 10 najpopularniejszych oznacza, że przeglądarka może efektywniej wykorzystać dostępną przepustowość, a pierwsze obrazy, które zobaczy użytkownik, wczytają się szybciej.
Nie chodzi jednak tylko o to, aby wczytywać mniej obrazów. Przeglądarka ma wewnętrzny schemat ustalania priorytetów, który określa, ile przepustowości powinien otrzymać każdy zasób. Jednak nawet w tym przypadku wszystkie zasoby, zwłaszcza te pobierane z wysokim priorytetem, mogą pozbawić potencjalnego elementu LCP zasobów zależnych. Dotyczy to szczególnie wolnych połączeń sieciowych. Ten zależny zasób może być plikiem obrazu, który reprezentuje element LCP strony, ale może też być zasobem czcionki internetowej, którego przeglądarka potrzebuje do wyrenderowania węzła tekstowego, który może być określony jako element LCP strony.
Jeśli Twoja witryna zawiera dużo tekstu, elementem LCP strony może być węzeł tekstowy. Chociaż istnieje wiele dobrych strategii optymalizacji i ładowania czcionek, warto zastanowić się, czy czcionka systemowa wystarcza do potrzeb Twojej witryny. Dzięki temu elementy LCP, które są węzłami tekstowymi, mogą się wczytywać bez zależności od zasobu czcionki internetowej i wyświetlać 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 nie zostanie pobrany do momentu początkowego renderowania. W przypadku obrazów unikanie CLS wymaga m.in. ustawiania dokładnych wymiarów. W przypadku czcionek zarządzanie wczytywaniem czcionek i potencjalnie dopasowywaniem czcionek zapasowych może zminimalizować zmiany podczas okresu wymiany czcionki internetowej. W przypadku JavaScriptu może to być zarządzanie tym, jak skrypt manipuluje interfejsem DOM, aby zmiany układu były ograniczone do akceptowalnego poziomu.
Każdy zasób, który wpływa na CLS strony, wymaga pewnej pracy, aby zapewnić odpowiednią stabilność układu strony. Zadając sobie pytanie, czy potrzebujesz konkretnego zasobu, nie tylko przyspieszysz wczytywanie strony, ale też zmniejszasz wysiłek poznawczy potrzebny do zachowania stabilności układu. Dzięki temu nie tylko użytkownicy będą zadowoleni, ale też deweloperzy, którzy będą mieli więcej czasu na realizację innych celów w projektach.
Interakcja do kolejnego wyrenderowania (INP)
Interakcja do kolejnego wyrenderowania (INP) mierzy responsywność na dane wprowadzane przez użytkownika w całym okresie istnienia strony. Na INP strony może mieć duży wpływ wczytywany kod JavaScript, ponieważ to on odpowiada za większość interakcji w internecie. W szczególności ilość zasobów skryptu pobranych podczas wczytywania strony może wywołać potencjalnie kosztowne działania związane z ocenianiem i kompilowaniem skryptu. Im mniej kodu JavaScript wczytujesz podczas uruchamiania, tym mniej pracy musi wykonać przeglądarka w tym kluczowym momencie korzystania ze strony, gdy użytkownicy próbują z nią wchodzić w interakcję.
Chociaż istnieją strategie zmniejszania wielkości zasobów JavaScript pobieranych podczas uruchamiania aplikacji (np. dzielenie kodu i usuwanie zbędących gałęzi), warto sprawdzić, czy te pakiety są w ogóle potrzebne w Twoich projektach. Na przykład biblioteka lodash zawiera wiele metod, które są nadal przydatne, ale są one dostarczane przez przeglądarkę jako gotowe metody, takie jak funkcje Array do mapowania, redukowania i filtrowania oraz wiele innych.
Stale ulepszanie to też przydatna metoda tworzenia kodu JavaScript, ponieważ pozwala wyświetlać użytkownikom podstawową (ale nadal funkcjonalną) wersję strony, którą możesz rozszerzać o funkcje dla użytkowników dysponujących wydajniejszymi urządzeniami i szybszymi połączeniami sieciowymi. Niezależnie od tego, czy stosujesz zasadę stopniowego ulepszania, czy nie, zasada jest taka sama: każde zasoby JavaScript, których wczytywania możesz uniknąć, mogą przynieść szybszą reakcję na interakcje użytkownika, co jest kluczowym aspektem wydajności witryny.
Podsumowanie
Sprawdzanie witryny pod kątem niepotrzebnych plików do pobrania to tylko jeden z elementów zapewnienia użytkownikom szybkiego działania witryny, ale ma on duży potencjał. Podsumowując:
- Sprawdź, jakie zasoby własne i zagraniczne masz na stronach.
- Zmierz skuteczność każdego zasobu: jego wartość i wydajność techniczną.
- Sprawdź, czy zasoby zapewniają wystarczającą wartość.
- Dowiedz się, jak niepotrzebne pobieranie danych wpływa na podstawowe wskaźniki internetowe i dane pomocnicze.
Optymalizując w ten sposób wydajność treści, nie tylko poprawiasz ogólną wydajność, ale też dbasz o to, aby nie marnować przepustowości użytkowników. Możesz też poprawić wskaźniki związane z użytkownikami i zwiększyć ich wygodę.