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.
links to CSS & JS files:
#afzalk #devtools #webdevelopment
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 🙂
nice code sir thanks!
Thank you
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.
Thank you, Your code works perfectly
Thanks! It is a big help! 🙂
Where would I need to upload the two files in the file manager?
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!
Worked for me great
Thanks
Thanks bro this worked for me 😎
would be great to have a series of videos on improving website speed, the one that google have produced is rubbish
Is CSS and JS code recommended by what authority?
defo will check more of your vids, keep up the great work
could you do a video on chrome dev tools especially network tab in more detail pls
Can you explain why load time is same or bit more in second example?