Speed up a website which has a youtube video background hero section


Is there a way to speed up the YouTube video background section, maybe appending the iframe after the page load complete


11 replies

Userlevel 7
Badge +4

What do you mean by speed up?  Do you want your website to load faster?  Do you have a link we can check out?

Userlevel 3

A guy named “Red Stapler” has done a good one for such a purpose - have a look here. Perhaps this is, what you want. The integration should not be too difficult.

Userlevel 6
Badge +3

HI @Lasith 

Have you tried manage that section by setting it as an async or using the skip lazy function?

Doing this I think it contradicts the choice of applying a video background that should actually appear immediately active and not create an annoying jerky effect.

Using a video background is a solution that is often difficult to manage and that generates a drop in performance of the page so, when and if you choose to adopt it, you must be ready to suffer the consequences.

 

Hello, i have same issue with site speed
If i use video background for section, page load very slow.

gtmetrix report says:
"Avoid enormous network payloads" and shows links from videohosting(youtube/vimeo)

it is not normal


site does not use another plugins or some garbage

thanks

 

 

 

 
 

 

 

Userlevel 3
Badge +1

I think @Mario Barretta is correct in his assessment. It’s okay to run a video background, but there will be a performance trade-off for it to run as intended. The effect may be worth the loss in speed, or perhaps the effect may be unnecessary.

Userlevel 3
Badge

I’ve had better performance results from using Vimeo over YouTube for background video

Userlevel 6
Badge +3

Watch out on size.
A client requested a video - and instead - we created a 5 second video. that loops with Canva.
 

Total MP4 Size =. 450KB.

No drop in speed or quality.

I always weight up the benefit of the video.

Can we get a High Page Score after a Makeover with Elementor Pro? - YouTube

Userlevel 3
Badge +2

Hi, @Lasitha Fernando Personally I avoid using a video background on the hero section (above the fold) if possible. Why? If you’re using YouTube, it calls external script which is YouTube. Unless as @Imran Siddiq did that he managed to create a very small size video loop and hosted on your server (upload to media library). I think max not more than 900kb or 1MB video file size but I think it is very challenging.

The question is by using video background, will it improve the conversion rate? If yes, do it ^^ But if not, you can replace with static background image as alternative and put the video below the fold area. This is my suggestion ^^

Userlevel 6
Badge +3

Indeed - a Canva Video of less than 500KB is fine - above the fold - but many sites that stick sliders/heavier videos above the fold will suffer delays.

 

As @Clement Yo said - I would agree with Video below the fold/image if it’s really needed :)

Userlevel 1
Badge +2

Like what Clement said, use it under the fold.
But I would suggest remove video background / slider.

https://yoast.com/video-backgrounds-suck/
https://yoast.com/opinion-on-sliders/

Userlevel 7
Badge +4

@Lasitha Fernando did you find your answer here? If so, please consider clicking “Best answer” to help out others. If you found it elsewhere, please share it here so we can mark your answer as the best one, thanks :)

Reply