Prestandatester hur optimerar man embedded Youtube

En av mina käpphästar är website performance, det finns så fantastiskt mycket man kan göra utöver att kasta hårdvara på problemet.

Det gäller för det första att fundera över vad vi är ute efter. Självklart kan vi, och bör när vi letar flaskhalsar, göra en profilering på vår serverside kod.

Men denna artikel ska handla om client-side och användarupplevelse. Detta spelar nämligen stor roll för både användarens upplevelse, men även Google premierar detta som en faktor för SEO.

1. Gör en analys med PageSpeed Insights. Det är Google som ligger bakom detta verktyg och förutom att ge dig insyn i hur snabb/långsam din sajt är relativt andra så ger det dig direkta tips om hur du kan förbättra prestandan

2. Dagens tips gäller specifikt youtube-videos. Ifall du inbäddar en Youtube-video på din sajt såsom dom föreslår med

	<iframe src="https://www.youtube.com/embed/VtVaK5BE52k" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen">
    </iframe> 

så kommer den bli extremt dålig i PageSpeed Insights. Time to interactice, Speeed Index, First Contentful Paint: alla dessa värden kommer sannolikt vara minst 3 sekunder.

Som exempel har jag min sida med Kubernetes och Docker för utvecklare där jag har en inbäddad Youtube-video och sidan hade katastrofala värden i PageSpeed.

Det jag gjorde var

3. Embed med cover bild

	<div id="ytplaceholder">
		<img class="ytcover" src="https://i.ytimg.com/vi_webp/VtVaK5BE52k/maxresdefault.webp" /> 
		<iframe id="ytiframe" data-src="https://www.youtube.com/embed/VtVaK5BE52k">
        </iframe>
	</div>

Som du ser är en av hemligheterna att vi kan dra in en statisk bild från Youtube, med samma YT-id som din video

4. Sätt CSS

#ytplaceholder {
    position: relative;
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
}
<p>#ytplaceholder img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
object-fit: cover
}</p>
<p>#ytplaceholder iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
opacity: 0;
transition: opacity 2.4s ease 0s;
}</p>
<p>

5. Inbädda ett script som byter bilden mot videon vid mouseover

    <script>
        var ytplaceholder = document.getElementById ("ytplaceholder"); 
<pre><code>    var videolistner = function(e) {
        var ytiframe = document.getElementById("ytiframe");
        ytiframe.src = ytiframe.getAttribute("data-src");
        ytiframe.onload = ytiframe.style.opacity = 1;
        ytplaceholder.removeEventListener("mouseover", videolistner);
    };

    ytplaceholder.addEventListener("mouseover", videolistner);
</script>
</code></pre>
<p>

Det finns faktiskt väldigt mycket man göra med sin webbsajt clientside för prestandan (användarupplevelsen) och ofta med ganska enkla medel - man behöver inte kasta stora pengar och/eller avancerade serverside algoritmer på problemet. Prestandatester som PageSPeed kommer hjälpa dig hur man optimerar många aspekter av din webbsajt, inte bara embedded Youtube som i detta exempel. Men det får bli i en annan artikel