Cum să creșteți performanța media la un buget

Publicat: 2022-03-10
Rezumat rapid ↬ Cum obținem performanța media corectă, rămânând în limitele bugetelor de performanță? Să aruncăm o privire la statisticile și datele recente despre bugetele de performanță, problemele de performanță a redării videoclipurilor și câteva tehnici și instrumente pentru a rezolva aceste probleme.

Savantul american Mason Cooley a descris cu îndemânare un fapt dur al vieții: „Un buget elimină distracția din bani”. Fără îndoială, mass-media însuflețește site-urile web, adăugând atractivitate, entuziasm și intrigi, cu atât mai puțin stimulente de a rămâne pe o pagină și de a o revedea frecvent. Cu toate acestea, la fel cum cheltuielile scăpate de control sunt de rău augur pe termen lung, la fel și media digitală nebugetă decimează performanța site-ului.

Un exemplu concret: o încetinire a încărcării paginii de doar o secundă ar putea costa pe Amazon 1,6 miliarde de dolari în vânzări anuale. Dintre mulți factori care afectează viteza de încărcare a paginii, media este unul semnificativ. De aici și nevoia extremă de a acorda prioritate optimizării media. Cheltuindu-vă banii corect pe această sarcină și bugetând media dvs., veți obține economii și beneficii semnificative pe termen lung.

Un summit de performanță web, cu un diapozitiv cu dovezi care arată impactul pozitiv al performanței și un participant care susține că totul este o mare păcăleală și creăm o experiență de utilizator mai bună degeaba.
Ai fost si tu in aceeasi situatie? Ilustrație de Joel Pett, adaptată de Jake Archibald.

Bugetele de performanță

„Un buget de performanță este „... exact așa cum sună: setați un „buget” pe pagina dvs. și nu permiteți paginii să-l depășească. Acesta poate fi un anumit timp de încărcare, dar de obicei este o conversație mai ușor de purtat atunci când defalci bugetul în numărul de solicitări sau dimensiunea paginii.”

— Tim Kadlec

Un buget de performanță ca mecanism pentru planificarea unei experiențe web și prevenirea scăderii performanței poate consta din următoarele criterii:

  • Greutatea totală a paginii,
  • Numărul total de solicitări HTTP,
  • Timpul de încărcare a paginii într-o anumită rețea mobilă,
  • Întârziere la prima intrare (FID)
  • First Contentful Paint (FCP),
  • Schimbare cumulativă a aspectului (CLS),
  • Cea mai mare vopsea cu conținut maxim (LCP).

Vitaly Friedman are o listă de verificare excelentă care descrie componentele care afectează performanța web, împreună cu sfaturi utile despre tehnicile de optimizare. Familiarizarea cu aceste componente vă va permite să stabiliți obiective de performanță .

Cu obiective de performanță clar documentate, diferite echipe pot avea conversații semnificative despre livrarea optimă a conținutului. De exemplu, un buget îi poate ajuta să decidă dacă o pagină trebuie să conțină cinci imagini – sau trei imagini și un videoclip – și să rămână în continuare în limitele planificate.

curba vitezei bugetului
Bugetul de performanță, așa cum este utilizat în instrumentele de monitorizare a performanței, cum ar fi SpeedCurve. (Previzualizare mare)

Cu toate acestea, a avea un buget de performanță ca măsură independentă ar putea să nu fie de mare ajutor. De aceea trebuie să corelăm performanța cu obiectivele organizaționale.

Performanta in afaceri

Dacă folosiți o mulțime de octeți pe videoclipuri și imagini neoptimale, experiența rich media nu va mai fi atât de bogată. O organizație există pentru a obține rezultate , cum ar fi atragerea oamenilor să cumpere, educarea lor, motivarea lor sau căutarea ajutorului și voluntarilor. Oricine are o prezență pe web ar aprecia relația dintre efectul diferitelor măsuri de performanță asupra valorilor de afaceri.

WPOStats evidențiază literalmente sute de studii de caz care arată cum o scădere a performanței – de la câteva sute de milisecunde la secunde – ar putea duce la o scădere masivă a vânzărilor anuale. Desenarea unui astfel de tip de relație ajută foarte mult la urmărirea efectului performanței asupra afacerii și, în cele din urmă, la construirea unei culturi a performanței pentru organizații.

În mod similar, site-urile lente pot avea un impact dramatic asupra conversiilor. O provocare grea cu care se confruntă companiile online este să găsească echilibrul potrivit între implicarea publicului, păstrând în același timp bugetul de performanță.

Nu este surprinzător atunci că o componentă critică pentru implicarea publicului este media vizuală optimizată , de exemplu un videoclip captivant care împletește o poveste despre produsul sau serviciul dvs. împreună cu elemente vizuale relevante, interesante și atrăgătoare.

Potrivit oamenilor de știință de la MIT, creierul nostru poate absorbi și înțelege mediile vizuale în mai puțin de 13 milisecunde, în timp ce textul poate lua cititorului mediu peste 3,3 minute pentru a înțelege, adesea după ce l-a recitit și a făcut referințe încrucișate în alte locuri. Nu e de mirare că conținutul microvideo (de obicei doar 10-20 de secunde) oferă adesea angajamente mari și câștiguri de conversie.

Apelarea videoclipurilor

În timpul cumpărăturilor online, ne așteptăm să vedem imagini detaliate ale produselor . De ani de zile, am ajuns să prefer să răsfoiesc produse care sunt completate de videoclipuri care arată, de exemplu, cum să folosești produsul sau poate cum să-l asamblați, sau care demonstrează cazuri de utilizare din viața reală.

Pe lângă experiența mea personală, o mulțime de cercetări atestă importanța conținutului video:

  • 96% dintre consumatori consideră videoclipurile utile atunci când iau decizii de cumpărare online.
  • 79% dintre cumpărătorii online preferă să vizioneze un videoclip pentru informații despre un produs, decât să citească textul de pe o pagină web.
  • Produsul video potrivit poate crește conversiile cu peste 80%.

Vorbind despre livrarea de videoclipuri pe web,

„Greutatea medie a videoclipurilor crește dramatic în fiecare an, mai mult pe mobil decât pe desktop. În unele cazuri, acest lucru poate fi garantat, deoarece dispozitivele mobile au adesea ecrane de înaltă rezoluție, dar se poate datora și lipsei capacității de a oferi diferite dimensiuni video folosind numai HTML. Multe videoclipuri mari de pe web sunt plasate manual în paginile de marketing și nu au servere media sofisticate pentru a oferi dimensiuni adecvate, așa că sper că în viitor vom vedea caracteristici HTML simple similare pentru livrarea video pe care le vedem în imaginile receptive. ”

— Scott Jehl

Același sentiment a fost transmis de Conviva Q4 2020 State of Streaming (înregistrare este necesară), care a remarcat că telefoanele mobile au înregistrat cu 20% mai multe probleme de memorie tampon , o eroare de pornire video cu 19% mai mare și timp de pornire cu 5% mai lung decât alte dispozitive.

Pe lângă problemele de redare, livrarea video poate crește și costurile lățimii de bandă, mai ales dacă nu puteți furniza formatele optime ale browserului. De asemenea, dacă nu utilizați o rețea de livrare a conținutului (CDN) sau mai multe CDN-uri pentru a mapa utilizatorii la cele mai apropiate regiuni de margine pentru latențe reduse - o practică numită rutare suboptimală - este posibil să încetiniți începutul videoclipului.

În mod similar, imaginile neoptimizate au fost cauza principală a balonării paginii. Potrivit Web Almanac, diferența de octeți de imagine trimiși către dispozitivele mobile sau desktop este foarte mică, ceea ce înseamnă o pierdere suplimentară de lățime de bandă pentru dispozitivele care nu au nevoie cu adevărat de toți octeții suplimentari.

Fără îndoială, exagerarea cu un conținut captivant, dar neoptimizat, dăunează obiectivelor de afaceri și aici intră în joc arta fină a echilibrului.

Arta de a echilibra performanța cu conținutul media

Chiar dacă rich media poate promova implicarea utilizatorilor, trebuie să echilibrăm costul livrării acestora cu performanța site-ului și obiectivele de afaceri. O alternativă este găzduirea și livrarea videoclipurilor printr-o terță parte, cum ar fi YouTube sau Vimeo.

Cu toate acestea, în ciuda economiilor de lățime de bandă, această abordare are un cost. În calitate de proprietar de conținut, nu puteți crea o experiență de marcă complet personalizată sau oferi personalizare. Și, desigur, trebuie să găzduiți și să vă livrați imaginile.

Nu trebuie să vă descărcați conținutul. Există și alte opțiuni disponibile. Luați în considerare reînnoirea sistemului pentru livrarea media optimă, făcând următoarele:

Înțelegeți utilizarea curentă

Studiați greutatea paginilor dvs. web și dimensiunea activelor lor media. Expertul în cercetare web Tammy Everts recomandă să vă asigurați că paginile au o dimensiune mai mică de 1 MB pentru mobil și mai puțin de 2 MB pentru orice altceva. În plus, identificați resursele care sunt afișate pe paginile critice.

De exemplu, puteți înlocui un paragraf de text și imaginile asociate cu un scurt videoclip? Cum ți-ar afecta această decizie obiectivele de afaceri? În această etapă, ar putea fi necesar să vă revizuiți Monitorizarea utilizatorilor reali (RUM) și Analytics și să identificați paginile esențiale care duc la rate mai mari de conversie și implicare.

De asemenea, asigurați-vă că urmăriți sintetic Core Web Vitals (CWV) de la Google ca parte a setului dvs. de instrumente cu instrumente precum LightHouse. De asemenea, puteți măsura CWV-urile prin monitorizarea utilizatorilor reali (RUM) precum CrUX. Întrucât CWV-urile vor fi, de asemenea, un semnal pentru Google pentru crawler-uri, este logic să monitorizezi și să optimizezi acele valori: cea mai mare vopsea de conținut (LCP), întârziere la prima introducere (FID) și schimbare cumulativă a aspectului (CLS).

Serviți formatul potrivit

Serviți imagini sau videoclipuri în cel mai potrivit format în ceea ce privește dimensiunea și rezoluția pentru dispozitivul de vizualizare sau browser. S-ar putea să aveți nevoie de un CDN de imagine în acest scop. Alternativ, creați variante precum WebM, AVIF, JPEG-XL, HEIC etc. și serviți selectiv tipul de conținut potrivit pe baza antetelor User-Agent și Accept solicitate.

Pentru conversii unice, puteți încerca instrumente precum Squoosh.app sau avif.io. O practică similară este convertirea GIF-urilor animate în videoclipuri. Pentru mai multe informații, consultați acest articol Web.dev. Doriți să încercați să configurați un flux de lucru pentru a gestiona publicarea video? Consultați sfaturile grozave din articolul Optimizarea videoclipurilor pentru dimensiune și calitate.

Serviți mărimea potrivită

Peste 41% dintre imaginile de pe dispozitivele mobile sunt dimensionate incorect. Deci, în loc să difuzați o lățime fixă, decupați imaginile și videoclipurile pentru a se potrivi cu dimensiunea containerului cu instrumente precum Lazysizes. Mai bine, instrumentele AI care pot detecta zonele de interes în timp ce tăiați imaginile vă pot economisi mult timp și efort. De asemenea, puteți profita de încărcarea leneșă nativă pentru imaginile care se află sub pliul.

Adaugă subtitrări la videoclipurile tale

Aproape 85% dintre videoclipuri sunt redate fără sunet. Adăugarea de subtitrări la acestea nu oferă doar o experiență accesibilă, dar ar capta atenția publicului și ar stimula implicarea. Cu toate acestea, transcrierea videoclipurilor ar putea fi o muncă plictisitoare; puteți lucra cu un serviciu de transcriere bazat pe inteligență artificială și îl puteți îmbunătăți pentru a automatiza fluxul de lucru.

Livrați prin mai multe CDN-uri

CDN-urile pot atenua latența de ultimul kilometru, pot scurta timpul de începere a unui videoclip și pot reduce problemele de stocare în tampon. Potrivit unui studiu realizat de Citrix, o strategie multi-CDN poate reduce și mai mult latența și poate oferi disponibilitate continuă în cazul întreruperilor localizate în nodurile marginale ale CDN-ului.

În loc să utilizați mai multe instrumente discrete, puteți explora un produs precum Media Optimizer de la Cloudinary, care optimizează eficient și eficient media, oferind formatul și calitatea potrivite prin noduri de margine multi-CDN. Cu alte cuvinte, Media Optimizer optimizează atât calitatea, cât și dimensiunea, oferind o fidelitate vizuală ridicată în fișiere mici.

Redați progresiv videoclipul

Redarea automată a videoclipurilor de previzualizare pe YouTube a demonstrat că crește timpul de vizionare a videoclipurilor cu peste 90%. Redarea automată a videoclipurilor are puține beneficii și o mulțime de dezavantaje, așa că este important să fii atent când să îl folosești și când să nu îl folosești. Este important să aveți opțiunea de a întrerupe videoclipul ca minim.

O modalitate bună de a echilibra bugetul pentru dimensiunea paginii ar fi să difuzați mai întâi previzualizări ale videoclipurilor create de inteligență artificială și numai imagini de afiș , încărcând videoclipul complet numai dacă utilizatorul face clic pe videoclip. În acest fel, puteți elimina descărcările inutile și puteți accelera încărcările paginilor.

Ca alternativă, încărcați un videoclip de previzualizare la început și lăsați playerul să redea automat versiunea completă. Odată ce previzualizarea este finalizată, playerul verifică tipul de conexiune al dispozitivului cu API-ul Network Connection și, dacă utilizatorul are o conectivitate bună, schimbă sursa de la previzualizare la videoclipul real.

Puteți verifica o pagină de probă pentru o demonstrație. Iată un sfat : deoarece CDN-urile pot detecta mai fiabil tipurile de conexiune la rețea, codul dvs. de calitate de producție ar putea folosi CDN-ul pentru a detecta viteza rețelei, pe baza căreia codul dvs. de client ar putea încărca progresiv videoclipul lung.

Încheierea

Pe drum, datorită capacității sale remarcabile de a spune povești într-un mod în care cuvintele nu pot, media vizuală va continua să fie un element dominant pentru site-uri web și aplicații mobile. Cu toate acestea, determinarea conținutului potrivit de livrat depinde atât de strategia dvs. de afaceri, cât și de performanța site-ului.

„Un buget de performanță nu vă ghidează deciziile cu privire la conținutul care trebuie afișat. Mai degrabă, este vorba despre modul în care alegeți să afișați acel conținut. Eliminarea completă a conținutului important pentru a reduce greutatea unei pagini nu este o strategie de performanță.”

— Tim Kadlec

Este un sfat bun de reținut.