[ad_1]
[ad_2]
I'm creating a site and using video and animated logos for the main page and some of the subpages. I built the site on a server, then transferred it over to the client's domain, which slowed down the site. I increased the memory load via FTP and now I'm using ShortPixel to optimize the images with WebP format. After everything is optimized, I plan to run the site through https://pagespeed.web.dev/ to get an idea of the actual problem, but I think the video headers should be rethought or reconsidered since the files are embedded…
Any recommendations or advise?
depends on how big the video is and how you’re serving it (recommend using a cdn)… video can be very effective as a design thing but you always have to balance that with page speed.
Have an image load first and only play the video lazy loaded and only start playing then.
I agree about the video, it adds additional load, embedding video from YouTube/Vimeo can reduce the initial load and use of placeholder image before the video is loaded would be a better practice.
I also recommend using GT Metrix for better understanding of issues.
Yeah video headers are a dumb idea for website speed.
But sometimes you will sacrifice website speed if the tradeoff is worth it. Sometimes a very engaging video will be a net benefit over whoever you may lose to a little bit more loading.
That being said a video header for lots of pages on a website sounds obnoxious in my opinion.
Are they necessary? Is video the only way to present/send message to a visitor?
Animated logos? What’s next, Flying Rosters?
As a rule of thumb, your site has to be under 2 sec. If you can achieve it with videos as header and animated logos, you will be fine.
If you can get the video headers down to 2mb or so, it’s not much worse than a high quality JPG. Keep it brief, consider looping it (or using a simpler video style to keep the file low), and use a tool like handbrake to compress as much as you’re comfortable doing.
In the end, it won’t be perfectly fast, but the user experience matters too and people love video.
If your optimization efforts don’t improve the site’s speed, it’s best not to compromise the overall performance.
Yes, if you can avoid video, do it by all means!
If you can’t, few things to try:
1. Use ‘facade’ as placeholder image. Take first frame of the video and use it as placeholder and keep showing it to the user until DOM/page has finished loading. After that, using JS, seamlessly replace it with video (you can use a number of methods including video tag here or even Youtube videos using same way)
Nice article by Google: https://web.dev/learn/performance/video-performance
2. Optimize and load video from same domain. Often times this can help due to lower overhead (avoiding additional DNS, JS and so on from third-party)
3. Avoid video autoplay if you can.
Use smallest and best video format. Test multiple and see what works best.
Definitely use GTMetrix or WebPageTest waterfall chart to ensure performance and address slowest queries.
Think of it this way: if your shit loads slowly for me, I’m bailing on your page/product because I’m tired of the internet feeling slow in 2024. Doesn’t matter how nice it looks if I never see it.
I’ve got decent bandwidth but everything is so bloated now I may as well have DSL in a storm.
No. Use poster tag for the first frame and then webm and it is a lot less impactful than you would think. It will have a delay before it plays but it will not be blank nor will it reduce performance.
A lot of clients use video in the hero section. Big with fashion brands so it’s pretty much a necessity. None of them have any issues with page load speeds. If you know what you’re doing and know how to optimize a site. Do it.
If its a mobile video use handbrake on 32 ref and placebo settings on encoder.
Videos are best served from a CDN no matter how small or big they are.
Self host the video on something like bunny.net and compress the video.
I have a a site where the video is around 5mb and another where it is 3.8mb. They look good too and speed isn’t an issue.
Handbreak and compress to 720
Try using a plugin such as Smart Slider 3 and use one of their Hero image video templates, not much of a performance impact there.
Better just use webp. Webp have gif mode too.
Not always if you know what you’re doing
We use it for a lot of the client sites a full video in top fold of the page
All websites speed are 100/100 and load in 300 to 600ms
If you know what you’re doing, then you’ll have no speed issues – peeps who don’t know how to do it properly will believe otherwise
Avoid video?! A client of mine wants a video header and I programmed it so that it will load from Vimeo? Is that ok then?
I think that using a video on your homepage is a horrible idea for MANY reasons, yeah.
I fucking HATE videos. But sometimes they look ok.
Yes.
If you must use one, use a placeholder image while the page loads in then switch it to video. That way you’re not waiting around for a video to load.
To have a good quality video you need a decently high bit rate and Google will spit the dummy out about this.
Try puling the video from Vimeo or Youtube, add a fall back image, that should not put any load.