Een video op je site zetten voelt als iets kleins. Je plakt een link, er verschijnt een speler en je bent klaar. Wat je er niet bij ziet, is wat je zojuist hebt binnengehaald. Een videoblok laadt vaak meer dan een megabyte aan code voordat er iets afspeelt.
Datzelfde geldt voor een kaart, een agenda of een chatvenster. Elke insluiting is een stukje van iemand anders website op die van jou.
Bij Van Gogh Tours kwam dat samen. Ik verzorgde daar het webdesign en de vindbaarheid. Op de routepagina’s stonden kaarten en beeldmateriaal, want mensen willen zien waar ze lopen.
Ik heb die onderdelen achter een klik gezet. De bezoeker ziet eerst een afbeelding met een afspeelknop. Pas als hij klikt, wordt de echte speler geladen. De pagina laadt daardoor snel, en er gaat niets naar buiten zonder dat de bezoeker dat wil.
Een embed haalt inhoud van een andere site binnen op die van jou.
Wat betekent embedden?
Embedden is het insluiten van externe inhoud op je eigen pagina. De inhoud staat ergens anders, maar wordt bij jou getoond alsof hij van jou is.
Technisch gebeurt dat meestal met een iframe. Dat is een venster in je pagina waarin een compleet andere website wordt geladen.
Het verschil met linken
Bij een link stuur je je bezoeker weg. Bij een embed haal je de inhoud naar binnen. Je bezoeker blijft dus op jouw site.
Dat is de winst. De prijs is dat je iets binnenhaalt waar jij geen controle over hebt.
Wat je meestal insluit
Bij mijn klanten zie ik vier soorten terugkomen. video insluiten van een videoplatform. Een kaart insluiten zodat mensen je pand kunnen vinden. Een agenda of boekingsmodule. En een blok met reviews.
Alle vier zijn nuttig. Alle vier brengen dezelfde vier vraagstukken mee.
Wat het kost aan snelheid
Een enkele videospeler kan zwaarder zijn dan je hele pagina. Een kaart met interactie idem. Zet je er drie op een pagina, dan merkt je bezoeker dat direct.
Hoe ik dat oplos
Toon eerst een afbeelding met een afspeelknop, laad de speler pas na een klik.
Gebruik een statische kaart met een link in plaats van een interactieve kaart.
Laad onderdelen die onder de vouw staan pas als je erheen scrollt.
Beperk het aantal insluitingen per pagina tot een.
Dat scheelt vaak meer dan alle andere snelheidswinst samen. Meer daarover lees je bij pagespeed.
Toestemming en privacy
Dit is de kant die het vaakst vergeten wordt. Een insluiting plaatst bijna altijd iets op het apparaat van je bezoeker. Vaak zelfs voordat er iets afspeelt.
Daarmee valt het onder het toestemming vragen dat je ook voor statistieken doet. Laad je een videoblok direct, dan geef je gegevens door zonder dat het mag. Meer daarover lees je bij cookie.
De oplossing is dezelfde als voor snelheid. Laad pas na een klik of na toestemming, met een nette plaatshouder ervoor.
Waarom een embed niet werkt
Er zijn drie gebruikelijke oorzaken. De bron staat insluiten niet toe, want dat kan een site blokkeren. Je toestemmingsplugin houdt het tegen, wat vaak de bedoeling is. Of je browser blokkeert het via een uitbreiding.
Test daarom altijd in een privevenster en op een tweede apparaat. Zie je het daar wel, dan zit het aan jouw kant. Let er tot slot op dat een ingesloten venster ook met het toetsenbord bereikbaar is. Dat hoort bij accessibility.
Geef elk venster een naam
Een ingesloten venster zonder titel klinkt in hulpsoftware als een naamloos kader. De gebruiker weet dan niet wat hij overslaat.
Geef daarom altijd een korte beschrijving mee. Bijvoorbeeld: kaart met onze locatie in Hoorn. Dat is een kleine moeite met een duidelijk effect.
Wat je vastlegt per insluiting
Noteer welke bron je gebruikt en waarom. Verdwijnt die dienst ooit, dan weet je meteen welke pagina’s je moet nalopen. Bij onderhoud controleer ik ze standaard, want bronnen veranderen hun code zonder bericht. Zo hou ik het laadtijd beperken in de hand.
Meer vragen over Embed
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat betekent embedden?
Hoe sluit je een video in op je website?
Vertraagt een embed je website?
Moet je toestemming vragen voor een embed?
Wat is het verschil tussen embedden en linken?
Waarom werkt mijn embed niet?
Wat betekent embedden?
Ja, en vaak veel meer dan mensen verwachten. Een enkele videospeler kan zwaarder zijn dan je hele pagina.
Je plakt een link, er verschijnt een speler en je bent klaar. Wat je er niet bij ziet, is dat er vaak meer dan een megabyte aan code wordt geladen voordat er iets afspeelt.
Een interactieve kaart is net zo zwaar. Zet je er drie insluitingen op een pagina, dan merkt je bezoeker dat direct op zijn telefoon.
Ik los dat op met vier maatregelen. Toon eerst een afbeelding met een afspeelknop en laad de speler pas na een klik. Gebruik een statische kaart met een link in plaats van een interactieve.
Laad onderdelen onder de vouw pas als je erheen scrollt. En beperk het aantal insluitingen per pagina tot een. Dat scheelt vaak meer dan alle andere snelheidswinst samen.
Meet het verschil zelf een keer. Haal een video van een pagina af en vergelijk de laadtijd. Het resultaat verrast bijna iedereen.
Vertraagt een embed je website?
Embedden is het insluiten van inhoud van een andere website op je eigen pagina. De inhoud staat ergens anders, maar wordt bij jou getoond alsof hij van jou is.
Denk aan een video van een videoplatform, een kaart met je vestiging, een agenda of een blok met reviews. Technisch gebeurt dat meestal met een venster in je pagina waarin een complete andere site wordt geladen.
Het verschil met een link is groot. Bij een link stuur je je bezoeker weg. Bij een embed haal je de inhoud naar binnen en blijft hij bij jou.
Dat is de winst. De prijs is dat je iets binnenhaalt waar jij geen controle over hebt.
De bron kan zijn code wijzigen, zijn dienst stoppen of gegevens verzamelen. Jij merkt daar niets van, tot het misgaat op jouw pagina. Meer over hoe je pagina wordt opgebouwd lees je bij DOM.
Bekijk eens welke insluitingen er op je site staan. Vaak zijn het er meer dan je denkt: een kaart, een chatknop, een lettertype en een reviewblok.
Moet je toestemming vragen voor een embed?
In de meeste gevallen wel, en dit is de kant die het vaakst wordt vergeten.
Een insluiting plaatst bijna altijd iets op het apparaat van je bezoeker. Vaak zelfs voordat er een video is gestart. Er gaat ook informatie naar de andere partij, zoals het IP-adres en welke pagina er bekeken wordt.
Daarmee valt het onder dezelfde regels als je statistieken. Laad je een videoblok direct bij het openen van de pagina, dan geef je gegevens door zonder dat het mag.
De oplossing is gelukkig dezelfde als voor snelheid. Laad pas na een klik of na toestemming, met een nette plaatshouder ervoor.
Zo sla je twee vliegen in een klap. Je pagina is sneller en je regelt je toestemming netjes. Meer daarover lees je bij cookie.
Regel dit tegelijk met je cookiebanner. Dan doe je het werk een keer in plaats van twee keer, en klopt je hele pagina in een keer.
Waarom werkt mijn embed niet?
Er zijn drie gebruikelijke oorzaken, en die loop ik in deze volgorde langs.
De eerste is dat de bron insluiten niet toestaat. Een website kan aangeven dat hij niet in een venster van een ander getoond mag worden. Dan zie je een lege ruimte of een foutmelding.
De tweede is je eigen toestemmingsplugin. Die blokkeert de insluiting totdat er akkoord is gegeven. Dat is meestal precies de bedoeling, maar het lijkt op een storing.
De derde zit bij de bezoeker zelf. Een uitbreiding in de browser die advertenties of volgscripts blokkeert, haalt insluitingen er vaak ook uit.
Test daarom altijd in een privevenster en op een tweede apparaat. Zie je het daar wel, dan zit het aan jouw kant en is er niets stuk aan je site.
Meld het pas als storing bij je bouwer als je het op een tweede apparaat ook ziet. Dat scheelt jullie allebei een uur zoeken.
Wat is het verschil tussen embedden en linken?
Bij een link stuur je iemand weg van je site. Bij een embed haal je de inhoud naar jou toe.
Dat klinkt als een voordeel voor embedden, en vaak is dat ook zo. Je bezoeker blijft bij jou, ziet je aanbod en kan direct doorklikken naar je formulier.
Maar een link heeft ook voordelen. Hij kost je niets aan laadtijd, hij plaatst niets op het apparaat van je bezoeker en hij kan nooit stuk gaan door een wijziging bij de bron.
Mijn vuistregel is simpel. Is de inhoud essentieel voor het begrip van je pagina? Dan embedden. Is het aanvullend of naslag? Dan linken.
Een instructievideo bij een product hoort erin. Een verwijzing naar een brancheorganisatie hoort erbuiten. Let er tot slot op dat een ingesloten venster ook met het toetsenbord bereikbaar is, zoals bij accessibility beschreven staat.
Loop je insluitingen een keer per jaar na. Bronnen wijzigen hun code zonder bericht, en dan staat er ineens een leeg vlak op je pagina.
Staat er een video of kaart op je site die je pagina traag maakt? Stuur me de link via het formulier hieronder. Ik meet wat die insluiting je kost aan laadtijd en of hij gegevens doorgeeft voordat dat mag. Je krijgt terug wat je eraan kunt doen zonder de inhoud te verliezen. Vermeld je plaats, dan weet ik meteen waar je zit.
