Taustavideot kotisivuilla voivat luoda vaikuttavan ensivaikutelman, mutta väärän toteutuksen seurauksena sivusto hidastuu ja käyttäjäkokemus kärsii. Kun videot käytetään oikein, ne kertovat yrityksen tarinan tehokkaammin kuin pelkkä teksti ja kuvat yhdessä.
Monet yrittäjät ajattelevat, että iso, liikkuva video kotisivujen etusivulla tekee vaikutuksen vierailijoihin. Tämä pitää paikkansa vain, kun tekniset seikat on hoidettu kuntoon ja video tukee sivuston tavoitteita.
Miksi taustavideot toimivat kotisivuilla
Hyvin toteutettu taustayhdellä houkuttelee vierailijan pysymään sivustolla pidempään. Video pystyy kertomaan yrityksen toiminnasta sekunnissa sen, mihin tekstillä menisi useita lauseita.
Esimerkiksi ravintola voi näyttää videolla ruoan valmistusta, tunnelmaa ja tyytyväisiä asiakkaita. Tämä luo välittömän yhteyden katsojaan ja herättää halun tulla paikan päälle.
Video lisää sivuston modernin oloista ilmettä ja erottaa sen kilpailijoista, jotka käyttävät vain staattisia kuvia. Mobiililiikenteen kasvaessa videot toimivat erityisen hyvin kosketusnäytöillä, koska ne eivät vaadi klikkailua toimiakseen.
Tekniset vaatimukset taustavideoille
Videotiedoston koko on kriittinen tekijä sivuston nopeudelle. Taustavideo ei saa olla yli 2-3 megatavua, jotta sivusto latautuu kohtuullisessa ajassa myös hitaammilla yhteyksillä.
MP4-formaatti toimii parhaiten selainyhteensopivuuden vuoksi. Videon pituus kannattaa pitää 15-30 sekunnissa, sillä se toistuu jatkuvasti silmukassa.
Automaattinen toisto pitää asettaa päälle, mutta ääni on pakko mykistää. Selaimet estävät äänellisten videoiden automaattisen toiston, ja yllättävä ääni häiritsee käyttäjää.
HTML5-video-elementti on paras vaihtoehto YouTube- tai Vimeo-upotuksen sijaan, koska se latautuu nopeammin eikä näytä kolmannen osapuolen mainoksia.
Mobiilioptimoin taustavideoille
Yleinen virhe on näyttää sama raskas video sekä tietokoneella että mobiililaitteella. Mobiilikäytettävyys kärsii, jos video vie liikaa kaistaa tai akun virtaa.
Mobiililaitteilla kannattaa korvata video optimoidulla kuvalla tai kevyemmällä GIF-animaatiolla. Media queries CSS:ssä mahdollistaa erilaisen sisällön näyttämisen eri laitteilla.
Lazy loading -tekniikka viivyttää videon lataamista, kunnes käyttäjä vierittää sivua videoelementin kohdalle. Tämä nopeuttaa sivuston alkulatausaikaa merkittävästi.
Datankaistaa säästävä vaihtoehto on näyttää ensin staattinen esikatselu video ja alkaa toistamaan video vasta, kun käyttäjä on ollut sivulla muutaman sekunnin.
Sisällölliset periaatteet videoita käytettäessä
Video ei saa olla vain koristeena vaan sen pitää tukea sivuston viestiä. Paras taustaydin toimii kuin hiljaa taustan visuaalinen elementti, joka ei kilpaile toksullisesti sivun sisällön kanssa.
Tekstin luettavuus on ensiarvoisen tärkeää. Videon pääväreiden pitää olla riittävän neutraaleja, jotta niiden pätte luettava teksti erottuu selkeästi.
Kontrastin varmistamiseksi kannattaa lisätä videoon himmeä päävite tai käyttää tekstien taustalla läpinäkyvää taustaväriä. Valkoisella tekstillä tummalla pohjalla on yleensä paras luettavuus videon päállä.
Video ei saa sisältää nopeita välähdyksiä tai äkillisiä liikkeitä, jotka voivat häiritä lukemista tai jopa laukaista epileptisiä kohtauksia herkillä henkilöillä.
Yleisiä virheitä taustavideoiden käytössä
Suurin virhe on käyttää YouTube-videota taustana autoplay-ominaisuudella. YouTube-videot ovat raskaita, niissä näkyy brändilogoja ja ne eivät aina toimi luotettavasti mobiililaitteilla.
Toinen yleinen ongelma on liian pitkä tai monimutkainen video, joka häiritsee sivun ensisijaista viestiä. Video ei saa viedä huomiota pois tärkeistä toimintakehotuksista tai yhteystiedoista.
Äänen automaattinen toisto on vakava käytettävyysvirhe, joka karkottaa vierailijoita välittömästi. Lisäksi se rikkoo saavutettavuusohjeita ja voi aiheuttaa ongelmia ruudunlukijoiden kanssa.
Monissa toteutuksissa unohdetaan tarjota nappi videon pysäyttämiseen. Jotkut käyttäjät kokevat liikkuvan sisällön häiritseväksi tai heillä on rajalliset dataliittymät.
Tekninen toteutus askel askeleelta
Aloita optimoimalla videotiedosto pieneen kokoon säilyttäen kohtuullinen kuvanlaatu. Handbrake-ohjelma on ilmainen työkalu videokompressioon.
HTML-koodissa käytä video-elementtiä näin: autoplay, muted, loop ja playsinline -attribuutit varmistavat halutun toiminnallisuuden.
CSS:llä aseta video kattamaan koko tausta-alueen käyttämällä object-fit: cover -ominaisuutta. Position: absolute ja z-index: -1 sijoittavat videon muun sisällön taakse.
Lisää JavaScript-koodi, joka tarkistaa yhteyden nopeuden ja laitteen tyypin. Hidas yhteys tai vanha laite voi näyttää staattisen kuvan videon sijaan.
Suorituskyvyn mittaaminen ja optimointi
Sivuston latausnopeus on seurattava tarkasti videoiden lisäämisen jälkeen. Google PageSpeed Insights kertoo, hidastaako video sivustoa liikaa.
First Contentful Paint (FCP) -arvo kertoo, milloin käyttäjä näkee ensimmäisen sisällön. Videon ei pidä viivyttää tätä arvoa yli 2,5 sekunnilla.
Bandwidth-aware loading tarkoittaa videon laadun säätämistä käyttäjän yhteyden mukaan. Nopea yhteys voi ladata HD-version, hidas yhteys saa kevyemmän version.
A/B-testaus paljastaa, parantavatko taustavideot todella sivuston konversiota. Mittaa aikaa sivulla, pomppuprosenttia ja yhteydenottoja sekä video- että ilman video -versioissa.
UKK
Voiko taustayhdelle lisätä äänet myöhemmin?
Kyllä, mutta ääni pitää aina aloittaa käyttäjän toimesta. Lisää video-elementtiin controls-attribuutti tai tee oma toisto/pysäytä-nappi, joka mahdollistaa äänten kuuntelun käyttäjän valinnasta.
Paljonko taustavideo lisää hosting-kustannuksia?
Optimoitu 2-3 megatavun video lisää kuukausittaista kaistankulutusta noin 10-20 eurolla 1000 kuukausikävijää kohden. Summa riippuu hosting-palvelun hinnoittelusta ja kävijämääristä.
Toimiiko taustaydet kaikissa selaimissa?
Moderni HTML5-video toimii kaikissa ajanmukaisissa selaimissa. Internet Explorer 11 ja vanhemmat selaimet tarvitsevat varasuunnitelman, esimerkiksi staattisen kuvan videön sijaan.
Taustavideot ovat tehokas työkalu, kun ne toteutetaan teknisesti oikein ja sisällöllisesti tarkoituksenmukaisesti. Muista testata video eri laitteilla ennen julkaisua ja seuraa sivuston suorituskykyä säännöllisesti. Hyvin tehty taustayhin voi nostaa kotisivujen ammattimaisuutta merkittävästi ilman, että käyttäjäkokemus kärsii.