Aki próbálta már sebesség optimalizálni a weboldalát, az észrevehette, hogy akár 1MB-al is megnövelheti az oldal méretét egy beillesztett Youtube videó, aztán ott vannak még az extra HTTP lekérések is a Youtube szerverei felé. Ezek mind csökkentik a PageSpeed pontszámokat (GTMetrix és Google PageSpeed Insights esetében is), a felhasználói élményről nem is beszélve. Az oldal tovább tölt, többet gondolkozik és feleslegesen töltődik le ez az óriási JavaScript fájl is, ami lényegében csak maga a Youtube lejátszó. Mindez megtörténik akkor is, ha rá sem kattintunk a videóra, tehát ez így koránt sem ideális. A probléma kiküszöbölésére elkezdtem megoldást keresni és találtam is egy igen jó módszert, amivel a videó ugyanúgy lejátszható marad, ugyanazzal az előnézeti képpel, azonban csak kattintásra töltődik be a Youtube lejátszója, ezzel jelentősen felgyorsítva az oldal betöltését és csökkentve méretét.

Egy összehasonlítás az eredeti Youtube videó és az új, sebesség optimalizált megoldás között: https://img.labnol.org/files/youtube-video-embed.html

Az észrevehető különbség minimális, a felhasználó számára talán fel sem fog tűnni a csere, az oldal szempontjából azonban erősen ajánlott. Az új verzió mérete mindössze 15KB körül alakul, szemben a korábbi 500KB-1MB körüli mérettel! Nézzük, hogy hogyan is kell átkonvertálnunk a meglévő beillesztett videóinkat erre az új verzióra (ami természetesen reszponzív is, ellentétben az alapértelmezett Youtube iframe-el).

Első körben cseréljük ki a Youtube beillesztő kódját erre:

<div class="youtube-player" data-id="VIDEO_ID"></div>

A VIDEO_ID helyére kerüljön a videó azonosítója, ezt a videó URL-jéből tudjuk kimásolni (a “watch?v=” után szereplő karaktersor). Például itt egy kimásolt azonosító: 5dmQ3QWpy1Q. Ez volt az eredeti videó URL: https://www.youtube.com/watch?v=5dmQ3QWpy1Q

Ahhoz, hogy ebből működő lejátszás legyen szükségünk van még a JavaScript kódra, ami életre kelti, ezt pedig ajánlott a </body> elé helyezni (a footer.php-ben kell ezt keresni az esetek többségében).

<script>

/* Light YouTube Embeds by @labnol */
/* Web: http://labnol.org/?p=27941 */

document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = labnolThumb(v[n].dataset.id);
div.onclick = labnolIframe;
v[n].appendChild(div);
}
});

function labnolThumb(id) {
var thumb = '<img src="//i.ytimg.com/vi/ID/hqdefault.jpg">',
play = '<div class="play"></div>';
return thumb.replace("ID", id) + play;
}

function labnolIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}

</script>

Még egy kis CSS formázás a custom CSS részbe vagy a header.php </head> része elé és kész is vagyunk:

<style>
.youtube-player {
position: relative;
padding-bottom: 56.23%;
/* Használj 75%-ot a 4:3 arányú videókhoz */
height: 0;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 5px;
}

.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}

.youtube-player img {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all;
}

.youtube-player img:hover {
-webkit-filter: brightness(75%);
}

.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("//i.imgur.com/TxzC70f.png") no-repeat;
cursor: pointer;
}

</style>

A fenti kis trükk használatával sikerült egy 17+ másodperces betöltési időt produkáló WordPress oldal betöltési idejét 3 másodperc alá hozni, a méretét pedig a felére csökkenteni. A PageSpeed pontszámok pedig 90 fölé léptek az optimalizálás befejeztével.