Miért lassítja az oldalt egy beágyazott YouTube-videó vagy Google Térkép?
Egy beágyazott YouTube-videó vagy Google Térkép az oldal betöltésekor letölti a teljes lejátszót vagy térképmotort, akkor is, ha a látogató hozzá sem nyúl. Ez a munka külső szerverekről érkezik, a böngésző fő szálán fut, és jó eséllyel rontja a betöltési és a reakcióidőt.
A gond abból fakad, hogy az <iframe> egy teljes, önálló weboldalt nyit meg a te oldaladon belül. A látogatók többsége jó eséllyel soha nem indítja el a videót és nem nagyítja a térképet, a terhelést mégis mindenki megkapja.
Mennyi külső kérést és JavaScriptet hoz be egyetlen beágyazás?
Egyetlen YouTube-beágyazás tipikusan több tucat hálózati kérést és több száz kilobájtnyi JavaScriptet hoz be, több külső domainről. A pontos számot mindig a saját oldaladon mérd.
Hivatalosan igazolt. A Lighthouse külön auditot futtat „Lazy load third-party resources with facades” néven, és a YouTube-beágyazást, valamint a Google Maps-beágyazást is a homlokzattal kiváltható erőforrások között sorolja fel. Kész, nyílt forrású megoldásként például a lite-youtube-embed komponenst említi.
Saját tapasztalat. Ha a Chrome DevTools Network paneljén megnézünk egy üres teszt-oldalt egyetlen YouTube-iframe-mel, a kérések a youtube.com, ytimg.com, google.com, gstatic.com és doubleclick.net domainek között oszlanak meg. A letöltött JavaScript tömörítve is jellemzően több száz kilobájt. Ezek a számok verzióról verzióra változnak, ezért ne hivatkozz rájuk saját mérés nélkül.
Hogyan rontja ez az LCP- és az INP-értéket?
A külső beágyazás sávszélességet és fő szál időt vesz el a saját tartalmadtól, ezért az LCP-elem később rajzolódhat ki, a kattintásokra adott válasz pedig késhet.
Hivatalosan igazolt. A Google a Core Web Vitals mutatóit a 75. percentilis alapján értékeli. A jó LCP legfeljebb 2,5 másodperc, a jó INP legfeljebb 200 ezredmásodperc, a jó CLS legfeljebb 0,1. Az INP 2024 márciusa óta Core Web Vitals mutató, és az oldal teljes élettartamának interakcióit nézi.
Ha a beágyazás a hajtás fölött vagy annak közelében van, a böngésző párhuzamosan tölti a lejátszó erőforrásait és a fő képedet vagy betűtípusodat, így a te LCP-elemed kevesebb sávszélességet kap. A loading="lazy" attribútum iframe-en segít, ha a beágyazás messze van a hajtás alatt, a hajtás fölötti iframe-en viszont nem hat, mert azt a böngésző azonnal betölti.
Az INP-nél a hosszú feladatok (long task) okozzák a gondot. A lejátszó szkriptjei 50 ezredmásodpercnél hosszabb blokkokban foglalhatják a fő szálat. Ha a látogató épp ekkor nyit meg egy menüt vagy kattint egy gombra, a böngésző csak a feladat végén tud reagálni. Saját tapasztalat, hogy közepes kategóriás Android telefonon vagy lassított CPU-val mérve a beágyazott lejátszó inicializálása jól látható hosszú feladatokat hagy a Performance panel idővonalán, asztali gépen viszont alig feltűnő.
Mi az a facade megoldás, és mit nyersz vele?
A facade (homlokzat) egy könnyű helyettesítő elem, ami a beágyazás helyén csak egy előnézeti képet és egy lejátszás- vagy térkép-gombot mutat. A valódi iframe csak akkor töltődik be, amikor a látogató rákattint, így az első betöltéskor a külső kérések és szkriptek kimaradnak.
A látogató szinte ugyanazt látja, mint korábban, a lejátszó JavaScriptje viszont csak annál fut le, aki tényleg kéri.
A cserének van hátulütője is. A videó a kattintás után egy pillanattal később indul, mert ekkor töltődik be a lejátszó. Egyes mobilböngészőkben az automatikus lejátszás szabályai miatt előfordulhat, hogy a látogatónak kétszer kell koppintania. Szakmai feltételezés, hogy ez a kis késleltetés a legtöbb tartalomnál kevésbé zavaró, mint egy lassú első betöltés. Ha a videó az oldal fő tartalma, mérd a lejátszási arányt is.
Hogyan állítsd be a facade-ot bővítménnyel WordPressen?
WordPressen több gyorsító és süti-kezelő bővítmény tud YouTube-előnézetet és kattintásra betöltött beágyazást, így kódolás nélkül is bekapcsolhatod.
- Gyorsító bővítmények. A WP Rocket Média beállításai között van egy kapcsoló, ami a YouTube-iframe-et előnézeti képre cseréli, és a Perfmatters, illetve a WP YouTube Lyte is tud hasonlót.
- Süti-kezelő bővítmények. A Borlabs Cookie és a Complianz tartalomblokkolója a hozzájárulás előtt helyőrzőt tesz a YouTube-videó és a Google Térkép helyére. Ez mellékesen facade-ként is működik.
- Oldalépítők. Az Elementor videó-widgetjében van képátfedés (image overlay) és lusta betöltés opció. Ezzel a lejátszó jellemzően csak kattintáskor töltődik be, de a végeredményt a Network panelen ellenőrizd.
Saját tapasztalat. A leggyakoribb hiba, hogy a gyorsító bővítmény a tartalmi blokkban lévő videót lecseréli, a sablonba, widgetbe vagy egyedi HTML-blokkba tett iframe-et viszont nem. Egy funkcióra egy bővítményt kapcsolj be, különben dupla gomb vagy üres doboz lehet az eredmény.
Hogyan készíts YouTube-facade-ot kézzel?
Kézzel egy keretből, egy gombból, egy előnézeti képből és néhány sor JavaScriptből áll a megoldás. A gomb kattintásra lecseréli magát a valódi iframe-re, automatikus lejátszással.
1. A HTML-váz
A gomb legyen valódi <button>, hogy billentyűzettel és képernyőolvasóval is elérhető legyen.
<div class="yt-wrap"><button class="yt-facade" data-id="VIDEO_ID" aria-label="Videó lejátszása, Így készül a termék"><img src="/media/video-elonezet.webp" width="480" height="270" alt="Így készül a termék, videó előnézet" loading="lazy" decoding="async"></button></div>
A borítóképet letöltheted a https://i.ytimg.com/vi/VIDEO_ID/hqdefault.jpg címről, ez minden videónál létezik, a nagyobb maxresdefault változat nem mindig. Mentsd WebP-be, és a saját tárhelyedről töltsd be. Ha a videó a hajtás fölött van, a loading="lazy" helyett tedd rá a fetchpriority="high" attribútumot, mert ilyenkor jó eséllyel ez a kép lesz az LCP-elem.
2. A JavaScript
document.querySelectorAll('.yt-facade').forEach(function (b) { b.addEventListener('click', function () { var f = document.createElement('iframe'); f.src = 'https://www.youtube-nocookie.com/embed/' + b.dataset.id + '?autoplay=1'; f.title = b.getAttribute('aria-label'); f.allow = 'autoplay; encrypted-media; picture-in-picture'; f.allowFullscreen = true; b.replaceWith(f); }, { once: true }); });
A kattintáskezelő szándékosan rövid. Ha a gomb nehéz munkát végezne, a facade épp azt az INP-értéket rontaná, amit javítani akarsz.
3. A CSS
A képarányt a keret tartja, így a csere pillanatában nem keletkezik elrendezés-eltolódás (CLS). Egy működő minta a .yt-wrap { aspect-ratio: 16 / 9; } .yt-wrap > * { width: 100%; height: 100%; border: 0; padding: 0; } szabálypár.
Ha nem akarsz saját kódot karbantartani, a lite-youtube-embed webkomponens ugyanezt csinálja egyetlen <lite-youtube videoid="VIDEO_ID"></lite-youtube> címkével.
Hogyan működik a facade Google Térképnél?
Térképnél a facade egy statikus térképkép vagy egy egyszerű cím-doboz, mellette egy „Térkép betöltése” gomb és egy közvetlen link a Google Térképre.
- Statikus kép és gomb. A Maps Static API-val (API-kulccsal) vagy saját grafikával előállított kép, rajta egy gomb, ami kattintásra beszúrja a beágyazott térkép iframe-jét. A JavaScript ugyanaz, mint a videónál, csak más az
src. - Cím-doboz és útvonal-link. Térkép helyett a teljes cím, a nyitvatartás és egy „Útvonaltervezés” link, ami a
https://www.google.com/maps/dir/?api=1&destination=CIMformátumú URL-lel a látogató saját térképalkalmazását nyitja meg.
Szakmai feltételezés. Egy Google Térképről készült képernyőkép saját képként való felhasználása a Google Maps felhasználási és forrásmegjelölési szabályait érintheti. Statikus képnél ezért a Maps Static API-t vagy saját rajzolt térképet ajánljuk, a forrásmegjelöléssel együtt.
Mi történik a videó indexelésével és a VideoObject strukturált adattal?
A facade miatt az iframe nincs benne a kezdeti HTML-ben, ezért a Google nehezebben ismerheti fel, hogy az oldalon videó van. A VideoObject strukturált adat és a látható, kattintható videó-elem együtt jó eséllyel segít abban, hogy az oldal videós oldalként indexelődjön, de videós találatot ez sem ígér.
Hivatalosan igazolt. A Google Search Central videós dokumentációja szerint a Google a VideoObject jelölésből is tájékozódik a videóról. A kötelező tulajdonságok a name, a thumbnailUrl és az uploadDate, ajánlott mellettük a description, a duration, valamint a contentUrl vagy az embedUrl. A Search Console videóoldalakról szóló jelentése mutatja, hol talált a Google indexelhető videót.
<script type="application/ld+json">{"@context": "https://schema.org", "@type": "VideoObject", "name": "Így készül a termék", "description": "Rövid bemutató a gyártás lépéseiről.", "thumbnailUrl": "https://www.pelda.hu/media/video-elonezet.webp", "uploadDate": "2026-05-12T08:00:00+02:00", "duration": "PT2M30S", "embedUrl": "https://www.youtube.com/embed/VIDEO_ID"}</script>
Saját tapasztalat. Facade bevezetése után a Search Console videós jelentésében egyes oldalaknál megjelenhet olyan ok, hogy a videó nem a fő tartalom, vagy hogy a Google nem tudta meghatározni a videó helyét és méretét. Ahol a facade-ban marad egy <a href="https://www.youtube.com/watch?v=VIDEO_ID"> link és a strukturált adat is ott van, a videó felismerése jellemzően stabilabb.
Szakmai feltételezés. Ha egy oldalon a videó a fő tartalom, és a videós találat fontos neked, mérlegeld, hogy azon az egy oldalon maradjon-e a hagyományos beágyazás. AI-válaszmotoroknak egy rövid szöveges összefoglaló a videó alatt valószínűleg többet ad, mint maga a beágyazás.
Milyen adatvédelmi előnye és korlátja van a facade-nak?
A facade adatvédelmi szempontból is előnyös, mert a látogató böngészője kattintás előtt nem kapcsolódik a YouTube vagy a Google Térkép szervereihez, így addig az IP-cím és a sütik sem mennek át. A kattintás után viszont a teljes beágyazás betöltődik.
Hivatalosan igazolt. A YouTube súgója szerint a fokozott adatvédelmi mód (youtube-nocookie.com) használatakor a YouTube nem tárol a látogatóról a megtekintési élmény személyre szabásához használt információt, amíg az nem játssza le a videót. Ez a mód tehát a lejátszás előtti szakaszt kíméli, a lejátszás utánit nem.
Az i.ytimg.com címről betöltött borítókép is Google-szerverhez fordul, ezért a képet a saját tárhelyedről töltsd be, ahogy a fenti mintában.
Szakmai feltételezés. Hogy a kattintás utáni betöltéshez kell-e előzetes hozzájárulás, és ezt hogyan kell a süti-tájékoztatóban leírni, az jogi kérdés. Az adatkezelési tájékoztatót és a süti-bannert egyeztesd az adatvédelmi tanácsadóddal.
Hogyan mérd az előtte-utána különbséget?
Ugyanazon az oldalon, ugyanazzal a beállítással mérj a csere előtt és után, több futtatással, és a laboradatot kezeld külön a valós felhasználói adattól. A labor azonnal mutat változást, a mezőadat (CrUX) viszont 28 napos gördülő ablakkal dolgozik, ezért ott csak hetekkel később látszik a hatás.
- Kiinduló állapot rögzítése. Válassz egy-két jellemző URL-t. Futtass rajtuk PageSpeed Insightsot mobil nézetben legalább háromszor, és jegyezd fel a medián LCP-t, a Total Blocking Time-ot és a CLS-t. Mentsd el a mezőadatokat is.
- Hálózati leltár. A Chrome DevTools Network paneljén kikapcsolt gyorsítótárral töltsd újra az oldalt, és jegyezd fel a kérések számát, az átvitt méretet és a külső domaineket.
- A fő szál vizsgálata. A Performance panelen négyszeres CPU-lassítással rögzíts egy betöltést, és nézd meg, mennyi hosszú feladat tartozik a lejátszóhoz vagy a térképhez.
- Lighthouse-audit. Nézd meg, megjelenik-e a facade-javaslat, és mely erőforrásokat sorolja fel.
- Csere és gyorsítótár-ürítés. Kapcsold be a facade-ot, ürítsd a gyorsítótárakat, majd inkognitó ablakban ellenőrizd, hogy a kezdeti betöltésnél valóban nincs YouTube- vagy Maps-kérés.
- Ugyanazok a mérések újra. Ugyanannyi futtatással, hasonló napszakban ismételd meg az első négy lépést, és a mediánokat hasonlítsd össze.
- Kattintás utáni ellenőrzés. Kattints a facade-ra, és nézd meg, elindul-e a videó, illetve betöltődik-e a térkép, mobilon is.
- A mezőadat követése. Négy-hat hét múlva nézd meg a PageSpeed Insights mezőadatait és a Search Console Core Web Vitals jelentését. Ha közben más is változott, a javulást ne tulajdonítsd egyedül a facade-nak.
Saját tapasztalat. A laborban a Total Blocking Time és az átvitt bájtok csökkenése szokott a legjobban látszani. Ha a videó a hajtás alatt volt, az LCP alig mozdulhat, a TBT és a mezőben mért INP viszont jó eséllyel javul.
Mit ellenőrizz élesítés előtt?
A facade akkor jó, ha a látogató ugyanúgy eléri a tartalmat, csak a betöltés tolódik a kattintás utánra. Élesítés előtt érdemes végigmenni ezen a listán.
- Minden beágyazás le van cserélve, a sablonban, a láblécben és az egyedi HTML-blokkokban is.
- A gomb billentyűzettel elérhető, van
aria-labelattribútuma, és a fókusz látható. - Az előnézeti kép és a betöltött iframe azonos képarányú, így a csere nem okoz CLS-t.
- Hajtás fölötti videónál a borítókép nem lusta betöltésű, és megkapja a
fetchpriority="high"attribútumot. - A VideoObject jelölés megvan, és a Rich Results Test hiba nélkül felismeri.
- A térkép mellett ott a teljes cím és egy útvonaltervező link.
Források és további olvasnivalók
- Chrome for Developers, Lighthouse, Lazy load third-party resources with facades
- web.dev, Largest Contentful Paint (LCP) és Interaction to Next Paint (INP)
- web.dev, Best practices for using third-party embeds
- Google Search Central, Video SEO best practices és VideoObject strukturált adat
- Google Search Console Súgó, Videóoldalak jelentés és Core Web Vitals jelentés
- Schema.org, VideoObject
- YouTube Súgó, Fokozott adatvédelmi mód beágyazott videóknál
- Google Maps Platform dokumentáció, Maps Embed API és Maps Static API
- MDN Web Docs, az iframe elem és a loading attribútum
- Egy YouTube- vagy térkép-iframe kattintás nélkül is több tucat külső kérést és több száz kilobájt JavaScriptet hozhat be.
- A facade előnézeti képpel és kattintásra beszúrt iframe-mel a lejátszó terhét csak az a látogató kapja meg, aki tényleg nézi.
- Facade mellett a VideoObject strukturált adat és egy megmaradó YouTube-link segíthet, hogy a Google felismerje a videót.
- Kattintás előtt a facade nem kapcsolódik Google-szerverhez, ha a borítókép is a saját tárhelyről jön.
- A hatást laborban azonnal, a mezőadatban hetekkel később lehet látni, ezért ugyanazzal a menettel mérj előtte és utána.
Gyakori kérdések
Rontja a facade a videó keresőoptimalizálását?
Ronthatja a videó felismerését, mert az iframe nincs benne a kezdeti HTML-ben. VideoObject strukturált adattal, látható előnézettel és a Search Console videós jelentésének követésével ez jó eséllyel kezelhető, de videós találatot egyik megoldás sem ígér.
Elég a loading="lazy" attribútum az iframe-en?
Hajtás alatti beágyazásnál sokat segíthet, mert a böngésző csak a görgetés közelében tölti be az iframe-et. Hajtás fölött nem hat, és betöltéskor a teljes lejátszó ugyanúgy lefut, ezért a facade erősebb megoldás.
Kell süti-hozzájárulás a YouTube-videóhoz facade mellett?
Kattintás előtt a facade nem tölt be YouTube-tartalmat, ha a borítókép is a saját tárhelyedről jön. Hogy a kattintás utáni betöltéshez milyen hozzájárulás és tájékoztatás kell, azt adatvédelmi tanácsadóval egyeztesd.
Mi legyen a beágyazott térkép helyett?
Kapcsolati oldalon sokszor elég a teljes cím és egy útvonaltervező link, ami a látogató saját térképalkalmazását nyitja meg. Ha az interaktív térkép fontos, a statikus kép és a kattintásra betöltött iframe jó kompromisszum.
Mikor látszik a javulás a Core Web Vitals adatokban?
A laborméréseken azonnal. A CrUX mezőadat 28 napos gördülő ablakkal számol, ezért a PageSpeed Insights mezőadataiban és a Search Console jelentésében jellemzően csak hetekkel később látszik a változás.
Okozhat a facade INP-romlást?
Igen, ha a kattintáskezelő nehéz munkát végez, vagy a kattintás után azonnal sok szkript fut le a saját oldaladon. A kezelő legyen rövid, és csak az iframe-et szúrja be.
Források és további olvasnivalók
Ezen az oldalon a hivatalosan igazolt információt elsődleges forrásokból építjük fel; a saját tapasztalatot és a szakmai becslést mindig külön jelöljük a szövegben.