🐌 vs 🐇

Embedding YouTube videos in a static React site has impacts for SEO and mobile usability. This is mainly because it increases page load times. Slow loading pages are penalized by search engines, leading to lower rankings, not to mention it will frustrate your mobile users, or those with limited bandwidth, and that adds up to a poor user experience.

So I present to you LazyYoutube A method to create a typed React functional component that allows you to lazily load YouTube videos on a React website, without adding additional packages and build bloat.
The component utilizes the handy Intersection Observer API to detect when the video comes into view and only loads the video when it is visible to the user.

Why Use Lazy Loading for YouTube Videos?

Well, beside my need for a bit more content before the video below to prove my point—like I said before, lazy loading heavy assets like embedded YouTube videos is important for SEO-optimized websites.

Here's why:

Improved Page Load Speed:
By lazily loading YouTube videos, we can significantly reduce the initial page load time. Instead of loading all the videos upfront, which will be resource-intensive—as well as a React developer Anit-Pattern—the LazyYoutube component only loads the video when it is visible to the user. This results in maintaining super-fast page loads and a better user experience.

Reduced Bandwidth Usage:
Lazy loading videos helps reduce the amount of data transferred on initial page load. This is particularly beneficial for users with limited bandwidth or slow internet connections (Think Mobile First!). By loading videos only when necessary, we can save bandwidth and improve the overall performance of our website.

Enhanced User Engagement:
Lazy loading videos might also lead to increased user engagement. When videos are loaded only when they are visible, users are more likely to interact with them. It's a clever psychological trick. This can result in longer session durations, lower bounce rates, and improved user engagement metrics, which are all positive signals for the SEO of the sites we engineers build and maintain.

Better SEO Scores:
Search engine crawl bots like this method, as they consider page load speed as a ranking factor. Websites that load quickly tend to rank higher in search results. By implementing lazy loading for YouTube videos, we will improve our website's loading speed, which will positively impact our SEO scores and search engine rankings.

How to implement a LazyYoutube Component

using this LazyYoutube component is easy:

• Import the LazyYoutube component into your desired component file.

• Render the LazyYoutube component in your JSX, passing the videoId prop with the ID of the YouTube content you wish to embed.

Example usage:

// jsx/tsx
import LazyYoutube from "./LazyYoutube"

const SomeParent = () => {
  return (
    <div>
      {/* As above */}
      <LazyYoutube videoId="dQw4w9WgXcQ" />
      {/* So below */}
    </div>
  )
}

The LazyYoutube component will handle the lazy loading of the YouTube video based on its visibility in the viewport.

I prefer using this LazyYoutube component pattern in my websites. It optimizes the loading of YouTube videos, improves page load speed, and enhances the overall user experience, all of which contribute to better SEO performance, and that is what it's all about at the end of the day.

See the full component gist here