Ok, let's check now what we've done:
1. This is how the video should look in the visual mode of your WP editor after altering,
an empty space:
2. This is how the video looks on post after saving:
You can add more code, if you want in order to center your video, sizes, etc. I am happy with the result, and I have no desire to add more code to my site :)
If you want to have a clear view on how videos load before proceeding, here is a post with three youtove videos embed:
https://gottapics.com/best-of-drones-regarding-price-quality...
Refresh the page, see how they are lazy loading. If satisfied, proceed with applying the info from this tutorial
3. Proof of lazy loading. I refreshed my page and print screen with the post loaded without the video:
Tips:
Make sure you don't have ads bloker active on your site. Make no sense and can affect your site functionality.
Check your post speed with
https://developers.google.com/speed/pagespeed/insights/
or any other you prefer.
Do it before altering the code. Do it after, see the difference.
Check the speed twice. I have no idea why, but almost all the time, the first check shows bad results.
Do that for both before and after - check twice.
Please comment bellow if in doubt, or have anything to add.
I hope this is useful, good luck to you all!
Join the Discussion
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.
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.
condruzmf
Premium
Thanks again, I updated the first page with the backup suggestion.
Without your comment here, I might have been in trouble :)
Without your comment here, I might have been in trouble :)
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.
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.
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!
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!
ChrystopherJ
Premium Plus
It’s almost 1am here, but if you want to PM your website, I’ll take a look tomorrow :-)
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.
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.
condruzmf
Premium
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
Molly G
