How to Optimize Shopify Video Tags for PageSpeed

Introduction

When implementing videos on your Shopify store using the {% video_tag %} liquid template, there are critical accessibility and performance elements that are often overlooked. Without proper optimization, your video implementation may fail to achieve a perfect score on Google’s PageSpeed Insights and could have accessibility issues. This guide will show you exactly how to address two key requirements that will help you achieve optimal performance and validation.

The Method

Add an Alt Tag to the Video Fallback Image

By default, Shopify’s {% video_tag %} does not include an alt attribute for the fallback poster image. This is problematic for both accessibility and SEO purposes.

Implementation:

• When using the video tag, explicitly define an alt text for the poster image
• The alt text should describe what viewers will see in the video
• This ensures screen readers can convey meaningful information to visually impaired users

Include a Track Element for Captions

HTML5 video validation requires a <track> element to be fully compliant. Shopify’s admin interface doesn’t provide a native way to add custom track elements directly to videos, but you can implement this through one of two approaches:

Option A: Add a Custom Field

• Create an additional field in your Shopify admin to accept the .vtt (WebVTT) file URL
• This allows you to specify different caption files for different videos
• Provides flexibility for multiple language support

Option B: Use a Generic Fallback File

• Create a standard .vtt caption file
• Upload it to your theme’s assets directory
• Reference this file as the default track element for all videos
• This is ideal for stores that need a quick, uniform solution

Optimize the Poster Image Size

Don’t forget to configure the image_size parameter to match your video dimensions. This ensures the poster attribute renders at the correct size, preventing layout shifts and improving Cumulative Layout Shift (CLS) scores.

Complete Implementation

For a working code example demonstrating all three optimization steps, refer to this GitHub implementation:

View the complete code solution on GitHub

The gist includes a fully validated liquid template that incorporates alt tags, track elements, and proper image sizing.

Conclusion

By implementing these two key optimizations—adding alt tags to fallback images and including track elements for captions—you’ll ensure your Shopify video implementation meets both accessibility standards and Google’s PageSpeed Insights requirements. These small but crucial adjustments can make the difference between a failing score and a perfect 100% rating, while simultaneously making your store more accessible to all users.