Hogyan ágyazz be videót az oldal lassítása nélkül (lazy load és a facade technika)

Betettél egy promóciós videót a kezdőoldaladra, és az oldal hirtelen lassan töltődik be, különösen telefonon. Nem vagy egyedül. Egy klasszikus YouTube- vagy Vimeo-beágyazás már az első betöltéskor tucatnyi fájlt, szkriptet és sütit húz be, még akkor is, ha a látogató soha nem nyomja meg a Lejátszás gombot.

A jó hír az, hogy a problémára van egyszerű, jól dokumentált megoldás. Nem kell elhagynod a videót, és nem kell rontanod a megjelenésén sem. Csak addig kell késleltetned a nehéz betöltést, amíg valaki tényleg meg akarja nézni. Ebben a cikkben pontosan megmutatom, mi az a lazy load és a facade technika, miért működnek, és hogyan alkalmazd őket lépésről lépésre, még akkor is, ha nem vagy fejlesztő.

Miért lopja el a sebességedet egy hagyományos beágyazás

Amikor beilleszted a szokásos YouTube- vagy Vimeo-kódot, a böngésző nem várja meg, hogy megnyomd a Lejátszás gombot. Attól a pillanattól, hogy az oldal megnyílik, elkezdi letölteni a lejátszót, több szkriptet és keretrendszert, plusz a nyomkövető sütiket. Mindez versenyez a szövegeddel és a képeiddel a sávszélességért és a telefon processzoráért.

Az eredmény megjelenik a Core Web Vitals mutatókban, amelyeket a Google sebességjelzőként használ:

• Az LCP (a legnagyobb látható elem) később jelenik meg, mert a böngésző a videószkriptekkel van elfoglalva.
• Az INP és az érintésre való reakciókészség szenved, mert a fő szál blokkolva van.

Egy jó laptopon alig veszed észre. Egy átlagos telefonon gyenge térerővel az oldal lassúnak érződik, pedig a látogatónak az első másodpercben nincs is szüksége a videóra.

Mit jelent a lazy load és a facade technika

Ez két külön ötlet, amelyek szépen kiegészítik egymást.

A lazy load azt jelenti, hogy a videó betöltését addig késlelteted, amíg relevánssá nem válik, általában amíg közel nem kerül a képernyőhöz, ahogy a felhasználó felé görget. Amit nem látni, azt nem töltjük be azonnal.

A facade technika ennél tovább megy. Ahelyett, hogy a nehéz lejátszót töltenéd be, csak egy statikus képet jelenítesz meg, rárajzolt Lejátszás gombbal. Pontosan úgy néz ki, mint egy igazi videó, de valójában csak egy könnyű kép. Csak amikor a látogató megnyomja a Lejátszás gombot, akkor cseréled ki a facade-ot az igazi lejátszóra, és a klip elindul.

A kombináció ideális: az oldal betöltésekor csak egy képet helyezel el, és a platform nehéz kódja csak azoknál lép működésbe, akik tényleg meg akarják nézni.

Lépésről lépésre, a facade technika fejlesztői tudás nélkül

Az alapötletet bármilyen oldalon alkalmazhatod, függetlenül a platformtól:

• Válassz egy borítóképet (thumbnail) a klip számára. Használhatod a YouTube által generált képet vagy egy tisztább, saját képkockát.
• Tömörítsd ezt a képet (modern formátumban, mint a WebP), hogy könnyű maradjon.
• Helyezz rá egy Lejátszás gombot és egy hivatkozást a videóra.
• Kattintáskor cseréld ki a képet az igazi beágyazásra, automatikus indítással beállítva.

Ha WordPress-t használsz, léteznek bővítmények, amelyek pontosan ezt csinálják a YouTube-beágyazásoknál, kód nélkül. Ha az oldal kézzel épült, vannak kész komponensek (például a lite-youtube elem), amelyek helyesen valósítják meg a facade-ot.

Aranyszabály: semmi nehéz nem töltődik be az első Lejátszásra kattintásig.

Részletek, amelyek számítanak az SEO és a UX szempontjából

Néhány apró, de fontos dolog, hogy ne törj el valami mást, miközben a sebességet javítod:

• Állíts be méret-attribútumot (szélesség és magasság, vagy aspect-ratio) a videó területére, hogy a tartalom ne ugorjon a betöltéskor. Az elrendezés ugrálása tönkreteszi a CLS-pontszámodat.
• Ne indítsd automatikusan a videót, különösen hanggal. Idegesítő, és mégis erőforrásokat tölt be.
• Ha a videó fontos tartalom a keresés szempontjából, adj hozzá szöveges leírást és ideális esetben VideoObject jelölést, hogy a keresőmotorok megértsék, miről szól a klip.
• Teszteld telefonon, ne csak laptopon. Ott mutatkozik meg leginkább a sebességkülönbség.

Ha nem vagy biztos benne, hogy jól csináltad, futtasd át az oldalt a PageSpeed Insights eszközön előtte és utána. Fehéren-feketén látni fogod, hogy a facade segített-e.

Hogyan kezeljük ezt az MPO-nál

Az általunk épített oldalakon a videók már az elejétől a facade technikával kerülnek be: az oldal gyorsan töltődik be, és a klip csak akkor indul, amikor a látogató akarja. Ez nem egy opcionális extra, amit a végén ráaggatunk; ez az alapértelmezett munkamódszerünk, mert a mobil sebesség közvetlenül hat a konverziókra.

Távolról dolgozunk, az egész ország területén, és először akár egy ingyenes, előre elkészített demót is csinálhatunk neked, hogy a saját szemeddel láthasd, hogyan néz ki és milyen gyorsan töltődik be az oldal, mielőtt bármit fizetnél.

Ha már van egy oldalad, amely nehezebbé vált, miután videót adtál hozzá, írj nekünk WhatsApp-on. Együtt megnézzük az oldalt, és őszintén megmondjuk, hogy egyszerű facade-javításról van-e szó, vagy valami mélyebbet kell megjavítani.