Cloudflare Stream Page Load Speed problem
I have several videos (approx. 10MB) on my website of which one above the fold. I am now using clouflare stream with a placeholder image (using below code), because it was supposed to be fast. But it is causing problems with page speed. See screenshot. it is loading heavy SDK for each of the 3 videos i have. I am using Litespeed and have added sdk-ifram-integration to the "Defer this JS" list in Litespeed Tuning. Doesn't help. I have turned on JS minify and Load JS deferred in litespeed. Using cloudflare (Free) and hostinger website. Page: https://stilltinnitus.com/tinnitus-treatment-therapy-at-home/
Code (from Cloudflare stream)
<div style="position: relative; padding-top: 56.25%;">
<iframe
src="https://customer-tgyoarwq4bvy2efa.cloudflarestream.com/4f4411bafd6ce4f65da9b79c8eba01b0/iframe?poster=https://stilltinnitus.com/wp-content/uploads/2025/11/Photo_Roel_Video_Small_uncompressed.jpg%3Ftime%3D%26height%3D600"
loading="lazy"
style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
></iframe>
</div>
Code (from Cloudflare stream)
<div style="position: relative; padding-top: 56.25%;">
<iframe
src="https://customer-tgyoarwq4bvy2efa.cloudflarestream.com/4f4411bafd6ce4f65da9b79c8eba01b0/iframe?poster=https://stilltinnitus.com/wp-content/uploads/2025/11/Photo_Roel_Video_Small_uncompressed.jpg%3Ftime%3D%26height%3D600"
loading="lazy"
style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
></iframe>
</div>
Still TinnitusRoel van Gorkum
Wil je geen last meer hebben van tinnitus? Start de gratis Sus Tinnitus Masterclass en kalmeer je oorsuizen vanuit huis.
