How to optimize for embed videos?
I have multiple videos I have showcased on my website but they look awful. I'm using the imagekit CDN to upload the videos. Is there a way I could optimize my videos further without decreasing the quality to be potato? I've read that videos should be under 1mb but some sites like Teeange Engineering have videos that look crispy. I've checked what they use and it seems to be Vimeo. How different is it to upload the videos directly to the website and have Cloudflare CDN take care of the rest vs Vimeo/ YouTube?
Website in question (Ran a lighthouse and the video is supposedly 10mb)
https://teenage.engineering/products/ep-133
teenage engineering
EP–133 K.O. II
meet the next evolution of the world's most sold sampler. based on the legendary PO-33 K.O!,the new EP–133 K.O.II adds more power, more sampling capabilities, a fully reworked sequencer and brand new punch-in 2.0™ effects. introducing a workflow that lets you go from idea to track faster than ever. it's pocket operators gone pro.
6 Replies
First of all, lazyloading - also applicable to images and what have you.
Perhaps ypumay consider self hosting, which, unlike YT etc. will likely not load a ton of its own assets.
Looking at your link, images 2048x2048 with 1.3MB are not a good practice and need to be optimized.
thank you. I’m not very concerned at images since they are all in webp format taking no more than 80kb. But videos become a problem since the quality is deteriorated due to the massive amounts of compression (50mb to under 1mb) and the videos on my site takes considerable amount of space in the viewport
No, they are not. Look at console what is being transferred. I see 1.3MB.
Thing is, you have little control over embedded videos, therefore I recommemd self-hosted as <video>, which you can cut (so that you do not begin with 50MB in the first place), crop, resize, transcode and optimize yourself.
Oh no the site I posted isn’t mine
I just posted it as an example and whether or not it was standard practice
So videos shouldn’t be more than 1mb?
Depends. Images of ~150kb for hero section imgs, otherwise under 100kb. A +5MB (hero) video may be ok as long as the value it brings and possible loading difficulties are in balance - you donot want to sacrifice UX for vague "vibes" only. Embedded videos in content ned to be lazyloaded and not start on page load.
At the same point, observe layout shift and make sure it dos not block rendering something important. In brief, he Lighthouse and Page speed insights pass.
thank you