Ever since Google started prioritizing website speed in search rankings, webmasters have been scrambling to optimize their pages. JavaScript can be a major issue for slow loading times, especially when you rely on third-party scripts like YouTube embeds.
While there are paid plugins that claim to solve this issue, they often fall short or are too expensive.
Today, I will share a unique, free solution that doesn’t require any plugins! It’s a little code-heavy, but the results are fantastic.
The Challenge: Taming the Third-Party Script
The problem? YouTube’s embedded player is a third-party script notorious for slowing down websites. While techniques like lazy loading exist, achieving a perfect GPS (Google Page Speed) score can be tricky.
You can check this post score. It obviously has the code implemented already. So you can see it actually works. I did a test without the code optimization and added the embed code directly into the post, the scored were 64/88 (mobile/desktop) and after the update it went up to 97/100 (mobile/desktop).
My solution was implemented on WordPress, but it can be applied to any website.
It consists of just a couple of scripts and some manual tags to be added. But it works well, it’s free and replicable.
The Solution: A Clever Workaround
1. Fake it Till You Make it: Take a screenshot of the YouTube video you want to embed. This acts as a placeholder image, keeping the user experience seamless. You can use any image, but the idea is to “pretend” that the screenshot is the YouTube video player.
The image above is an example of how it will work. You can click on it and it will load the video.
2. ID Grab: From the video URL, snag the unique ID (those letters at the end). This will be your secret weapon. See the image below.
3. Image on Stage: Add the screenshot image to your webpage, ensuring the size matches your desired video dimensions. The size of the image will be the same size the video player will be displayed.
4. Code Time (But Easy!): Here comes the secret sauce. We’ll add a code snippet within the image’s HTML tag (WordPress users: switch to code editor). Replace “youtube-video-ID” with the ID you snagged earlier.
style="cursor: pointer;" src-youtube-id="xsVTqzratPs" onclick="load_youtube_video(this);"Repeat steps 1-4 for all your YouTube videos. Now, the final touch – a bit of JavaScript magic.
If the last step was a bit confusing, your image html code should look something like this.
<img src="videoplaceholder.png" style="cursor: pointer;" src-youtube-id="xsVTqzratPs" onclick="load_youtube_video(this);">5. Bringing jQuery to the Party: Most websites (especially WordPress) already use jQuery, a popular library. If not, you’ll need to add the provided code snippet. Add the code below to your site’s header if you are not using jQuery already.
<script
src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
crossorigin="anonymous"></script>You can check the latest jQuery version in their official site in case there is new releases after this article was published.
6. The Magic Trick!: Add the following code snippet to your website header (either site-wide or just to the page the video will be displayed). This code replaces the placeholder image with the actual YouTube player when a user clicks on it.
<script type="text/javascript">function load_youtube_video(e){var t=$(e).attr("src-youtube-id"),r=$(e).width(),o=$(e).height();$(e).replaceWith('<iframe width="'+r+'" height="'+o+'" style="border:none;" src="https://www.youtube.com/embed/'+t+'?autoplay=1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>')}</script>7. Done! This simple solution will replace the screenshot you added with an actual YouTube video player the moment the user clicks on it!
Do you want me to help you improve your site’s performance? Find my contact information below.
The Results: From Lag to Lightning Speed
By using this approach, you achieve two key benefits:
- Lazy Loading on Steroids: The YouTube player script only loads when a user clicks the video, not during the initial page load. This significantly improves your GPS score.
- Prioritizing User Intent: Not everyone watches every video. This method avoids loading unnecessary scripts for users who aren’t interested, saving precious resources.
Imagine a world where your website scores a perfect 100 on the GPS test! This solution makes it a reality.
While this approach might not be the most elegant solution, it’s a powerful tool for web speed optimization experts like myself. It prioritizes user experience by keeping your page blazing fast and only loading the video player when it’s actually needed.
So ditch those slow YouTube embeds and take control of your website’s speed with this unique, code-based solution!
Remember, a faster website translates to happier users and, potentially, an SEO boost!