Speed issue with Video Cover Background

1

Hello,

I have this strange issue with video cover background. My site have on homepage a video cover, for testing I used a compressed 30sec video loop, selfhosted, for production, I need to use a 30sec video stream in hd.

But, when I use a video stream, same video but in hd, from Vimeo (…the plan is to use a video stream service supplied by cloudflare), the performance drop down.

Some example on gtmetrix:

  1. Website using grav and spectre css, with 582kb video selfhosted
    Fully Loaded Time 1.1s
    Total Page Size 1.35MB
    PageSpeed Score (91%)
    YSlow Score (88%)

  2. Same website, (with less pictures, but same structure/menu/section) but in plain html/spectre.css, same video selfhosted
    Fully Loaded Time 0.6s
    Total Page Size 524KB (less the size of video?? some issue in gtmetrix…)
    PageSpeed Score (98%)
    YSlow Score (97%)

  3. Website using grav and spectre css, with video stream from Vimeo:
    Fully Loaded Time 22.2s
    Total Page Size 13.3MB
    PageSpeed Score (83%)
    YSlow Score (86%)

  4. Same website, (with less pictures, but same structure/menu/section) but in plain html/spectre.css with video stream from Vimeo:
    Fully Loaded Time 1.3s
    Total Page Size 11.5MB
    PageSpeed Score (89%)
    YSlow Score (96%)

… 22.2 sec respect 1.3???

twig for Vimeo streaming:

<div class="showcase">
	<div class="video-responsive">
  		<iframe src="https://player.vimeo.com/video/XXXXXXXXX?background=1&autoplay=1&loop=1&byline=0&title=0&muted=1"frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
	</div>
	<div class="showcase-overlay">
		<div class="container grid-xl">
			<div class="center-showcase-content">
				<div class="p-2" data-aos="fade-up">
					<h1 class="text-uppercase">{{ page.title}}</h1>
					<p>{{ page.content }}</p>
				</div> 
			</div>
		</div>
	</div>
</div id="down">

twig for selfhosted video:

<video playsinline autoplay muted loop id="video_cover" poster="{{ page.media['cover-poster.jpg'].url }}">
   <source src="{{ page.media['cover.mp4'].url }}" type="video/mp4">
</video>

<div class="showcase-overlay">
	<div class="container grid-xl">
		<div class="center-showcase-content">
			<div class="p-2" data-aos="fade-up">
				<h1 class="text-uppercase">{{ page.title}}</h1>
				<p>{{ page.content }}</p>
			</div> 
		</div>
	</div>
</div>

css and class are almost the same in grav version or in plain html version.
On grav installation I use owl carousel plugin, fb customer chat, cookieconsent plugin, can be here the problem? some conflicts?

Some suggestion?

thanks