#<video> Largest Contentful Paint + Loading Issue

3 messages · Page 1 of 1 (latest)

sleek cypress
#

Hello,

So I have two issues with my video I display in my hero section which i cant seem to solve, would appreciate any advice:

  • I get Largest Contentful Paint element 18,790 ms for my video element when i run a lighthouse analysis and not sure how to reduce the size, I've reduced the file size from 30mb to 7mb not sure what else to do to optimise.
  • The video works fine when i initally load the website but when i change to another page via router.push() or <Link href={'/'} /> from my home page and then go back the video does not load and is just an empty div (This only happens on mobile)

Here is my code

  <section style={{...}>
...
<video style={{zIndex: 1, position: 'absolute', borderRadius: 'var(--borderradius)', objectFit: 'cover', opacity: 0.8}} height='100%' width='100%'  src='../vids/Tea.mp4' type="video/mp4" preload="auto" autoPlay={true} loop={true} controls={false} playsInline muted />

</section>```
split sealBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

rich hare
#

You could add delay or compress the video for the Largest Contentful Paint.
Try setting the video page to 'use client'