Jak zwiększyć wydajność mediów przy ograniczonym budżecie?

Ten artykuł został uprzejmie poparty przez naszych drogich przyjaciół z Cloudinary, którzy pomagają społeczności szybko i łatwo tworzyć, zarządzać i dostarczać swoje cyfrowe doświadczenia w dowolnej przeglądarce, urządzeniu i przepustowości. Dziękuję Ci!

Amerykański uczony Mason Cooley zręcznie opisał trudny fakt z życia: „Budżet pozbawia pieniądze radości”. Niewątpliwie media ożywiają strony internetowe, dodając uroku, ekscytacji i intryg, nie mówiąc już o zachęcaniu do pozostania na stronie i częstego jej odwiedzania. Jednak tak jak niekontrolowane wydatki źle wróżą na dłuższą metę, tak samo niebudżetowane media cyfrowe niszczą wydajność witryny.

Przykład: spowolnienie ładowania strony o zaledwie sekundę może kosztować Amazon 1,6 miliarda dolarów rocznej sprzedaży. Spośród wielu czynników, które wpływają na szybkość ładowania strony, media są istotnym czynnikiem. Stąd pilna potrzeba nadania priorytetu optymalizacji mediów. Wydając pieniądze na to zadanie i finansując swoje media, w dłuższej perspektywie uzyskasz znaczne oszczędności i korzyści.

Budżety wydajności

„Budżet wydajności to '... tak, jak to brzmi: ustawiasz 'budżet' na swojej stronie i nie pozwalasz, aby strona go przekroczyła. Może to być określony czas wczytywania, ale zwykle łatwiej jest przeprowadzić rozmowę, gdy podzielisz budżet na liczbę żądań lub rozmiar strony”.

— Tim Kadlec

Budżet wydajności jako mechanizm planowania środowiska internetowego i zapobiegania spadkowi wydajności może składać się z następujących mierników:

• Całkowita waga strony,
• Całkowita liczba żądań HTTP,
• czas ładowania strony w określonej sieci komórkowej,
• Opóźnienie pierwszego wejścia (FID)
• First Contentful Paint (FCP),
• Łączna zmiana układu (CLS),
• Największa zawartość farby (LCP).

Vitaly Friedman ma doskonałą listę kontrolną, która opisuje komponenty wpływające na wydajność sieci oraz przydatne wskazówki dotyczące technik optymalizacji. Zapoznanie się z tymi komponentami pozwoli Ci ustalić cele wydajnościowe .

Dzięki jasno udokumentowanym celom wydajności różne zespoły mogą prowadzić konstruktywne rozmowy na temat optymalnego dostarczania treści. Na przykład budżet może pomóc im zdecydować, czy strona powinna zawierać pięć obrazów — czy trzy obrazy i jeden film — i nadal mieścić się w zaplanowanych limitach.

Jednak posiadanie budżetu zadaniowego jako samodzielnego wskaźnika może nie być zbyt pomocne. Dlatego musimy skorelować wyniki z celami organizacyjnymi.

Wydajność biznesowa

Jeśli wydasz dużo bajtów na nieoptymalne filmy i obrazy, wrażenia z multimediów nie będą już tak bogate. Organizacja istnieje po to, aby osiągać wyniki , takie jak zachęcanie ludzi do zakupów, kształcenie ich, motywowanie lub szukanie pomocy i wolontariuszy. Każdy, kto jest obecny w sieci, doceni związek między wpływem różnych miar wydajności na wskaźniki biznesowe.

WPOStats przedstawia dosłownie setki studiów przypadków pokazujących, jak spadek wydajności — z kilkuset milisekund do sekund — może spowodować ogromny spadek rocznej sprzedaży. Rysowanie tego rodzaju relacji znacznie pomaga śledzić wpływ wydajności na biznes i ostatecznie budować kulturę wydajności dla organizacji.

Podobnie powolne witryny mogą mieć ogromny wpływ na konwersję. Trudnym wyzwaniem, przed którym stają firmy internetowe, jest znalezienie odpowiedniej równowagi między zaangażowaniem odbiorców przy jednoczesnym zachowaniu budżetu wydajności.

Nic więc dziwnego, że kluczowym elementem zaangażowania odbiorców są zoptymalizowane media wizualne , np. urzekający film, który splata opowieść o Twoim produkcie lub usłudze wraz z odpowiednimi, interesującymi i atrakcyjnymi wizualizacjami.

Według neuronaukowców z MIT nasz mózg może wchłonąć i zrozumieć media wizualne w czasie krótszym niż 13 milisekund, podczas gdy zrozumienie tekstu może zająć przeciętnemu czytelnikowi ponad 3,3 minuty, często po ponownym przeczytaniu go i odsyłaniu do innych miejsc. Nic więc dziwnego, że treści mikrofilmowe (zazwyczaj o długości 10–20 sekund) często zapewniają duże zaangażowanie i wzrost konwersji.

Odwołanie od filmów

Podczas zakupów online spodziewamy się zobaczyć szczegółowe zdjęcia produktów . Od lat preferuję przeglądanie produktów, które są uzupełniane filmami, które pokazują na przykład, jak korzystać z produktu, a może jak go złożyć, lub które pokazują rzeczywiste przypadki użycia.

Poza moim osobistym doświadczeniem wiele badań potwierdza znaczenie treści wideo:

• 96% konsumentów uważa filmy za pomocne przy podejmowaniu decyzji o zakupie online.
• 79% kupujących online woli oglądać wideo w celu uzyskania informacji o produkcie niż czytać tekst na stronie internetowej.
• Odpowiedni film produktowy może zwiększyć konwersje o ponad 80%.

Mówiąc o dostarczaniu filmów w sieci,

„Średnia waga filmów dramatycznie rośnie z roku na rok, bardziej na urządzeniach mobilnych niż na komputerach. W niektórych przypadkach może to być uzasadnione, ponieważ urządzenia mobilne często mają ekrany o wysokiej rozdzielczości, ale może to być również spowodowane brakiem możliwości oferowania różnych rozmiarów wideo za pomocą samego HTML. Wiele dużych plików wideo w Internecie jest ręcznie umieszczanych na stronach marketingowych i nie ma zaawansowanych serwerów multimediów do dostarczania odpowiednich rozmiarów, więc mam nadzieję, że w przyszłości zobaczymy podobne proste funkcje HTML do dostarczania wideo, które widzimy w responsywnych obrazach. ”

— Scott Jehl

Ten sam sentyment został wyrażony przez Conviva w czwartym kwartale 2020 r. Stan przesyłania strumieniowego (wymagana rejestracja), w którym odnotowano, że telefony komórkowe odnotowały o 20% więcej problemów z buforowaniem , 19% wyższy czas niepowodzenia uruchomienia wideo i o 5% dłuższy czas startu niż inne urządzenia.

Oprócz problemów z renderowaniem, dostarczanie wideo może również podnieść koszty przepustowości, zwłaszcza jeśli nie możesz dostarczyć optymalnych formatów przeglądarki. Ponadto, jeśli nie używasz sieci dostarczania treści (CDN) lub wielu sieci CDN do mapowania użytkowników do najbliższych regionów brzegowych w celu zmniejszenia opóźnień — praktyka nazywana routingiem nieoptymalnym — możesz spowolnić początek wideo.

Podobnie niezoptymalizowane obrazy były główną przyczyną rozrostu strony. Według Web Almanac różnica w bajtach obrazu wysyłanych do urządzeń mobilnych lub stacjonarnych jest bardzo mała, co oznacza dalsze marnowanie przepustowości dla urządzeń, które tak naprawdę nie potrzebują wszystkich dodatkowych bajtów.

Bez wątpienia przesadzanie z angażującą, ale niezoptymalizowaną treścią szkodzi celom biznesowym, i tu właśnie w grę wchodzi sztuka równoważenia.

Sztuka równoważenia wydajności z treściami medialnymi

Mimo że multimedia mogą promować zaangażowanie użytkowników, musimy zrównoważyć koszt ich dostarczania z wydajnością witryny i celami biznesowymi. Jedną z alternatyw jest hostowanie i dostarczanie wideo za pośrednictwem strony trzeciej, takiej jak YouTube lub Vimeo.

Jednak pomimo oszczędności w zakresie przepustowości, takie podejście wiąże się z pewnymi kosztami. Jako właściciel treści nie możesz tworzyć w pełni spersonalizowanego środowiska marki ani oferować personalizacji. I oczywiście musisz hostować i dostarczać swoje obrazy.

Nie musisz odciążać swoich treści. Dostępne są również inne opcje. Rozważ modernizację systemu pod kątem optymalnego dostarczania multimediów, wykonując następujące czynności:

Poznaj swoje obecne użycie

Przeanalizuj wagę swoich stron internetowych i rozmiar ich zasobów multimedialnych. Ekspert ds. badań internetowych, Tammy Everts, zaleca, aby strony miały rozmiar mniejszy niż 1 MB dla urządzeń mobilnych i mniej niż 2 MB dla wszystkich innych. Ponadto zidentyfikuj zasoby wyświetlane na krytycznych stronach.

Na przykład, czy możesz zastąpić akapit tekstu i związane z nim obrazy krótkim wideo? Jak ta decyzja wpłynęłaby na Twoje cele biznesowe? Na tym etapie może być konieczne przejrzenie monitorowania rzeczywistych użytkowników (RUM) i analityki oraz zidentyfikowanie krytycznych stron, które prowadzą do wyższych współczynników konwersji i zaangażowania.

Pamiętaj też, aby syntetycznie śledzić kluczowe wskaźniki sieciowe Google (CWV) w ramach swojego zestawu narzędzi za pomocą narzędzi takich jak LightHouse. Możesz także mierzyć CWV poprzez monitorowanie rzeczywistych użytkowników (RUM), takie jak CrUX. Ponieważ CWV będą również sygnałem dla Google dla robotów indeksujących, warto monitorować i optymalizować pod kątem tych wskaźników: największe wyrenderowanie treści (LCP), opóźnienie pierwszego wejścia (FID) i skumulowane przesunięcie układu (CLS).

Podaj odpowiedni format

Wyświetlaj obrazy lub filmy w najbardziej odpowiednim formacie pod względem rozmiaru i rozdzielczości dla urządzenia wyświetlającego lub przeglądarki. W tym celu możesz potrzebować obrazu CDN. Alternatywnie utwórz warianty, takie jak WebM, AVIF, JPEG-XL, HEIC itp. i selektywnie obsługuj odpowiedni typ treści w oparciu o żądające nagłówki User-Agent i Accept.

W przypadku jednorazowych konwersji możesz wypróbować narzędzia, takie jak Squoosh.app lub avif.io. Pokrewną praktyką jest konwertowanie animowanych GIF-ów na filmy. Aby uzyskać więcej informacji, zobacz ten artykuł w witrynie Web.dev. Chcesz spróbować skonfigurować przepływ pracy do obsługi publikowania filmów? Zobacz świetne wskazówki w artykule Optymalizacja wideo pod kątem rozmiaru i jakości.

Podawaj odpowiedni rozmiar

Ponad 41% obrazów na urządzeniach mobilnych ma nieprawidłowy rozmiar. Dlatego zamiast podawać stałą szerokość, przycinaj obrazy i filmy, aby dopasować je do rozmiaru kontenera, za pomocą narzędzi takich jak Lazysizes. Co więcej, narzędzia AI, które mogą wykrywać obszary zainteresowania podczas przycinania obrazów, mogą zaoszczędzić mnóstwo czasu i wysiłku. Możesz także wykorzystać natywne leniwe ładowanie w przypadku obrazów znajdujących się w części strony widocznej na ekranie.

Dodaj napisy do swoich filmów

Prawie 85% filmów jest odtwarzanych bez dźwięku. Dodanie do nich napisów nie tylko zapewnia przystępne wrażenia, ale także przykuwa uwagę odbiorców i zwiększa zaangażowanie. Jednak transkrypcja filmów może być żmudną pracą; możesz pracować z usługą transkrypcji opartą na sztucznej inteligencji i ulepszać ją, aby zautomatyzować przepływ pracy.

Dostarczaj przez wiele CDN

Sieci CDN mogą złagodzić opóźnienia na ostatniej mili, skrócić czas rozpoczęcia filmu i potencjalnie zmniejszyć problemy z buforowaniem. Według badania przeprowadzonego przez Citrix, strategia multi-CDN może jeszcze bardziej zmniejszyć opóźnienia i zapewnić ciągłą dostępność w przypadku zlokalizowanych przestojów w węzłach brzegowych CDN.

Zamiast korzystać z wielu dyskretnych narzędzi, możesz wypróbować produkt, taki jak Cloudinary's Media Optimizer, który skutecznie i wydajnie optymalizuje media, zapewniając odpowiedni format i jakość za pośrednictwem węzłów brzegowych wielu CDN. Innymi słowy, Media Optimizer optymalizuje zarówno jakość, jak i rozmiar, zapewniając wysoką wierność wizualną w małych plikach.

Stopniowo renderuj wideo

Wykazano, że automatyczne odtwarzanie podglądu filmów w YouTube wydłuża czas oglądania filmów o ponad 90%. Automatyczne odtwarzanie wideo ma niewiele zalet i wiele wad, dlatego ważne jest, aby uważać, kiedy go używać, a kiedy nie. Ważne jest, aby mieć możliwość wstrzymania filmu jako minimum.

Dobrym sposobem na zrównoważenie budżetu przeznaczonego na rozmiar strony byłoby najpierw serwowanie tylko podglądów wideo stworzonych przez sztuczną inteligencję i obrazów plakatów , ładowanie całego wideo tylko wtedy, gdy użytkownik je kliknie. W ten sposób możesz wyeliminować niepotrzebne pobieranie i przyspieszyć ładowanie stron.

Ewentualnie załaduj podgląd wideo na początku i pozwól odtwarzaczowi automatycznie odtwarzać pełną wersję. Po zakończeniu podglądu odtwarzacz sprawdza typ połączenia urządzenia za pomocą interfejsu API Network Connection i, jeśli użytkownik ma dobre połączenie, zamienia źródło z podglądu na rzeczywisty film.

Możesz sprawdzić przykładową stronę demonstracyjną. Oto wskazówka : ponieważ sieci CDN mogą bardziej niezawodnie wykrywać typy połączeń sieciowych, kod o jakości produkcyjnej może wykorzystywać CDN do wykrywania szybkości sieci, na podstawie której kod klienta może progresywnie wczytywać długie wideo.

Zawijanie

W przyszłości, dzięki niezwykłej zdolności do opowiadania historii w sposób, którego nie potrafią słowa, media wizualne nadal będą dominującym elementem stron internetowych i aplikacji mobilnych. Jednak określenie odpowiedniej treści do dostarczenia zależy zarówno od strategii biznesowej, jak i wydajności witryny.

„Budżet wydajności nie kieruje decyzjami o tym, jakie treści powinny być wyświetlane. Chodzi raczej o to, jak zdecydujesz się wyświetlić tę treść. Całkowite usuwanie ważnych treści w celu zmniejszenia wagi strony nie jest strategią wydajności”.

— Tim Kadlec

To dobra rada, o której należy pamiętać.