Youtube lazy loading i WordPress

Hvis du har videoer fra Youtube på din WordPress hjemmeside, ved du formodentlig nok, hvor meget det påvirker din pagespeed.
Hvis ikke – vil jeg klart anbefale dig at teste din side på Google PageSpeed, så du sev kan få syn for sagen.

En Youtube iframe henter mange gigabyte data hvergang du afspiller videoen.
Det WordPress plugin jeg her har kodet, venter med at hente data, til brugeren ren faktisk kliker på selve videoen … vil se filmen.
Det betyder, at når siden loader, skal den kun hente selve biledet fra Youtube, som benyttes som thumbnail for filmen.
Her henter jeg det store billede men i webp format. På den måde kan vi både have et 100% skarpt billede og samtidig kun hente nogle få kilobyte. Typisk 50 -70 kb.

<img src="https://i.ytimg.com/vi_webp/' . $youtubeID . '/maxresdefault.webp" alt="' . get_field('video_titel') . '" loading="lazy">

Gutenberg block med ACF

Jeg gør brug af ACF felter. Derfor kræver det, at du har Advanced Custom Fields installeret for at benytte dette Gutenberg Youtube Block plugin.
Du kan selvfølgelig kode input felter direkte i en Gutenberg block, men ACF er bare så nem at arbejde med. Kan kun anbefale ACF 🙂

Nemt at bruge

Hele ideen med Gutenberg block i WordPress er, at det skal være nemt at oprette indhold.
I Youtube block’en skal du angive URL’en til videoen. Den finder du, når du klikker på knappen “DEL” lige under selve filmen på Youtube.
Derudover er der mulighed for at angive en alt tekst til billedet, som samtidig bruges til title på videoen.