Performance: Video tag basics
MEDIUM IMPACT
This affects page load speed and rendering performance by how video files are loaded and displayed in the browser.
0
0
Video tag basics in HTML - Performance & Optimization
Embedding a video on a webpage
HTML
<video controls preload="metadata" poster="thumbnail.jpg" src="optimized-video.webm" loading="lazy"></video>
Loads only video metadata first, defers full video loading, and uses a smaller optimized format.
📈 Performance GainReduces blocking, improves LCP by loading main content faster
Embedding a video on a webpage
HTML
<video src="large-video.mp4" autoplay controls></video>
Loading a large video file immediately blocks page load and delays main content rendering.
📉 Performance CostBlocks rendering until video metadata loads, increasing LCP by several seconds
Performance Comparison
| Pattern | DOM Operations | Reflows | Paint Cost | Verdict |
|---|---|---|---|---|
| Eager large video load | Minimal | 1 (layout for video size) | High (large video frames) | [X] Bad |
| Lazy load with metadata preload | Minimal | 1 (layout for video size) | Low (small metadata first) | [OK] Good |
Rendering Pipeline
The browser first loads video metadata to reserve space, then loads video frames as needed. Large video files can block rendering if loaded eagerly.
→Resource Loading
→Layout
→Paint
→Composite
⚠️ BottleneckResource Loading stage due to large video file size
Core Web Vital Affected
LCP
This affects page load speed and rendering performance by how video files are loaded and displayed in the browser.
Optimization Tips
1Use preload="metadata" to avoid blocking full video load on page start.
2Choose modern, compressed video formats like WEBM for faster loading.
3Add a poster image to improve visual stability and user experience.
Performance Quiz - 3 Questions
Test your performance knowledge
What attribute helps reduce blocking by loading only video metadata initially?
DevTools: Performance
How to check: Record page load and look for video resource loading times and main content paint times.
What to look for: Long blocking times or delayed Largest Contentful Paint caused by video loading