Video can be a powerhouse for conversions—if you use it right. Done poorly, it can tank your page speed and frustrate users. When you optimize video by preparing it to load quickly, display properly, and perform effectively, it’ll improve your user experience and boost search engine optimization (SEO). I sat down with SEO expert Garrett Perez to discuss technical and strategic best practices for optimizing video on product and service pages.
Why is video important for improving your website’s performance?
- Short-form video content builds trust and relatability, especially social proof content that increases buyer confidence and ultimately drives sales conversions on product detail pages and service landing pages.
- Video is faster to consume than static content for the website visitor.
- Social proof videos provide a richer understanding of offerings and improve conversion. Client testimonials and case studies are effective forms of social proof videos.
- Seamless video integration enhances product pages and aids purchasing decisions.
- Successful ecommerce sites commonly use video to humanize B2B brands, enhance buyer confidence, support values alignment, and differentiate services.
- A properly optimized video can enhance page loading speed by reducing the impact on Largest Contentful Paint (LCP), ensuring faster interactivity, and maintaining visual stability—key metrics that contribute to a higher Core Web Vitals score and better overall user experience.
But there’s a catch: If video is poorly implemented, it can slow your site and hurt your rankings.
Short Form Video as Social Proof
Okay, so I think that’s a really important place to start. Because right now everyone’s just doing short form video. And that’s one of the easiest ways to build up trust and relatability in a product. So having those social proof videos on a page, I’m seeing most e-comm pages that are really successful have that social proof in the form of video formatting. And if you’re able to deliver that in a seamless way where it doesn’t interrupt the experience, right, then you’re just adding so much to the buyer’s perspective, making it easier for them to finally make that purchase.
How can video improve your website’s SEO?
In the world of ecommerce, video is one of the best ways to highlight your brand and offerings. It builds credibility, authority, and trust. With the rise of AI-generated video content, you need to differentiate yourself in the service world.
If you have the know-how, video can benefit SEO with:
- Increased time on page and reduced bounce rate
- Stronger trust and engagement, especially from testimonial content, leading to higher conversions
- Enhanced buyer confidence and reduced friction in the purchase process
Video is just so important. I see it more and more with every single brand that we’re working with at the small to midsize all the way up to the enterprise level, because social trust is just such a big deal when you are making that purchasing decision. … More so, you’re going to need to be able to differentiate yourself in the service world, especially with AI.
How can I add SEO enhancements for embedded videos?
Tell the Browser What’s on the Page
Schema markup (structured data) sits on top of your regular HTML—typically as a JSON-LD block in the <head>—and gives search engines precise details about each embedded video. With the VideoObject vocabulary from schema.org you can define properties such as name, description, thumbnailUrl, uploadDate, duration, and either contentUrl or embedUrl. Supplying these required properties helps Google discover and index the video, unlocks rich-result features like video carousels or “Key moments,” and can boost click-through rates.
This is slightly different than HTML5. HTML5, by contrast, handles the mechanics of playback (the <video> element, poster, controls, etc.); it does not include schema by default. Think of HTML5 as the delivery system and structured data as the descriptive label that search engines read. Always include a clear, relevant description—omitting it (or any other required property) makes the video ineligible for rich-results. While structured data alone won’t guarantee higher rankings, it improves visibility and discoverability, which often translates into more traffic.
Use Transcripts With Your Video
- Boost accessibility and SEO by providing transcripts below videos.
- Include transcripts (preferably as accordions) for both SEO and accessibility. Google can’t “watch” video well yet, so transcripts bridge that gap.
- Use the accordion format to better display the text from the transcripts in a more organized way. This format may improve UX, help Google rank it with similar pages, and maintain crawlability.
- Consider using captions, as they are helpful, and can create better accessibility and increased watch time for videos, and algorithm understanding.
Use Transcripts to Tell the Browser What’s on the Page
You have to understand that even though AI and search is becoming more multi-modal, a majority of what you are finding and indexing in search is going to be text that is then translated into vector embedding which is a mathematical way of a computer representing what a concept, a word, an idea is. What does that all mean, let’s simple that down. If you have a block of text on a website, Google can see that and say ‘I know what that thing is. I see you are talking about a dog. If you have a video on a website that is talking about a dog, Google is not going to be able to play the video at least not yet. It’s not going to be able to play the video, listen to the video, extract the audio, translate that into text, and then say ‘this is a video about a dog’. But if you have the transcript available, and you place that underneath the video, then you say, here’s the video, here’s the transcript, then you are providing multiple sources of information not only for the user (some of them may want to read rather than watching the video, but also for Google to then associate the text with the video and say ‘oh this is a video about a dog’.”
Then Test…
Tools like Google Rich Results Test and Schema.org Markup Validator assist in implementation.
What are smart video hosting choices for performance and SEO?
The Embed Debate: YouTube vs. Vimeo vs. Self-Hosting
Platform | Pros | Cons |
| Free, SEO-friendly, easy to embed | Risk of unrelated suggested content or ads |
| Clean player, fewer ads, more brand control | Smaller audience, extra cost |
| Premium brand control and analytics; ideal for B2B use | Smaller audience, extra cost |
| Total control | Heavy load on servers, complex setup, and maintenance |
Pro tip: Use YouTube for reach; Vimeo or Wistia for brand control. Avoid self-hosting unless absolutely necessary.
What You Should Consider If You’re Self-Hosting Videos (If You Really Must…)
- Do you have robust servers and Content Delivery Network (CDN) support?
- Does your outbound pipe (think capacity of whatever server or delivery layer that is sending you video to viewers) have sufficient bandwidth (5-25 mbps per viewer)?
- Do you have streaming software and encoding tools?
- Is your site secured (SSL, firewall)?
If the answer is mostly “no,” stick with third-party platforms.
Best Practices to Optimize the Video for Mobile Users
- Make the video lower resolution (720p or optimized 1080p).
- To achieve smaller file sizes or higher quality at the same bitrate, use efficient codecs like H.264 (wider compatibility with older devices; lower processing requirements) or HEVC (better compression efficiency than H.264 and creates smaller files for the same quality).
- Implement ABR (adaptive bitrate streaming that adjusts a video stream based on a user’s internet speed and device capabilities).
How do I embed video without slowing down my website?
Let’s Talk Lazy Loading
When you are building your website, it’s essential that you think of the overall user experience and how adding video may slow download times. If you have experienced this, consider the following:
Lazy loading defers the loading of videos until users reach that part of the page. It’s a simple fix—often just a checkbox in CMS platforms or a bit of HTML/CSS—that drastically improves speed and usability.
Benefits of implementing lazy loading:
- Delays loading until needed, improving Core Web Vitals.
- Can help to make websites faster and is simple to implement using HTML coding, adjusting CMS settings or using a tool like WP Rocket (for WordPress sites).
Sound(ing) Off on Autoplay
We live in a world of headphones, earphones, and speakers. Have you ever gotten to a webpage and suddenly a video starts playing automatically and it’s loud and you have no time to either turn it down or mute it?
Modern browsers often block autoplay for this reason. Use click-to-play or muted autoplay to improve UX.
Suggestion: Consider autoplay only when the video naturally fits the user journey, e.g., when scrolling down the pages to the testimonials section. Think of it as a “Hey! You’re looking at this on the page, and I thought you may want to know more about this other thing we offer.”
Ask yourself: What purpose is the video trying to serve? That will help with its placement and the functionality.
Strategic Placement Tips:
- Embed videos aligned with buyer journey stages (e.g., product intro at top, testimonials below).
- A/B test static vs. video banners—sometimes static banners convert better.
What are some tips for faster website video delivery?
Avoid Using Raw Video Footage
It is not recommended that you use raw video footage. The raw video file is a big file that you can manipulate for color grading and lighting. Most regular users won’t notice the subtle editing. Compression saves time and bandwidth.
Use Compression Tools to Create More Impressive Videos
When a video is not optimized for web, it slows the page load, creating additional lag, and harms performance. Tools like HandBrake or Adobe Media Encoder help compress files effectively.
Choose the Best Format for Video Optimization
For compatibility across mobile and different devices, MP4 files are the way to go. Be wary of in-browser tools, as they may reduce video quality. Lossless compression is the best to preserve the quality (no information is lost during compression). The ideal bitrate is 5 Mbps and size is under 20-30 MB for files.
Understand Adaptive Streaming Versus Fixed Resolution
You can set up the video to adjust in real-time to align with the user and their internet speed—that’s adaptive. Or the video will have a single, pre-defined quality level without consideration for the speed of the network—that’s fixed.
YouTube is an example of adaptive streaming. It works great on mobile as the platform adapts videos to various screen sizes and resolutions. It allows for faster load time, which means more views and people staying more engaged with the platform.
It’s all about using various <source> elements within the HTML5 <video> tag. They provide built-in support for embedding audio and video. Use source tags in your HTML to allow you denote the different versions for each device.
How does responsive design add to the mobile user experience (UX)?
Make Your Video Player Mobile-Responsive
Fix your dimensions to fit your device.
- Use max-width: 100% in CSS
- Embed in aspect-ratio containers
- Use adaptive formats (MP4)
Deliver Video That Matches Device Bandwidth
Have you ever been sitting and waiting for a video to load on your phone and experience a super long lag? Most likely, you’ll give up and close out of the window out of sheer boredom or frustration.
Use an adaptive streaming to auto-adjust resolution for slow connections. It will increase engagement, too. Platforms like YouTube, Vimeo and Wistia do this well
Why should you optimize your video for the best quality?
You want your videos to enhance, not hinder, the user journey. Balance visual richness with performance by:
- Smart hosting
- Thoughtful embedding
- SEO best practices
Key Takeaway: Optimize and compress your video, for better SEO, conversions and trust. Sloppy video slows down everything. Properly embedding the video gives you more time to communicate your story, your brand, your vision, and your product in a meaningful way.
With optimized schema, Google can serve it up in the search results.
Rich Media and Performance: Key Tradeoffs
- Balance is critical:
- High-quality video = Better storytelling, but slower load
- Over-compressed videos = Load fast but may hurt user perception
Best practice: Aim for optimized delivery with sufficient quality.
What are two mistakes to avoid for website video optimization?
Understanding the importance of video and how to use it to boost responsiveness to your site is essential, however, there are ways that video can also tank your rating and hurt your site’s viability.
- Poor video hosting degrades Core Web Vitals (especially LCP), causing slow page speed, higher bounce rates, and potential SEO penalties.
- Autoplay or intrusive videos cause poor user experience (UX), leading to higher bounce rates.
Google is reviewing how people are interacting with the site and tracks exits. If your site takes too long to load, users will bounce.
The issue with doing it wrong is twofold. One, from a technical standpoint: if you’re not loading it properly, if you don’t have it hosted properly, you’re going to run into site speed issues. As we all know, Google’s taking a look at how people are interacting with the website. If people can’t load a website and it just takes too long for them, they’re going to bounce, because everyone’s busy. And then the second one is really a formatting thing: if you’re interrupting the flow of someone’s buyer journey. Let’s say that they come onto a product page and then a video just pops up out of nowhere and the audio’s playing. That’s also a big issue. So avoiding those two is really important.
Follow Best Video Practices to Retain Site Visitors and Improve Their Experience
“It used to be really big in just e-comm, because I think that’s the easiest place to really show, hey, this is our product. These are the mechanisms of how the product works. These are the benefits. More so, you’re gonna need to be able to differentiate yourself in the service world, especially with AI. Everyone’s gonna be able to do a lot more with AI, so services are gonna be distinguished not only based on their differentiation factors, like how well are they providing this service, right? But also how well do I trust this brand? Do I know the people? Is there a person that I can look at and say, okay, when I think of this brand, I think of these leaders and clearly they’re speaking in a way that makes sense to me. They support values, I support, they have a great clear business proposition. So all of those things matter. And video’s probably the easiest way to get that across. That makes a lot of sense. Yeah, I was just picturing like if you see someone talking it, it builds that trust too. If you can see like they’re making eye contact or they’re showing you something and you’re showing the usability of it, it makes you more interested in the product for the service. For sure. Exactly. I mean, this is a perfect example, right? If, yeah, we were just talking here and it was a, A Zoom picture, not as impactful, right? No. Right. You don’t see the expression behind it, so it’s like, oh, okay. Why do I wanna listen to them? It shows more authority and trust this way, I think for sure. Hundred percent.”
How can you track your video’s performance once it’s uploaded?
Test and test some more. The key to a well-functioning website is to use tools to see how fast your pages are loading.
Recommended Tools:
- Google PageSpeed Insights: analyzes the performance of a website on mobile and desktop and makes recommendations on how to improve the loading speed and UX
- Lighthouse (in Chrome DevTools): audits webpage performance, accessibility, and SEO to show where the page can be improved
- WebPageTest: assesses website load speeds based on users’ browser types, connection speeds, locations, and device types
- Google Analytics (GA4) Exit Rate Analysis: Check exit rates to diagnose potential video issues. It can also tell you what devices people are using to get to your site
Try These Quick Fixes if Your Webpage Is Moving Slow
- Use lazy loading.
- Embed from a fast platform (YouTube, Vimeo).
- Use thumbnails instead of autoplay.
- Avoid auto-loop or unrelated post-play content.
Properly embedded, optimized videos:
- Increase trust, engagement, and time on page
- Support SEO rankings with schema and load speed
You got to realize that people are coming to your website, not always with the perfect device, or the perfect internet. So understanding that there are different methods on how people are going to see this and load it is important. And it might offer you some insight as to why people are bouncing. One of the proxy metrics that you can also use is just taking a look at the exit rate in Google Analytics, or GA4. If you see a page with a really high exit rate and that page has video, that might be one of the first areas you want to take a look at and say, ‘okay, is this video loading slow for a broad swath of users?’
Key Action Steps and Final Tips
Developer Tips to Improve Site Speed Around Videos
- Set the <video> elements in your HTML to preload=”none” or preload=”metadata”. This makes it so videos will not begin loading video resources until a user interacts with the video.
- Use lazy load on iframes by adding the following attribute to your element: loading=”lazy”
- Use a facade — popular embedded video providers like Youtube have open source facades build that allows you to replace the iframe with an image, saving page resources. The video resources will then only be downloaded if the user interacts with the façade.
Next Auditing Priority for Your SEO/Content Team
- Core Web Vitals – audit the main core web vitals the following via page speed insights. Aim for the following:
- LCP < 2.5 s
- NP < 200 ms
- CLS < 0.1
- Video Indexing Report (GSC) – Check that every page still shows “Video indexed” and review any “No video indexed” errors.
- Structured data – Validate required VideoObject fields (name, description, thumbnailUrl, uploadDate, contentUrl/embedUrl, duration) with the Rich Results Test
- Transcripts and captions – Publish or embed transcripts; they boost accessibility and add crawlable text.
- Sitemap/internal links – Make sure video pages and individual videos are in XML/HTML sitemaps and receive contextual links
Tools to Streamline the Auditing Process
- WP Rocket – helps with lazy load, lazy load for videos, swaps iframes for thumbnails reducing load time
- W3 Total Cache – Toggles unused scripts, ads pre-connect/preload caching
- Page Speed Insights – Shows LCP/INP/CLS issues per page quickly and easily, allowing developers a clear look at what needs to be worked on first
- Descript – AI transcription for SEO friendly captions and content
- Google Rich Results – quickly test schema markup validity
Follow these guidelines and your properly embedded, optimized videos will increase trust, engagement, and time on page. You’ll boost SEO and improve the user journey.
Happy recording!
