Najszybszy i najlepiej zoptymalizowany zasób to taki, który nie został wysłany. Wyeliminuj z aplikacji niepotrzebne zasoby. Warto co jakiś czas omawiać ze swoim zespołem ogólne i jawne założenia w tych kwestiach i co jakiś czas je analizować. Oto kilka przykładów:
- Zasób X zawsze był dodawany na stronach, ale czy koszt jego pobrania i wyświetlania podkreśla jego wartość dla użytkownika? Czy możesz zmierzyć i udowodnić jego wartość?
- Czy zasób (zwłaszcza jeśli należy do innej firmy) zapewnia stałą wydajność? Czy jest to zasób na ścieżce krytycznej czy musi nim być? Jeśli zasób jest na ścieżce krytycznej, czy może być odpowiedzialny za awarie witryny? To znaczy, czy gdy zasób jest niedostępny, czy wpływa to na wydajność i wygodę użytkowników stron?
- Czy ten zasób wymaga gwarancji jakości usług? Czy ten zasób jest zgodny ze sprawdzonymi metodami dotyczącymi wydajności, takimi jak kompresja, zapisywanie w pamięci podręcznej itd.?
Strony zbyt często zawierają zasoby, które są niepotrzebne, a co gorsza, obniżają 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 i 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 ładowania strony, a użytkownik przechodzi między nimi.
- Pytanie: czy udało Ci się sprawdzić, ilu użytkowników wyświetla kilka zdjęć w karuzeli? Może to powodować duże nakłady pracy, ponieważ pobierasz zasoby, których większość użytkowników nigdy nie wyświetla.
- Witryna B chce zainstalować widżet innej firmy, aby wyświetlać powiązane treści, zwiększać zaangażowanie społecznościowe lub świadczyć inne usługi.
- Pytanie: Czy udało Ci się śledzić, ilu użytkowników korzysta z widżetu lub klikają znajdujące się w nim treści? Czy zaangażowanie, które generuje ten widżet, jest wystarczające, aby uzasadnić jego koszt? Czy możesz zastosować strategię wczytywania, aby mieć pewność, że skrypt nie będzie wczytywany, dopóki nie będzie potrzebny?
Aby podjąć decyzję o usunięciu niepotrzebnych pobieranych plików, musisz dokładnie przemyśleć i dokonać odpowiednich pomiarów. Aby uzyskać najlepsze wyniki, okresowo twórz spis zasobów i zadawaj sobie te pytania w przypadku każdego zasobu na stronie.
Wpływ na podstawowe wskaźniki internetowe
Inicjatywa związana z podstawowymi wskaźnikami internetowymi została wprowadzona przez Google w celu udostępnienia zestawu danych odzwierciedlających wrażenia użytkowników korzystających z internetu. Istnieje wiele strategii optymalizacji podstawowych wskaźników internetowych, ale pytanie, czy wczytać konkretny zasób na stronie, może wskazać Ci drogę do ulepszenia tych danych w witrynie. Poniżej znajdziesz kilka wartych rozważenia przykładów z podziałem na poszczególne podstawowe wskaźniki internetowe. Chociaż nie jest to wyczerpująca lista przykładów (a jest ich wiele), warto je przeczytać.
Największe wyrenderowanie treści (LCP)
Największe wyrenderowanie treści (LCP) mierzy podczas wczytywania największej treści (np. banera powitalnego lub nagłówka). Jest to ważna wartość postrzegana, dzięki której użytkownik ma wrażenie, że strona wczytuje się szybko.
Ogólnie rzecz biorąc, pobieranie mniejszej liczby zasobów oznacza, że przepustowość, jaką dysponuje użytkownik, jest rozdzielana między mniej zasobów, co może prowadzić do poprawy 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 określi, że użytkownik może je zobaczyć z większym prawdopodobieństwem. Jeśli masz dużą galerię miniatur, na przykład 50 obrazów, leniwe ładowanie wszystkich z wyjątkiem 10 z nich oznacza, że przeglądarka może efektywniej wykorzystać dostępną przepustowość, dzięki czemu pierwsze obrazy, które zobaczy użytkownik, będą wczytywane szybciej.
Nie chodzi jednak tylko o ładowanie mniejszej liczby obrazów. Przeglądarka ma wewnętrzny schemat priorytetów, który określa, jaką przepustowość powinny odbierać poszczególne zasoby. Jednak nawet przy tych wszystkich zasobach, zwłaszcza tych pobranych z wysokim priorytetem, można utracić zasoby zależne od potencjalnego elementu LCP. Dotyczy to zwłaszcza wolnych połączeń sieciowych. Zasób zależny może być plikiem graficznym reprezentującym element LCP strony, ale równie dobrze może też być zasobem czcionki internetowej, którego przeglądarka musi wyrenderować węzeł tekstowy, który może być określony jako element LCP strony.
Jeśli witryna zawiera dużo tekstu, być może element LCP strony jest węzłem tekstowym. Chociaż istnieje wiele dobrych strategii optymalizacji i wczytywania czcionek, warto zastanowić się, czy czcionka systemowa jest wystarczająca do spełnienia potrzeb Twojej witryny, aby elementy LCP, które są węzłami tekstowymi, mogły być ładowane bez zależności od zasobów czcionek internetowych i malowane niemal natychmiast po otrzymaniu kodu CSS i HTML z serwera.
Skumulowane przesunięcie układu (CLS)
Każdy wczytywany zasób może przyczynić się do powstania skumulowanego przesunięcia układu (CLS) strony, zwłaszcza jeśli pobieranie nie zostało zakończone do czasu początkowego wyrenderowania. W przypadku obrazów unikanie CLS wiąże się np. z określaniem wymiarów jawnych. W przypadku czcionek zarządzanie wczytywaniem i potencjalnie alternatywnym dopasowywaniem czcionek może zminimalizować zmiany w okresie wymiany czcionki internetowej. W przypadku JavaScriptu może to być zarządzanie sposobem, w jaki skrypt manipuluje elementem DOM, tak aby przesunięcia układu były ograniczane do akceptowalnego poziomu.
Każdy zasób wpływający na CLS strony wymaga pewnego nakładu pracy, aby zapewnić wystarczająco stabilny układ strony. Jeśli zastanawiasz się, czy potrzebujesz konkretnego zasobu, nie tylko przyspieszasz ładowanie strony, ale także ograniczasz wysiłek poznawczy niezbędny do zachowania stabilności układu. Nie tylko zwiększa to wygodę użytkowników, ale też zmniejsza frustrację programistów, ponieważ ma więcej czasu na realizację innych celów w ramach projektów.
Od interakcji do kolejnego wyrenderowania (INP)
Interakcja z następnym wyrenderowaniem (INP) mierzy czas reagowania na dane wejściowe użytkownika przez cały okres istnienia strony. Kod INP strony może w dużym stopniu zależeć od wczytywanego przez nią JavaScriptu, ponieważ to właśnie JavaScript zapewnia największą interaktywność w internecie. W szczególności ilość zasobów skryptu pobranych podczas wczytywania strony może rozpocząć potencjalnie kosztowne zadania związane z oceną i kompilacją skryptu. Im mniej JavaScriptu wczytujesz podczas uruchamiania, tym mniej pracy musi wykonać przeglądarka w kluczowym momencie procesu, w którym użytkownicy mogą próbować z niej skorzystać.
Chociaż istnieją strategie zmniejszania rozmiaru zasobów JavaScript pobieranych podczas uruchamiania, np. podział kodu i potrząsanie drzewem, warto skontrolować pakiety, których używasz w swoich projektach, i sprawdzić, czy są w ogóle potrzebne. Na przykład lodash ma wiele metod, które są wciąż przydatne, ale są w nim stosowane domyślnie w przeglądarce, takie jak specyficzne dla Array
funkcje mapowania, ograniczania i filtrowania oraz wiele innych.
Progresywne ulepszanie jest również przydatnym podejściem do JavaScriptu, ponieważ pozwala zapewnić podstawowe (ale nadal funkcjonalne) środowisko użytkownikom, które można dodać do użytkowników z bardziej wydajnymi urządzeniami i szybszymi połączeniami sieciowymi. Niezależnie od tego, czy przestrzegasz zasady stopniowego ulepszania, czy nie, najważniejsze jest to, że każdy zasób JavaScript, którego nie możesz pobierać, umożliwia szybsze reagowanie na interakcje użytkowników, co jest kluczowym aspektem wydajności witryny.
Podsumowanie
Sprawdzanie witryny pod kątem zbędnych plików do pobrania może być tylko jednym z aspektów szybkiego zapewnienia użytkownikom wygody, ale to właśnie jeden z aspektów witryny może mieć duży wpływ na wygodę użytkowników. Podsumowując:
- Inwentaryzuj na swoich stronach własne zasoby i zasoby firm zewnętrznych.
- Oceń skuteczność poszczególnych zasobów: ich wartość i sprawność techniczną.
- Ustal, czy zasoby zapewniają wystarczającą wartość.
- Poznaj wpływ niepotrzebnych pobrań na podstawowe wskaźniki internetowe i dane pomocnicze.
Optymalizacja w ten sposób efektywności treści nie tylko poprawia ogólną wydajność, ale też nie marnuje przepustowości łącza, a także potencjalnie poprawia dane dotyczące użytkowników i zapewnia lepsze wrażenia użytkowników.