En YouTube indlejring henter afspillerens egne scripts og et forhåndsvisningsbillede i det øjeblik, den indlæses, og på en side med flere videoer løber det hurtigt op. Her er hvordan du holder det hurtigt uden at give afkald på indlejret video.
Hvorfor indlejringer påvirker sidehastigheden
Selv før en besøgende trykker afspil, henter et indlejret iframe YouTubes afspillerressourcer og et miniaturebillede. På en anmeldelsesside med fem indlejrede videoer er det for eksempel fem sæt forespørgsler, der affyres på samme tid ved sideindlæsning, og de konkurrerer med din egen sides ressourcer om båndbredde og gengivelsestid.
Løsning 1: native lazy-loading
Den enkleste løsning er en enkelt HTML attribut. At tilføje loading=”lazy” til et <iframe> fortæller browseren, at den skal udskyde indlæsningen, indtil det er ved at komme i syne:
<iframe src="..." loading="lazy" ...></iframe>Dette understøttes af alle moderne browsere, kræver ingen JavaScript, og er den enkelt mest værdifulde ændring for en side med indlejret video under skærmkanten.
Løsning 2: klik-for-at-indlæse
På sider med mange indlejringer er en endnu mere aggressiv løsning slet ikke at indlæse noget iframe, før en besøgende klikker på det. Vis et statisk miniaturebillede, hentet fra YouTubes offentlige thumbnail URL’er (se vores thumbnail viewer), med en afspilningsknap ovenpå, og udskift kun til det rigtige iframe ved klik. Det betyder, at der ikke sker nogen YouTube forespørgsler for videoer, en besøgende aldrig rent faktisk afspiller.
Løsning 3: kun autoplay hvor det er nødvendigt
Autoplay af video tilføjer reelt arbejde, i det øjeblik siden indlæses: afspilleren skal buffere med det samme i stedet for at vente på brugerens hensigt. Reservér autoplay til virkelig vigtige indlejringer, og stol på lazy-loading plus en synlig afspilningsknap til resten.
Måling af effekten
Værktøjer som Google PageSpeed Insights eller din browsers eget Lighthouse panel vil direkte påpege uoptimerede tredjeparts indlejringer og lade dig sammenligne indlæsningstider før og efter, du har anvendt lazy-loading. På sider med flere videoer er forskellen som regel let at se, både i tallene og i den oplevede indlæsningsfornemmelse.
Indbygget som standard
Vores embed kode generator inkluderer loading=”lazy” som standard på hver genereret indlejring, så denne optimering allerede er håndteret, i det øjeblik du kopierer koden.