Kedy sú video a animácie užitočné a kedy škodia: vplyv na rýchlosť a Core Web Vitals, odložené načítanie, automatické prehrávanie, dostupnosť, SEO a kontrola výsledku.
O nás
Animácie a video sú namieste, keď pomáhajú splniť úlohu návštevníka: ukázať produkt v pohybe, vysvetliť proces, potvrdiť akciu. Aby sa zachovala rýchlosť, video sa načítava odložene, komprimuje sa a sprevádza náhľadovým obrázkom, pre bloky sa rezervuje miesto a animácie rozhrania sa robia krátke a ľahké pre prehliadač s ohľadom na nastavenie zníženého pohybu.
Pohyb púta pozornosť, preto je vhodné používať ho tam, kde niečo vysvetľuje alebo potvrdzuje. Nižšie sú typické prvky a spôsoby, ako znížiť ich riziko.
| Prvok | Kedy je namieste | Riziko | Ako riziko znížiť |
|---|---|---|---|
| Video na pozadí prvej obrazovky | Keď pohyb odovzdáva atmosféru: podnik, udalosť, výroba | Hmotnosť súboru a pomalá prvá obrazovka | Krátka slučka bez zvuku, kompresia, náhľadový obrázok, statický obrázok na slabých zariadeniach |
| Video o produkte alebo službe | Keď je proces ťažké vysvetliť textom | Oneskorenie kvôli načítaniu prehrávača | Náhľadový obrázok s tlačidlom prehrávania, prehrávač na požiadanie |
| GIF animácia | Zriedka | Veľká veľkosť v porovnaní s videom | Nahradiť krátkym videom alebo vektorovou animáciou |
| Efekty pri posúvaní, paralaxa | Na prezentačných stránkach | Záťaž procesora, rozptyľovanie | Minimum efektov, vypnutie pri znížení pohybu |
| Mikroanimácie tlačidiel, menu, formulárov | Takmer vždy | Nadmernosť | Krátke prechody potvrdzujúce akciu |
| Automatický karusel | Obmedzene | Snímka sa zmení skôr, než ju človek dočíta | Ručné ovládanie, pauza, hlavná správa v prvej snímke |
Kontrolná otázka ku každému prvku: čo návštevník z tohto pohybu získava? Ak je odpoveď ťažké sformulovať, prvok možno odstrániť bez strát.
Pre web so službami sú užitočné krátke klipy o etapách práce, zoznámenie s tímom a rozbor skutočnej prípadovej štúdie. Pre internetový obchod sú namieste prehliadka produktu v akcii, ukážka rozmerov a výbavy a odpovede na typické otázky. V takýchto formátoch pohyb odovzdáva informáciu, ktorú je ťažké ukázať fotografiou.
Video a skripty animácií ovplyvňujú naraz niekoľko ukazovateľov. Náhľadový obrázok alebo prvý záber klipu sa môže stať najväčším prvkom prvej obrazovky, ktorý meria ukazovateľ LCP. Prehrávače služieb tretích strán pridávajú skripty, ktoré sa načítavajú spolu so stránkou. Blok bez rezervovaného miesta posúva obsah počas načítania a to zhoršuje ukazovateľ CLS. Animácie na skriptoch môžu blokovať hlavné vlákno a brzdiť reakciu stránky (ukazovateľ INP). Google zohľadňuje zážitok používateľa zo stránky, hoci zmysluplnosť obsahu zostáva dôležitejšia, a pomalé video škodí predovšetkým návštevníkom, najmä na mobilnom pripojení.
Klip na pozadí má byť krátky, bez zvuku, s náhľadovým obrázkom a kompresiou podľa veľkosti bloku. Súbor z fotoaparátu alebo strihacieho programu sa takmer nikdy nehodí na zverejnenie bez prekódovania: ukladá sa v modernom formáte, napríklad MP4 (H.264), a podľa potreby sa pridáva WebM. Pre slabé zariadenia a pomalé pripojenie sa namiesto videa zobrazuje statický obrázok.
Vložený prehrávač dotiahne skripty a údaje ešte pred kliknutím na prehrávanie. Jednoduchým riešením je zobraziť náhľadový obrázok s tlačidlom a samotný prehrávač pripojiť až po kliku. Iným spôsobom je odložené načítanie iframe: spustí sa, keď sa blok priblíži k obrazovke. V každom prípade sa veľkosť bloku nastavuje vopred, aby stránka nepodskakovala.
Vlastné video dáva kontrolu nad vzhľadom a odstraňuje skripty tretích strán, no zaťažuje server a prenos dát. Pre krátke klipy stačí komprimovaný súbor, pre dlhé je lepšie použiť videoplatformu alebo sieť na doručovanie obsahu s adaptívnym tokom, ktorý volí kvalitu podľa rýchlosti pripojenia.
Pohyb môže rozptyľovať alebo škodiť, preto pre neho existujú jednoduché pravidlá zo zásad WCAG a nastavení moderných systémov.
Video môže priniesť dodatočnú viditeľnosť, ak ho vyhľadávač ľahko nájde. Umiestnite klip na stránku so zrozumiteľným nadpisom a popisom, pridajte miniatúru, štruktúrované údaje VideoObject a podľa potreby aj video mapu webu. Aby sa video mohlo dostať do výsledkov videí v Google, musí byť nápadnou súčasťou stránky, najlepšie jej hlavným obsahom. Text okolo klipu, prepis a popisy pomáhajú pochopiť tému.
Samo osebe nie, ale ťažký klip spomaľuje zobrazenie prvej obrazovky a môže zhoršiť ukazovatele rýchlosti. To sa odráža na zážitku návštevníkov a sprostredkovane aj na vyhľadávaní. Preto sledujte hmotnosť súboru a pridávajte náhľadový obrázok.
Pre väčšinu malých webov je pohodlné vkladať video z videoplatformy podľa schémy náhľadový obrázok plus načítanie po kliku. Vlastný hosting je namieste pre krátke komprimované klipy a pre dlhé je lepšia sieť na doručovanie videa.
Áno. Mnoho ľudí pozerá video bez zvuku a pre časť návštevníkov sú titulky nevyhnutné. Prepis navyše pridáva na stránku text.
Pre krátke jednoduché efekty áno, ale GIF zvyčajne váži výrazne viac ako video s rovnakým obrazom. Lepšie je nahradiť ho krátkym videom bez zvuku alebo vektorovou animáciou.
Presný limit neexistuje. Každá animácia má plniť úlohu a pri znížení pohybu sa vypínať alebo zjednodušovať. Ak prvok odvádza pozornosť od hlavnej akcie, odstraňuje sa.
Video a animácia prinášajú úžitok, keď zodpovedajú úlohe návštevníka a neprekážajú rýchlosti. Komprimujte súbory, odkladajte načítanie, rezervujte miesto, zohľadňujte nastavenie zníženého pohybu a kontrolujte výsledok na reálnych zariadeniach. Začať je vhodné najdôležitejšími stránkami: hlavnou stránkou, stránkami služieb a stránkami produktov, pretože práve na nich sa návštevníci rozhodujú. Po zmenách je užitočné zopakovať meranie a porovnať výsledok s predchádzajúcim. LightSEO, digitálna agentúra z Mukačeva, vám pomôže posúdiť, ako médiá ovplyvňujú rýchlosť webu. Technické otázky rýchlosti patria do SEO auditu webu a nový web, kde sa médiá plánujú vopred, vzniká v rámci vývoja firemného webu na kľúč.
