Hello everyone,

I am here today to show you a way to deal with lazy loading embedded videos from YouTube, without using a plugin.

Why not using a plugin?

Just because they are built to load on every page/post of your site.

It is not a sure way that the developers of the plugin to know when it is needed or not.

This is why the plugins are loaded all together (unless you're using a plugin organizer)

making your site slower.

Remember the training - do not use plugins unless really necessary!!!

They increase the loading time of your page, as simple as that :)

Before proceeding with the following, please not forgrt to backup your site!

This is very important, go to tools-export-all content and save the backup file ;)

Thank you for remininding me about this ChrystopherJ

Okay, let's move on to the other solution ...



Join the Discussion
Write something…
Recent messages
ChrystopherJ Premium Plus
This is a really good attempt at not using a plugin, unfortunately, this code is still running on every single page, just like a plugin would. However, with SitePlus+ Caching turned on, neither this option or the plugin option will affect page load time, as the files have already been flattened and cached. Also, you should never directly edit your themes files, especially header.php, footer.php and functions.php (unless it’s is a child theme), as you will lose the changes when the theme updates or if you change your theme. If you don’t want this code to be actioned via a lazy load plugin, image optimisation or caching plugin, you can place it in to the Headers & Footers Plugin or the Ad Inserter Plugin, as most members will have the later installed, especially if they are using Google AdSense.
Reply
condruzmf Premium
Hey Chrystopher,

Allow me not to agree :) If the theme updates, then rewrite the code, it is less than a minute work, as the code in your embed videos in your post is already set.

About direct editing the theme code, I was very specific about where and how to do it - so there is no issue.

I didn't mention that it is highly recommended to backup the site (tools - export - all content) before doing any modification in the code, I will do it now - just in case. My bad, I supposed everyone knows that :))

About SitePlus+ I don't know what happens with that setting - really. Because I indeed increase speed after using this JavaScript to lazyload videos.

Maybe, in theory, you are right!

But in fact, after I used this solution:

Pagespeed insights, Neil Patel Ubersuggest and SemRush show the improvement with site speed. A good one!

So, you see, I can not agree with you. Only in theory I can do that (WA it is indeed doing a good job with minifying) but practically - I am right!

About the plugins you mentioned ... Do not use plugins!!!
Unless necessary ;) :))

Thanks mate, but If going with the idea of not using plugins ... then this is my solution.
Reply
condruzmf Premium
Thanks again, I updated the first page with the backup suggestion.
Without your comment here, I might have been in trouble :)
Reply
ChrystopherJ Premium Plus
Just to be clear, I never said your solution doesn’t work, the JavaScript does work in lazy loading your iframe’s.

What I was pointing out, is that you mention a plugin version would run on every single page as it has no idea how to determine which pages contain iframe’s. But this JavaScript is being applied to every single page via the common global footer.

Realistically, how many members will remember to re-add the code after the theme updates or is changed with another theme?

Also, the backup option using the built in export feature does not backup your whole website.

Using WA’s SitePlus+ Cache, or even a cache plugin, generates flat HTML files, meaning that PHP is not involved in processing all of the WordPress functions/code, therefore plugins do not affect the page load time. What does affect page load time is the excess CSS & JS files that are loaded by some plugins. Lazy load plugins do not load any CSS files, and some methods don’t use JS.

I don’t mean to get in to a heated debate over this, I actually commended you on a great attempt at achieving this without a plugin. It’s just unfortunate that this method will not work for 95% of members here, as they might be able to get their head around it the first time, but in a few months, they’ll forget that they added the code, the theme will update, and they’ll be scratching their head as to why their website is running slow again.

Compared to the time and effort you have to put in to get this to work and to maintain it, and considering their is no page speed improvement compared to using a plugin, then a plugin is the way to go for this solution.

Or, as I mentioned before, you can insert the code via a plugin such as the Headers & Footers or Ad Inserter.

I’m all for reducing the number of plugins you use, but they need to be the right plugins. A website with 10 plugins compared to 5 will not be any slower, especially as a cache system is in place. Unless those plugins are loading excess and render blocking CSS & JS.

I don’t mean any offence by these comments, just shedding some light on the situation.
Reply
condruzmf Premium
I appreciate your thoughts.
Yes, this is not a definitive solution, people need to assume what they are doing.
It is working for me, this is for sure.
Maybe it is my theme (just bought the premium one about 1 month ago)

On my site, even one extra plugin means a lower speed.
Like in this case, I have tried lazy load plugins and my site speed goes down.
Worst, CLS and LCP goes high.
I won LCP by applying this script together with site speed.
CLS is still about 0.3 on all my pages - should be 0.25 at most.
If you know a solution about this issue, I will be very grateful.
I have to mention that all my images and videos have dimensions specifications, so this is not the issue.
They are indeed loading without shifting the text.
This happens in the same way on posts where I have banners or visual adds from Amazon, and posts without adds.
I am concluding that the ads are not the issue (I have dimensions defined on those too)
I am thinking ... maybe the fonts?
I am digging into this right now.
If you can advise, please do so.
I am in need :))
Thanks mate!
Reply
ChrystopherJ Premium Plus
It’s almost 1am here, but if you want to PM your website, I’ll take a look tomorrow :-)
Reply
OCH3943 Premium Plus
Can you help to perhaps adding abit more screenshots where do I add this Javascript?

I am not exactly sure where, though I believe the answer is in this statement "You’ll want to add this to a .js file and enqueue it along with the rest of your Javascript files in functions.php."

But a screenshot on this may help the less tech-savvy people on knowing where to add the codes.
Reply
OCH3943 Premium Plus
I think after playing around and re-read your training, you mean to say it is in the theme footer.php that I should be adding the script.

I have tried that and the load time has indeed improved!
Reply
condruzmf Premium
Hey mate, please see page two:
"What I've done and works perfect for me on my both sites I run (The print screens I will add in the next pages are with my site, so you'll know it is working) I added the code before the body end tag in Appearance - Theme editor - theme footer."
Reply
condruzmf Premium
Oh, okay, I see now that you found it :)
So it is fixed.
Cheers
Reply
TommyHarmony Premium
Hey, cool thanks for sharing this with us. :-)

Tommy
Reply
Dorrie1 Premium Plus
Thank You for the information great lesson
Reply
mollygranger Premium
This is great information. I plan on using a few YouTube videos and this information will be very useful. Thank you.
Molly G
Reply
Top