Prestandatester hur optimerar man embedded Youtube

Blog Post by Stefan Holmberg

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

 

page speed
Startsidan Systementor i Desktop mode

 

page speed
Och här i Mobilläge - den hämtar data långsammare så det gäller att optimera bilder etc
pagespeed 3
Förslag på förbättringar

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

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

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

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

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

Rekommenderade kurser inom detta ämne

.

Webutvecklare.NET
© Copyright Systementor AB. All Rights Reserved
Version: 1.0.20221129.1-b09c551