Handling LCP Videos

Learn how to handle the Largest Contentful Paint for your hero videos with TwicPics.

The API is not suitable for hero videos with an LCP stake, as the equivalent of the <picture> tag does not yet exist for videos. As for TwicPics Native, it tends to generate too many variants when used to optimize hero videos, which are usually displayed in full width. This is partly due to the fact that the Script respects the defined step.

We introduced the data-twic-intrinsic attribute to solve all these problems.

The data-twic-intrinsic attribute can be used to specify the intrinsic dimensions of the original hero video:

• it prevents TwicPics Native from generating too many variants for better caching and better performance
• it prevents any form of upscaling — even if videos are not resized beyond their dimensions by default
• it allows using TwicPics Native for hero videos while perfectly optimizing the LCP metric in real-time

Syntax: data-twic-intrinsic="<width>x<height>"

<!-- HTML source code -->
<div class="video-container">
  <video
    data-twic-src="media:video/skater.mp4"
    data-twic-intrinsic="1920x1080"
  ></video>
</div>