En YouTube-inbäddning hämtar spelarens egna skript och en förhandsgranskningsbild i samma stund den laddas, och på en sida med flera videor blir det snabbt mycket. Här är hur du håller sidan snabb utan att ge upp inbäddad video.
Varför inbäddningar påverkar sidhastigheten
Redan innan en besökare trycker på play begär en inbäddad iframe YouTubes spelarresurser och en miniatyrbild. På en recensionssida med fem inbäddade videor är det till exempel fem uppsättningar förfrågningar som avfyras samtidigt vid sidladdning, vilket konkurrerar med din egen sidas resurser om bandbredd och renderingstid.
Åtgärd 1: inbyggd lazy-loading
Den enklaste åtgärden är ett enda HTML-attribut. Att lägga till loading=”lazy” på en <iframe>-tagg säger åt webbläsaren att skjuta upp laddningen tills den är på väg att rullas in i vyn:
<iframe src="..." loading="lazy" ...></iframe>Det stöds av alla moderna webbläsare, kräver ingen JavaScript, och är den enskilt mest värdefulla ändringen för en sida med inbäddad video under sidvikningen.
Åtgärd 2: klicka för att ladda
För sidor med många inbäddningar är ett ännu mer aggressivt alternativ att inte ladda någon iframe alls förrän en besökare klickar på den. Visa en statisk miniatyrbild, hämtad från YouTubes offentliga miniatyr-URL:er (se vår miniatyrvisare), med en play-knapp ovanpå, och byt bara in den riktiga iframen vid klick. Det innebär att noll förfrågningar till YouTube görs för videor en besökare aldrig faktiskt spelar upp.
Åtgärd 3: autoplay bara där det behövs
Autoplay på video lägger till verkligt arbete redan när sidan laddas: spelaren måste buffra omedelbart i stället för att vänta på användarens avsikt. Spara autoplay för genuint viktiga inbäddningar, och förlita dig på lazy-loading plus en synlig play-knapp för resten.
Att mäta effekten
Verktyg som Google PageSpeed Insights eller webbläsarens egen Lighthouse-panel flaggar direkt oöoptimerade tredjepartsinbäddningar och låter dig jämföra laddningstider före och efter att lazy-loading tillämpats. På sidor med flera videor syns skillnaden vanligtvis tydligt både i siffrorna och i den upplevda laddningskänslan.
Inbyggt som standard
Vår embed-kodgenerator inkluderar loading=”lazy” som standard på varje genererad inbäddning, så denna optimering är redan hanterad i samma stund du kopierar koden.