I have a fairly simple React app that has a looping video right at the top of the first 'page' when you open the app. I checked the entire app against many online testers and the video loads extremely slow.

So slow, it holds back the app from being able to have any SEO success. The video is 8.1 MB big with great quality so I don't necessarily want to lose some of that quality. How can I improve load times for a video like this within a React application?

Video.jsx

import React from 'react';
import './styles.scss';
import { Row, Col } from 'react-bootstrap';
import video from '../../media/video.mp4';

export default class Hero extends React.Component {
  render() {
    return (
      <div className="hero">
        <video
          className="desktop-video"
          resizemode={"cover"}
          style={{
            aspectRatio: 1,
            width: "100%",
          }} autoPlay muted loop>
          <source src={video} type='video/mp4' />
        </video>
      </div>
    );
  }
}

I have a fairly simple React app that has a looping video right at the top of the first 'page' when you open the app. I checked the entire app against many online testers and the video loads extremely slow.

So slow, it holds back the app from being able to have any SEO success. The video is 8.1 MB big with great quality so I don't necessarily want to lose some of that quality. How can I improve load times for a video like this within a React application?

Video.jsx

import React from 'react';
import './styles.scss';
import { Row, Col } from 'react-bootstrap';
import video from '../../media/video.mp4';

export default class Hero extends React.Component {
  render() {
    return (
      <div className="hero">
        <video
          className="desktop-video"
          resizemode={"cover"}
          style={{
            aspectRatio: 1,
            width: "100%",
          }} autoPlay muted loop>
          <source src={video} type='video/mp4' />
        </video>
      </div>
    );
  }
}

• javascript
• reactjs
• video
• jsx

• I don't think your issue is a react issue as it is a SEO issue. – Njuguna Mureithi Commented Jun 8, 2020 at 8:37
• @NjugunaMureithi regardless of SEO, it still causes my web app to load very slowly – T.Doe Commented Jun 8, 2020 at 8:44
• 1 jered's made sense. Any time you include an asset on your project, you must be willing to pay the price of getting it to the user. My remendations would have been similar. 1. Consider removing autoplay 2. Consider lazyloading your video. – Njuguna Mureithi Commented Jun 8, 2020 at 9:16

2 Answers 2

If you're force loading an autoplaying, 8.1 MB video file on page load, you pretty much deserve to have your SEO obliterated because that's awful for the user. 8.1 MB is larger than the total page load of most entire websites. What if someone is on mobile and has a data cap? What if someone has a slow connection? You seriously should reduce the size of your video file as much as possible via encoding optimizations and resizing to a smaller resolution.

Once you've done that and cut it down to say, 2-3 MB, you could use a trick like setting the video src only once the page load is plete to effectively "defer" the load. Don't forget the playsinline attribute for iOS and to include a poster image as a placeholder.

some advice: if you just want load page quickly,how about lazy load the video? like this reference. or if you want video load more quick,it need fast internet or we can optimize video loading process(eg change video media source). thanks.