Twenty-seventeen is an unusual default WordPress theme. It allows background video in the header section. Here we share ideas to optimize web graphics for branding the WordPress Twenty-seventeen-theme home page.

Video headers are specially created for branding your Twenty-seventeen theme home page. It takes knowledge, skill, and patience to find – or build – non-bloated visual elements. The hunt for orchestrated, featured images is a huge time sink.

1What’s an “atmospheric” video header? They’re decorative elements – like header images, but with motion. They play automatically, loop by default, and don’t have sound. They work best when paired with a static image for mobile fallback. Motion video is a short, looping background video without controls – except for a pause button which you can easily make more transparent.

Regarding the Twenty-seventeen theme video header, it’s either locally hosted mp4 and mov files or external, hot-linked YouTube videos. But we recommend self-hosting your motion header in the media library and not using video hosted on YouTube. The experience is much better this way. Try it. You’ll see.

---

2Doesn’t video ruin page speed? Twenty-seventeen theme lazy loads the header video only on desktop computers – and no load at all on mobile devices. Then just the static fall-back image is displayed. Lazy loading means the theme defers video loading until last for user perception of speed. Bandwidth is still consumed. This occurs only on the front page for viewports at least 900 pixels wide and 500 pixels tall. As a safeguard, the maximum video file size is also capped at 8MB. The theme customizer validates that local videos have a supported format, proper file size, or that external video links are to YouTube. The WordPress development team strongly encourages using smaller files. Why? Visitors won’t spend time on big, long videos. It’s a waste of resources. Hefty videos gobble bandwidth. Video hurts performance. And, duh, it causes a Web Apocalypse destroying Internet usability.

Even with an 8M theme cap for video file size, its inclusion on the site’s front page with standard, shared hosting can easily result in your site slowing down. This is due to bandwidth overages or excessive data transfers. Video files put undue strain on both the host and the visitor.

It’s not easy preparing a video that looks good, is lightweight, and loops well. It requires special knowledge to deal with the complexities of meeting a file-size limit so small.

---

3
How long playing are video headers? Typically, they are 16-second video motion headers. That is a good target length.

---

4Why GIF instead of PNG format for featured images? WordPress imposes automated resizing to PNGs when they are used as feature images. They bloat up to 3-times heavier in weight. That makes them load slower. For unknown reasons, GIFs don’t get the same treatment. WordPress doesn’t touch them. They stay light.

---

5Do video headers help my SEO? Lighter page weight doesn’t improve search engine ranking or visibility. Testing shows that speed affects ranking less than 1 percent. But fast pages do reduce bounce rate, improve engagement, and rescue your user experience. That is equally as valuable as improved SEO. Plus the added sense of being a good, responsible web citizen.

So, do video headers hurt my SEO? WordPress video headers do not affect page rank or time to get listed on Google. There is no downside for SEO. And that’s without any SEO plugin help. Good SEO practices are inherent in WordPress.

Headers affect User Experience (UX). That is how people feel when they are using your website. Motion headers fall in the realm of mood. Stock 16-second video tends to be around 3 to 5M in file size – and cost about $19. These double or triple the average 2.3M page weight currently on the web. Slow speed causes user frustration. This degeneration ultimately leads to the Web Apocalypse.

Heavy video slows down the Internet. This causes poor user experience – even with lazy loading. Poor UX is the real downside – not SEO.

TIP: We’ve used a rocket GIF animation as a PagePipe header image. It weighs about 300k. Much less than video and it plays on mobile this way, too. Load your animated GIF as one of the Customizer static header images. You can also rotate header images randomly in the Customizer with each page change. Nice trick.