It's me again - now almost done with the website.

I noticed this website smooth playing the Video on their Home-Hero section

How do they do this?

https://www.blacktomato.com/

It's a combo.

The video has to be optimized carefully. Aside from compression, sizing, and format, even the content itself matters. Usually it's done so to be slow motion or non moving much for the first 3 to 7 secs. This is to allow lower bitrates to smoothly deliver and to not skip frames and deliver smooth seconds to make the video effectively be able to create buffer for the rest. These days some pages won't even bother, but it all depends on your audiences target connection/device.

I've personally found that S3 from amazon does already a good job even on free tier, as long as the bucket is close to the audience.

The 'stream' bit, there's nothing magic to it, you can basically encode the video on a format that supports that feature out of the box within the static file, like mp4 or webm. There are surely more sofisticated ways powered by serverside, but for something like this I feel is an overkill. Normally it does the job fearly well.

Size the video a bit smaller than what you need and resize it to the viewport via CSS, accept that it won't be fullHD for everyone, provide a smaller version to mobile devices, all small tricks in the hat to improve the thing.

Honestly, it loaded pretty fast. Maybe use a screen cap of the first frame of the video as your background image so it transitions better from grey to video.

Also, further optimization to reduce file size. I'm not expecting 4k crystal clear video on a hero video like this as a customer.

There’s resources out there that can help reduce the size of the video. For instance I will compress my 10mb videos down to about 1-2mb. My quality is greatly reduced, but if you slap a #242424 .80 opacity overlay you won’t tell the difference.

Hey there, /u/szuu123! If your post is not already flaired, please add one now.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

CDN

Compress them as much as you can. I think you can compress them more, by using the correct compression settings. Make sure the videos are cached properly and that the catching settings are correct. 10mb per vid is still a lot if each user is pulling 40mb.

Otherwise you are going to get a horrible horrible bill.

you can actually host them on a video hosting service and with a bit of trickery hide the logos.

First, be aware of how browsers treat autoplay videos

https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Autoplay

Next, are you prepared for the network bandwidth to support self-hosting videos with five users? 10 users? 100? What is your projected user load? Video can also put a significant load on your CPU, depending on how you manage it.

In most cases, it's going to be best to offload video to a video hosting service

If ur customer really wants this madness just ensure that the videos are streamed. With your own server adaptive streaming looks impossible.

I hope all 5 videos with sound on 😏

Hosting your own videos gives you more design flexibility, but five autoplay videos on a homepage can start to impact performance, even if they're lazy-loaded and optimized for file size. To improve efficiency, make sure you’re using modern codecs like VP9 or H.265, setting preload=""none"", and offering multiple resolutions through <source> tags so browsers can pick the most appropriate version. Using Intersection Observer to load or play videos only when they’re in view can also make a noticeable difference.

If managing all of that manually becomes too time-consuming, Cloudinary can take care of the backend stuff—automatic transcoding, resizing, and adaptive delivery over a CDN—while still giving you full control over how videos are embedded and displayed. It’s a solid option if you want to keep things custom without compromising on performance.

upload to something like bunny.net and use hls.js to stream the video in. you'll have to have a bit of a play about with the settings to force it to load enough to play without pixellation, but it'll make it barely worse than a hero image

For videos, preferable use videos with a duration like 15-30 seconds and converted to webm.

bunny.net

I recommend having the video on a cdn, I use mux video, then have a cover image for the video if it the video component which loads a optimized image until the video is ready.

You probably want to test out the video component on multiple browsers as last time I worked with them some browsers acted differently.

I believe google sees lcp for video as first frame or cover image.

Vimeo

what's wrong with vimeo or YT (or vimeo better?) curious.

Why not use YouTube?

You need some compression with a good D2F ratio.

Minimize file size will be the biggest thing for load time if self hosting . Hosting on another platform would cover that issue. I’m using wistia and YouTube depending on how I need the layout to work.

you dont have to manually juggle all video versions yourself the usual way is to use something like adaptive bitrate streaming with hls or dash which automatically switches between qualities based on the users internet speed platforms like youtube or vimeo use the same idea if you host yourself tools like ffmpeg can generate multiple quality versions and a video player like videojs can handle the switching,

tip: make sure to check compatibility with different OS.

This is something we did at my previous company. We started out with different mp4 files for each resolution and then started migrating to HLS, but faced performance problems on low end devices. Then we went with cmaf which increased performance on low end devices by a lot and also saved a lot of bandwidth.

> Should I have to upload 360, 480, 720 versions of the videos myself, and switch between those, if so, how? Are there any other ways to achieve so?

Doing it explicitly yourself, no. You should have something that takes in the source video and then sets up a background job to transcode that to the different file formats and sizes.

It's possible to do it on-demand (to save space) but the problem is you now need specific CPUs, a GPU, or specific transcoding hardware. With how cheap HDDs are it's a lot cheaper to just save the movie in multiple sizes.

Just use YouTube, the embed player is quite customisable. I think they have an sdk but not used it in ages.

What you're talking about is "adaptive bitrate streaming". Typically this is done with a protocol like HLS, where a video is broken into chunks and each chunks has multiple versions at different levels of quality. The player code automatically switches as network conditions change.

It's possible to implement this yourself, but I'd recommend using an existing service unless you have a very special use case. I use BunnyCDN and I've been pretty happy with their offering, but lots of companies (Cloudflare, etc.) have products in this space. You upload your videos and then they give you an iframe (or JS library, etc.) that you can embed on your site to show the video.

You could try doing these steps and see if it improves:

Install Autoptimize plugin(free) then

• Optimize JavaScript code - Check
• Optimize CSS code - Check
• Optimize HTML code - Check

Then install WP Rocket(paid) and

• Enable Caching for mobile devices - Check
• Enable LazyLoad for images, iframes, videos - Check
• Prefetch this URL : //fonts.googleapis.com using the Preload tab

What usually makes Wordpress slow is huge amounts of poorly made plugins. Try disabling the ones you don't necessarily need, or turn them off one by one to see which ones have the biggest effect on your loading times.

Without more details it's hard to pinpoint a single cause, you'll have to try different approaches to see what works, or diagnose it more in depth.

Do what /u/TheNominated said and only use plugins that you absolutly need.

If you want to make sure your hoster is not the problem, you might want to install a fresh wordpress in a sub directory if that is possible on siteground. If a fresh wordpress still takes 10 to 20 seconds you might want to look elsewhere.

WooCommerce means shop means complex. If you're running something like this always, really ALWAYS, use caching. Get yourself a full page caching plugin. Im using "WP Super Cache" but i haven't really tried others and there might be better paid options.

If your page content loads in a reasonable amount of time, but you are getting a "still loading" icon for about 20-30 seconds, double check that your page isn't linking to any dead images.

Chrome -> hit F12 to bring up DevTools -> Network tab -> make sure nothing is colored red. A dead asset will cause pages to take awhile to finish loading.

thank you for your input guys, will definitely do all your suggestions.

You could try using Bunny.net for video hosting (aff ink). It's paid, but very cheap (I'm paying $1/mo for one site). The benefit is faster performance and more control over the player UI (no promotions, unlike YT).

can u try using youtube embed? i believe youtube has done a lot of optimzation

Run a scan at gtmetrix.com and see what it says. Sometimes it's not as simple as 'installing a plugin.'

Usually when I see super slow Divi sites it's because:

• They did ridiculous things with the visual builder that make the page more complex than needed
• Terrible hosting that has long server response times

I use WPRocket. Also get a plug-in to serve images as webp. I use imagify.

1. Are you on decent hosting?
2. Are you using a compression tool like Shortpixel to compress and then serving WebP and scaled images? (ie not showing 1920px wide images on mobile)
3. Do you have caching?
4. Are you using a CDN?

Couple of plugins I would recommend are:

• WP Rocket
• Flying Pages (for pre-loading pages)
• Flying Scripts (For deferring scripts to after initial page-load)
• Asset Cleanup (Maybe)