Lazy Load Images To Improve Page Speed (Defer Offscreen Images)

Подписаться 155 тыс.

Просмотров 30 тыс.

50% 1

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: wplearninglab....
Check out the free WP & Online Marketing Summit For Beginners. The online event is June 18, 2019: events.wplearn...
Lazy Load Images To Improve Page Speed • Lazy Load Images To Im...
Join our private Facebook group today! / wplearninglab
Plugin in the repository: wordpress.org/...
*Warning* Lazy load plugins can cause problems with parallax images.
To lazy load images means that images are loaded only as they are needed.
On a non-lazy load page, all the images on the page are loaded when the page loads. Even the images that can't be seen unless the visitor scrolls down.
Lazy loaded images are loaded as the user scrolls down.
Since images are often one of the biggest drags on load speed, this technique can be a quick site speed win for many websites.
The added benefit is that there is almost no setup when you use the plugin I show you in this tutorial.
Post videos of your WordPress success using the hashtag #WPLLCommunity!
Get on the Unofficial Ultimate Guide To Elementor course waiting list here (no obligation): elementor.conv...
Here's the link for Elementor Pro (aff): wplearninglab....
WP Learning Lab Channel: www.youtube.com...

Опубликовано:

27 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 53

@wplearninglab 5 лет назад

If you enjoyed this video don't forget to the like it and subscribe! Then check out this playlist about speeding up WordPress: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-cBDY-CXWmI0.html

@tangodigitalsystems 5 лет назад

This will be great for blog website.. Thanks for the video..

@wplearninglab 5 лет назад

No problem, thanks for watching! It can definitely help any site that has images.

@a-zman5441 5 лет назад

Wow there's a crazy change on the speed of my site thanks!

@oqba 5 лет назад

Thanks we use wp rocket plugin for caching and lazy load.

@wplearninglab 5 лет назад

Hi Okba, I'm a fan of WPRocket as well :) Thanks for watching!

@jakemarlow1931 4 года назад

does this work on Shopify? I'm v confused

@sangitakanhere605 5 лет назад

Thanks a lot sir.

@wplearninglab 5 лет назад

You're welcome Sangita, thanks for watching! Let me know if you have any questions :)

@muhammadsharjeel1491 5 лет назад

Awesome tutorial thanks brother. I was also need this type of tutorial because I'm working on a website that has a lot of images and it loads in 11s (without cloudflare, caching plugins and images compression) you solve my some problems like always 👍👍👍

@wplearninglab 5 лет назад

Hi Muhammad, I'm always happy to help solve problems :)

@muhammadsharjeel1491 5 лет назад

@@wplearninglab is it possible to lazy load the complete page? I mean lazy load images do not load whole images at once, it loads into sections and only then when visitors scroll down. So I want to say that is it possible to load entire page (not only images) into sections? When the visitor scroll down then the section of the page will load. I create a website for my friend and I added too much animations and lots of stuff like that so now it loads 11sec according to gtmetrix I happy if you visit the website to see my work and creativity as your student I would like to receive some motivational words from you thecreativefactory.com.pk

@amirkhan.494 5 лет назад

Hello , Could you please make a tutorial regarding Wordpress Speed Optimization without using any plugin . Because many times plugin's didn't works properly . Thanks

@wplearninglab 5 лет назад

Hi Amir, I'm working on a video series to show exactly that. There is no "one size fits all" for speed optimization because every site's setup is different. What you have to do is find out what is slowing your site down (using GTMetrix, Pingdom or another scanner) and then fix those specific issues. My video series will attempt to solve every issue that can come up, preferably without plugins.

@webguru2991 5 лет назад

@@wplearninglab ok thanks and waiting

@iwbowden 5 лет назад

@@webguru2991 When you do that seres, Bjorn, include this little snippet of code: instant.page/ It's one of those things that doesn't show up in numbers from GTMetrix et al, but affects the perceived speed of using a website when following links within the site.

@kristex876 4 года назад

Hello sir, thank you very much for help, i want to ask: Do you have a tutorial how to fix problems with YSlow?

@SandyVInman 5 лет назад

Agree with Damjan - how did you know this was a problem? You da man! Already optimized my images, but still slow - this helped a little more! Do you know what that enable gzip compression is that we're both getting "F" for?

@wplearninglab 5 лет назад

Hi Sandy, I'm happy I could help a little bit with the images. I have a tutorial for GZIP, it's right over here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-QOnouKjb8iI.html I hope that helps :) Let me know if you have any questions. Thanks for watching!

@d3LtaaLpHa150 5 лет назад

Hello Bjorn, I am new to the channel. I was wondering if you could make a video on how to redirect conditionally to a different URL based on a drop-down menu selection?

@wplearninglab 5 лет назад

Thanks for being part of the channel :) Is the dropdown menu part of a form that is submitted and then they're redirected or is it an independent drop down and the redirect happens as soon as the selection is made?

@andrejjurgelevic6638 5 лет назад

Thank you very much

@Bhumi_rai 4 года назад

how to use a blogger website Defer offscreen images

@biancaantas6261 5 лет назад

gave super subil from 55 to 99 on pageSpeed Brasil

@wplearninglab 5 лет назад

Awesome, I'm happy it worked so well for you Bianca!

@WalkingYog 5 лет назад

Thanks a lot, realy help me make my site from 2 mb, to 900 kb

@wplearninglab 5 лет назад

That's awesome! I'm happy I could help, thanks for watching! Let me know if you have any questions 🙂

@WalkingYog 5 лет назад

@@wplearninglab you really help me twice, long time i try to make a code frome codepen on wordpress, your video help me, but info in "codepen" video not full. You are foget for connect with script files. & i have a problem with local server. in Live Internet site all work. Thanks

@wplearninglab 5 лет назад

Hi Man Jah, I think what you're saying is you want to know how to include script files in WordPress so that you can integrate the codepen project with your site?

@WalkingYog 5 лет назад

@@wplearninglab no, sorry for my English... I Just say what in another video you forget include java scripts for codepen code. And codepen code working in to the Internet site. And codepen don't work on local machine. But only your video help me understend how include codepen in WordPress. Thanks

@wplearninglab 5 лет назад

I get it now 🙂

@damjanilic5596 5 лет назад

How did you know that I need this? Thanks.

@wplearninglab 5 лет назад

haha, my advanced psychic abilities? 😛

@punit5601 5 лет назад

Like facebook shows the skeleton screen that something is loading, how could we do a similar thing on our site. Facebook shows a grey circle before profile if loads and grey lines before text loads

@wplearninglab 5 лет назад

Hi Punit, I've been interested in that as well, but I haven't looked into how they do it. RU-vid does it as well. Probably all the major sites do. I'll have to do some research.

@boicom7 4 года назад

Do you need this plugin if you got W3 Total Cache bcos I noticed W3 has a Lazy loading feature?

@wplearninglab 4 года назад

Hi Kenny, if W3 has Lazy Load then you don't need this plugin. I hope that helps, let me know if you have any further questions. Thanks for watching!

@boicom7 4 года назад

@@wplearninglab Alright. Thanks

@johnboyd8053 5 лет назад

Bjorn, I see the comment from Archhitude regarding Parallax. Just curious about 2 things. 1. Can this plugin be made to work on an individual page? 2. Any conflicts with Elementor, or does Elementor already allow the lazy load feature?

@wplearninglab 5 лет назад

Hi John, I'll have to look into #1, it's not a native setting, but there may be a way to have it work on a single page manually. In regards to #2, I have the full WPRocket plugin running on my main site and it has the lazy load built into it. It does fine with parallax images and Elementor on my main site. I haven't tried just the Lazy Load plugin by itself on with Elementor and parallax yet.

@jd2931 5 лет назад

Can i use this on my shopify store im have a problem with Defer offscreen images

@wplearninglab 5 лет назад

Hi Jimmy, unfortunately this a WordPress-only plugin. I don't know much about Shopify add-ons, but there may be one that defers image loading. If not, you can find the JavaScript code that defers images. It's freely available, just Google it. Then you could add that JavaScript to your Shopify theme. I hope that helps, let me know if you have any further questions. Thanks for watching!