The Issue of YouTube Videos Lowering PageSpeed Insights Scores

You’ve probably noticed that PageSpeed Insights scores drop significantly when you embed video or audio from websites like YouTube, Vimeo, Twitch, or SoundCloud on WordPress pages. In this article, we’ll look at how to achieve high page load speed even when embedding YouTube on our WordPress pages.

You’ve probably noticed. When we embed YouTube on WordPress pages, page load speed drops significantly, and we run into the warning in PageSpeed Insights reports: Reduce the impact of third-party code — Third-party code blocked the main thread for ……. ms.

In fact, Lazy Load plugins may not work properly on pages with embedded YouTube videos either. In the PageSpeed Insights results for these types of pages, we may also see the “defer offscreen images” warning.

Additionally, many other warnings can accompany these. For example, Minimize main-thread work and Reduce JavaScript execution time.

WordPress Plugins That Speed Up Pages Containing YouTube Videos

When we looked at WordPress plugins, we came across a few that claim to load YouTube videos quickly, and we tried them out. Which of these WordPress speed-boosting plugins is the best? Which plugin actually increases page load speed?

WP YouTube Lyte

WP YouTube Lyte is a free plugin that promises to increase page load speed on WordPress pages with embedded YouTube videos.

You can find the plugin at the link below.
WP YOUTUBE LYTE PLUGIN PAGE

After installing the plugin, you’ll see a screen like this on the settings page:

The plugin asks us to enter a YouTube API key. However, the plugin still works even without entering this API key. Still, thinking we might as well complete it since we’d started, we managed to enter a YouTube API key after a long struggle. However, the plugin frequently had trouble connecting to the YouTube API and gave warnings. So we ran the plugin without entering the YouTube API. The results were still quite successful.

Plugin PageSpeed Insight Results

When we installed and tried this plugin, we tested one of our pages with multiple embedded YouTube videos (you can view the page here) with PageSpeed Insight, and shared the results below.

We saw that the plugin produced the same result on one of our pages with both a YouTube and a Vimeo video embedded. Based on these results, we can say the plugin really does speed up pages as it promises.

However, we should also note that results may vary depending on the theme or plugins you use. Some people say the plugin causes display issues on some themes, and doesn’t make a noticeable difference when used with certain cache plugins. It’s up to you to try it out.

Strengths of the plugin:
The plugin speeds up pages containing YouTube videos, as promised.
Easy to use and configure. Install and forget.

Weaknesses:
There are reports of it not working well with some themes or plugins, causing page display issues.

Velocity

When we tried this free plugin developed by Daaren Cooney, we saw it noticeably boosted PageSpeed Insights scores in both mobile and PC results.

You can find the plugin’s page at the link below:
Velocity plugin

We saw that it also resolved the issue that appears in PageSpeed Insights reports: Reduce the impact of third-party code — Third-party code blocked the main thread for 2,470 ms.

The plugin gives you a shortcode when you enter your YouTube ID. You place this shortcode wherever you want to add the video.

Important note: When entering the YouTube ID, enter the part after the /.
So, say the address is: youtu.be/jNfSAtyLujc
We only enter the jNfSAtyLujc part.

When we click the button labeled COPY next to the shortcode above, another window opens. In this window, we select the code, right-click, and copy the code to the clipboard.

Then we add this code wherever we want on our page. (Below)

The section where we added the shortcode looks like this. When we click the play button, we see the YouTube video.

If you’d like, you can also select an image from your library for your YouTube video in the settings. (Image below)

When we do this, the page looks like below. That is, we’re actually seeing a preview of the YouTube video, not the video itself.

Besides speeding up the page, this has two advantages. First, if we’re using lazy load, this image also loads later, like other images. Second, since the image will have an alt tag, it can contribute somewhat to your SEO efforts.

Before and After Velocity Page Speed Report

Strengths of the plugin:
– Noticeably increases page speed.
– Doesn’t cause page display issues.
– You can assign any preview image you want to a video.

Weaknesses of the plugin:
– You need to handle each video you add separately.
– Since you’re adding a shortcode, if you remove the plugin, your visitors will see this code instead of the video on your pages.

Related Questions