Videotaustad veebis: Äge või aeglane? (Performance Guide 2026)
Liikuv pilt püüab pilku, aga 20MB fail tapab lehe kiiruse. Kuidas kasutada videot nii, et Google Speed Insights ei karjuks sinu peale.
Video on emotsionaalne. See räägib loo kiiremini kui tekst. Aga kui sinu veebilehe avamine võtab aega 10 sekundit, sest taustal laeb 4K droonivideo, siis klient lahkub enne, kui ta seda näeb. Kuidas leida tasakaal "Wow-faktori" ja kiiruse vahel?
Koodekid: WebM vs MP4
Unusta vana kooli MP4 (H.264). See on raske ja ebaefektiivne. Aastal 2026 on standardiks WebM (VP9 või AV1). See pakub sama kvaliteeti 30-50% väiksema failimahuga. Reegel: Sinu taustavideo ei tohi olla suurem kui 5MB. Kui on, siis lõika lühemaks või kompresseeri (HandBrake on sinu sõber).
Ligipääsetavus (A11y) ja "Autoplay"
1. Heli: Brauserid (Chrome, Safari) blokeerivad automaatselt videod, millel on heli. Video peab olema muted.
2. Liikumine: Mõned inimesed kannatavad "motion sickness" all. Sul peab olema nupp "Peata video" või austama kasutaja operatsioonisüsteemi sätet prefers-reduced-motion.
Lazy Loading:
Ära lae videot kohe. Lae kõigepealt kerge pilt (poster image). Alles siis, kui leht on valmis või kasutaja kerib videoni, lae raske videofail. See hoiab "LCP" (Largest Contentful Paint) skoori rohelises.
KKK: Video veebis
Kas YouTube embed on parem? +
Taustaks ei. YouTube toob kaasa oma pleieri, reklaamid ja jälgimiskoodid, mis teevad lehe raskeks. Taustavideo hosti alati ise (või kasuta CDN-i).
Mis on "Poster Image"? +
See on staatiline pilt, mida näidatakse enne video laadimist. Ilma selleta näeb kasutaja musta auku või tühja kasti.
Tee oma veeb elavaks (ja kiireks)
Loome dünaamilisi veebilehti, mis on optimeeritud kiirusele.
Küsi disaini analüüsi →SIA DESIGN
Disain ja veebiarendus
SIA DESIGN meeskond kirjutab praktilisi juhendeid veebidisaini, arenduse ja SEO teemadel.
Loe rohkem SIA DESIGN meeskonnast →
