En YouTube-film på startsidan ser ut som en stillbild med en röd spelknapp. Innan någon har tryckt på knappen har webbläsaren ändå hämtat hela YouTubes spelare, på en testsida drygt en megabyte fördelad på 14 förfrågningar till Google. Filmen kan ligga kvar. Ligger den långt ned på sidan räcker ett attribut på iframen, och ligger den överst byter du spelaren mot en förhandsbild som laddar den riktiga spelaren först vid klick.
Varför en enda YouTube-film gör sidan tung
En vanlig inbäddning är en iframe, alltså ett fönster in till en sida hos YouTube. Den sidan laddar spelarens JavaScript och stilmallar, ett typsnitt, en förhandsbild, några småbilder och anrop till Googles annonsdomäner. Allt hämtas när din sida öppnas, oavsett om besökaren tänker titta. Den största enskilda filen, spelarens base.js, vägde 482 kilobyte.
Tabellen visar samma testsida, med en YouTube-film och i övrigt bara text, i fem varianter. Utan filmen bestod sidan av en enda fil på 8 kilobyte.
| Variant | Förfrågningar innan besökaren gjort något | Överförd data innan besökaren gjort något | Överförd data efter scrollning eller klick |
|---|---|---|---|
| Sidan utan film | 1 | 8 kB | 8 kB |
| Vanlig iframe överst | 15 | 1 159 kB | 1 159 kB |
| Vanlig iframe längst ned | 13 | 1 180 kB | 1 185 kB |
Iframe längst ned med loading="lazy" |
1 | 26 kB | 1 184 kB |
| Fasad överst (lite-youtube-embed) | 5 | 35 kB | 2 200 till 2 850 kB, filmen spelas |
Den långa testsidan med filmen längst ned väger lite mer än den korta, eftersom den har mer text. En vanlig iframe hämtar hela spelaren direkt, var den än står på sidan.
Ligger filmen under vecket räcker attributet loading=”lazy”
Står filmen en bit ned på sidan, under det som syns när den öppnas, kan du be webbläsaren vänta. Lägg till loading="lazy" i iframe-koden du kopierat från YouTube:
<iframe loading="lazy" width="560" height="315"
src="https://www.youtube.com/embed/FILMENS-ID"
title="Vad filmen handlar om" allowfullscreen></iframe>Webbläsaren hämtar då inte iframen förrän besökaren scrollat så långt att den närmar sig synfältet. Hur nära är webbläsarens eget val. Attributet fungerar i Chrome sedan version 77, i Safari sedan version 16.4 och i Firefox sedan version 121, som kom i december 2023. Fördröjningen gäller bara när JavaScript är påslaget i webbläsaren.
I testet ovan sjönk mängden överförd data från 1 180 till 26 kilobyte så länge besökaren inte scrollade ned. Den som scrollar hela vägen får hela spelaren ändå.
Sätt inte attributet på en film som syns direkt. Då gör det ingen nytta, eftersom iframen redan ligger i synfältet och laddas med en gång. Glöm inte heller width och height. De reserverar platsen så att texten inte hoppar när filmen dyker upp, vilket annars ger layoutförskjutningar som mäts i CLS (Cumulative Layout Shift).
Ligger filmen överst: byt spelaren mot en fasad
En fasad är en förhandsbild med en spelknapp som ser ut som spelaren men inte är det. Först när besökaren klickar byts bilden mot YouTubes riktiga iframe. Googles beskrivning av mönstret har tre steg: visa fasaden när sidan laddas, förbered anslutningen till YouTube när muspekaren förs över den och ersätt den med spelaren vid klick.
Det första färdiga alternativet för YouTube i Googles lista är lite-youtube-embed av Paul Irish, med öppen källkod. Så lägger du in det:
- Ladda ned
lite-yt-embed.cssochlite-yt-embed.jsfrån projektets mappsrcoch lägg dem på din egen server. - Länka in stilmallen och skriptet i sidans
<head>. - Byt iframen mot elementet nedan, med filmens id från adressen på YouTube (det som står efter
v=).
<link rel="stylesheet" href="/lite-yt-embed.css">
<script src="/lite-yt-embed.js"></script>
<lite-youtube videoid="FILMENS-ID"
playlabel="Spela: vad filmen handlar om"></lite-youtube>I mätningen gick sidan från 15 förfrågningar och 1 159 kilobyte till 5 förfrågningar och 35 kilobyte. Fasaden hämtar fortfarande förhandsbilden från YouTubes bildserver, men ingenting av spelaren. Komponenten håller formatet 16:9 med CSS, så platsen är reserverad från början. När besökaren klickar på en dator laddas spelaren från youtube-nocookie.com i stället för youtube.com, utom i Safari. I Safari och i mobila webbläsare kommer spelaren från youtube.com.
Låt inte fasadens skript ligga kvar på sidor som inte har någon film. Länka in filerna bara där de behövs, enligt samma princip som i guiden till CSS och JavaScript som bromsar sidan.
Så gör WordPress med en YouTube-film i blockredigeraren
Klistrar du in en YouTube-länk i blockredigeraren hämtar WordPress YouTubes egen iframe-kod, med bredd och höjd. Sedan version 5.7 lägger WordPress automatiskt till loading="lazy" på iframer i innehållet, men bara på dem som har bredd och höjd angivna.
Sedan version 6.3 hoppar WordPress över de tre första bilderna och iframerna i innehållet, eftersom de antas synas direkt. Räkningen gäller sidans eller inläggets eget innehåll, inte widgetar. En film högst upp får alltså inget attribut, och hela spelaren laddas när sidan öppnas.
WordPress har ingen inbyggd fasad. Vill du använda lite-youtube-embed lägger du filerna i ditt barntema och skriver elementet i ett block av typen Anpassad HTML i stället för att använda YouTube-blocket. Samma block fungerar om filmen ligger längre ned men ändå bland de tre första bilderna och iframerna: skriv iframen själv med loading="lazy", så låter WordPress attributet stå kvar. Fler inställningar som påverkar laddtiden finns i vår guide till WordPress-optimering.
Vad förlorar du med en fasad?
Filmen kan inte starta av sig själv. En video som ska spelas automatiskt när sidan öppnas, till exempel som rörlig bakgrund, passar inte för en fasad, och Google skriver att autouppspelning inte alltid fungerar när spelaren laddas i efterhand.
Besökaren får också vänta en kort stund efter klicket, medan spelaren hämtas. I testet laddades 2,2 till 2,9 megabyte när filmen startade. Merparten av ökningen var själva filmen, som en vanlig iframe också hämtar när någon trycker play. Den vanliga iframen startades aldrig i testet. I Safari och i mobila webbläsare hämtar komponenten dessutom YouTubes spelar-API för att filmen ska starta direkt på första klicket. Kostnaden flyttas till den som faktiskt vill se filmen.
Mätverktyget Lighthouse pekade tidigare ut inbäddade YouTube-spelare som något som borde ersättas med en fasad. I version 13 togs den granskningen bort. Den täckte bara ett fåtal fasader, och en del utvecklare var tveksamma till fasader från andra än leverantören själv. Google skriver att man hellre ser att tredjepartsleverantörerna förbättrar sina egna inbäddningar. Att varningen försvunnit ur rapporten gör inte spelaren lättare. YouTube-spelaren är ett tredjepartsskript bland andra. Hur sådana skript påverkar svarstiden även efter laddningen står i artikeln om att tredjepartsskripten tar över svarstiden.
Senast faktagranskad: 18 oktober 2026