Fix YouTube embed slow page load - Web speed optimization

Slow websites can lead to a poor user experience. Users often abandon a website if it is taking too long to load.

YouTube video embed code could be one of the reasons for slow website loads.

This tutorial will use a small CSS and JavaScript file that drastically improves the website speed.

We will also analyse the web speed using Chrome Dev Tool - The Network Tab - before and after the fix.

#afzalk #devtools #webdevelopment

[HowToSandAFloor]

I already have something similar to this on my site. Two problems I have with it is 1) this is not showing as an indexed video page on search console and 2) the play button that shows on mine is transparent white and looks terrible, it doesn't jump out as a youtube video in the same way that the youtube play button does, so I might pinch yours for that reason. I have been searching and searching but I cant seem to find a way to load a youtube embed efficiently without sacrificing it registering as a video page.

Also, I just noticed when you loaded the first page that the waterfall showed the thumbnail image as WEBP. Maybe changing the JS to webp will help further reduce the load time :)

[alexandergeorgesquire]

Thankyou bro good content but man your audio is so wet. I cant listen with my headphones

[gage]

it is wide long video frame, do u have youtube short video frame 9:1 css ?

[ibrahimmalik]

would be great to have a series of videos on improving website speed, the one that google have produced is rubbish

[brettspradbury]

Thanks for the video & Github Afzal. One issue is that one mobile (specifically iOS) you have to click the play button twice: once to get the YT iFrame to load then again to play the video. On desktop this is fine. Got any ideas of how to solve this please? Thanks!

[samardern]

Do you have a method on how to apply this to a Wordpress site?

[Stuart-vr]

Worked great... thank you. My only question is... can you adjust the size of the thumbnail? I couldn't figure out how or if that was even possible.

[charliedanson]

Can you explain why load time is same or bit more in second example?

[steeger_marketing]

Where would I need to upload the two files in the file manager?

[DennisHoward-bizt]

Is CSS and JS code recommended by what authority?

[torrynsimpson]

defo will check more of your vids, keep up the great work

[JamesCoombs-lnxl]

could you do a video on chrome dev tools especially network tab in more detail pls