react-player icon indicating copy to clipboard operation
react-player copied to clipboard

Any way to optimize initial load

Open ggepenyan opened this issue 2 years ago • 1 comments

Current Behavior

I have a list of videos (like a reels). I use video without poster because of iOS issue, on iOS douple tap was needed. Videos are deployed to AWS and being fetched from the backend. Initial load of the page is little bit slow.

Expected Behavior

I want videos to not block LCP.

Steps to Reproduce

  1. You can enter https://fan-dev.starnewsmobile.com/feed

Environment

  • URL attempting to play: https://fan-dev.starnewsmobile.com/feed
  • Browser: Chrome
  • Operating system: Windows

Other Information

Is there any way to lazy load videos, or what will be a suggestion to workaround in order to optimize LCP (only videos are loading slower)?

ggepenyan avatar Oct 19 '23 06:10 ggepenyan

One of the possible solutions was to not provide URL of the video and add that whenever the videos is in the screen using intersection observer. But I don't like this solution that much.

ggepenyan avatar Oct 19 '23 06:10 ggepenyan