The first 1000 people who click the link will get 2 free months of Skillshare Premium: skl.sh/kevinpowell0820

@SALMANKHAN-zz4gi

3 жыл бұрын

thank you kevin ! i'll be most productive for the next 2 months now

@MrAndi1281

3 жыл бұрын

Hi @Kevin Powell would it make sense to use this together with web.dev/content-visibility/?

@KevinPowell

3 жыл бұрын

@@MrAndi1281 the only issue with content-visibility is the lack of support outside of Chrome. Wouldn't hurt though!

@MrAndi1281

3 жыл бұрын

@@KevinPowell i know, support is lacking a lot but the sooner people know about it, the better right?

@Vaeshkar

3 жыл бұрын

Damn 33,000 clicks to late.

I'm really glad you mentioned that developers generally have more powerful devices than average users and should account for that in design and testing, as I think this is often overlooked.

Conclusin: Add loading="lazy" to all and that users need to scroll down to see. Add a fixed width & height to remove any problems. This will speed up your website.

I have page on my website with thumbnails, modals that have a slide show of images in them. It's a pretty hefty page to load all at once. I did lazy loading to the slide show pictures. What a difference! Thanks man, love learning little tips like this.

You are a hero Kevin. I was yesterday JUST about to start learning how codesplitting in vite and lazy loading works because of my project getting bigger and more complex.. I stopped yesterday and pushed it to today since I was tired already and boom.. KZread suggests me this work of art.. thank you!

It is a nice format that you explain what you want to talk about, before putting in a intro animation no one really wants to sit through. Not to mention greate information. As a developer its nice to listen along to things I think I already know, and then out of nowhere learn something new.

The developer tool throttling tip saved me future headaches... my website was so slow on mobile devices. Thank you so much for that tip.

I used the intersection observer technique based on your previous video (customised a bit for our use) and doubled our page speed in some pages. Great for google ranking. Thanks.

@KevinPowell

3 жыл бұрын

That's awesome!

Wow, thank you for this video, Kevin. I'm surprised how easy it is to implement but I didn't know about it. This video has helped me so much!

Just KZread'd for lazy loading and thought I need a degree to implement it. Never considered it would be THAT easy! Thank you alot!!

Wow, love the different loading distance based on connection speed!

Awesome video! This is exactly what I was looking for when getting started with native lazy-loading.

Great tip! - Will be using this one, nothing to lose!

Amazing tip. Especially on lazing loading for big images.

Hey! Thanks for the 2 months of Skillshare, still working. Great tutorial 🙌

That moment you use intersection observers for lazy loading and then Kevin tells you there is a "loading=lazy" attribute on images ...

@ne9835

3 жыл бұрын

Lolll!!! 🤣

@Rhidayah

3 жыл бұрын

observers js utility: "I'll handle that" loading=lazy attribute: "i'm about to end this man's whole career"

@J90JAM

3 жыл бұрын

@@Rhidayah Intersection Observer is more versatile still.

@pjgeeroms

3 жыл бұрын

Loading=lazy is not supported in all browsers or some outdated browsers so a fallback like lazysizes still seems like a good idea to me.

@thulo5204

3 жыл бұрын

literally burst into tears

Yeah, you just made me realize I should refresh myself on the picture and figure elements...

Just found your channel, so much great content, thank you!

A great tip which I did not know about - thank you Kevin!

Very nice, much easier than doing intersection observers. Thanks Kevin :)

Great to see Timestamps! Nice tutorial!

This is really an amazing tip...Thank you very much kevin

_loading="lazy"_ _mind="💥"_

@freekieh9235

3 жыл бұрын

Hotel=“trivago”

@justinoneill2837

3 жыл бұрын

@@freekieh9235 I know... I look like the trivago guy

@freekieh9235

3 жыл бұрын

@@justinoneill2837 lmao

@vildanmorina2499

3 жыл бұрын

kzread.info/dron/QW4cq2UBJKb4GWhzposDTg.html Subscrie the Channel please. I am going to upload Video Content about Web Development

You can middle mouse drag down through multiple lines to create a vertical multi-cursor as well.

Great job, Kevin.

You sir are a gentleman and a scholar.

A great tip Kevin. I owe you this knowledge

@xcoda

3 жыл бұрын

I've been studying front end for long time now. I've always felt unready to start making some income from the skills and when I do want to start, I don't know where to start from. How to get myself out there. Any advise please. I really need it

I use a lot of your lazy loading using JS for a site I support that has an enormous number of scanned advertisements (from the teens-40s). Either the images are small to load quickly or they are large so you can actually read them. Your earlier lazy loading makes the pages load way faster. Now I'll have to play with this and see if it's as easy as you say it is. (Grin)

Thanks for the video Kevin. I’m using the lazysizes JS for this purpose, however it’s great to see similar functionality being implemented in the browser natively. You touched on it a little here, but may I ask if you would consider doing a video on CLS in the future, please? This will be a Google Pagespeed metric in the near future, so I’m trying to work on my employer’s website to reduce layout shift as much as possible. Any tips would be greatly appreciated. Keep up the great work!

Great one Kevin as always. Please how do you do same for background images?

You're better than netflix to me ❤️

This is amazing. Had no clue this feature existed

Very well excellently explained

Another great tip!

I'm so glad I watched this video else I'd still be using some JS for this, heres your Like good man!

Thanx alot as always you are awesome 👌

Oh wow, native lazy loading but I am more amazed at your css img { max-width: 100%; height: auto; } That's what I need! Because I am doing lazy loading in a hard way >_

Ótimo vídeo parabéns ✌.

Loved it!

Nice. Hadn't seen this feature yet. Thanks. Will the lazy loading also work in combination with the 'srcset' attribute of the img tag for multiple image sizes?

Thank you!

Thanks m8. Big help.

Question. I want to redo my portfolio site and have lots of images in a lazy loading grid/masonry. [6:30] in this video you demonstrated that a wall of text stops more lazy loading batches of images. Sooooo, what's the best practice to load batches of no more than X number of images at a time? Will I need JS?

What size do you recommend a standard blog image be in megabytes? 3MB sounded reasonable but I guess not! Love your content, thank you for sharing your knowledge.

Hi Kevin Thanks I think I have watched almost all your videos and am doing the 21 days Great work!! I am looking at a website for photos. I have in effect 4 cols on a big screen and this reduces to 1 col on smaller screens. You say in the video “don’t us lazy load where the photos are above the fold”. So I have 12 photos above the fold on a big screen and only 1 on a small screen, where lazyload is likely to even more important. How do I deal with this for the 4 - 11 photos that need lazy load dependent on screen size? As this comes in the HTMl not in the CSS. Will lazyload on images that are sometimes on the screen at load cause a problem, or did you say that just because it is not needed?

My problems with lazy loading are definitely the jumping issue described, but also the content end up not being searchable with the browser find function. And I've often seen this used in page displaying lists [that you naturally want to search, and being text wouldn't be heavy to load]

@KevinPowell

3 жыл бұрын

This is only for images and s, so I don't see how it would effect a list? For that type of issue, it's where JS is at play and hiding content.

@robertlinder8464

3 жыл бұрын

There will be no layout shift if you specify the (intrinsic) width and height of the images, just as he did in the video.

@unleashthedog

3 жыл бұрын

@@KevinPowell I'm not sure how it has been implemented, I assumed JS like you say. But if you apply this method to a for example, wouldn't that create the problem I mentioned?

Thank you a lot.

Hey Kevin, could you do a video on google pagespeed insights? Specifically Largest Contentful Paint

You're the best!

Thank you for this maaaaaaaaaaaaaaaaaan!!!!!!

Great video Kevin! Could you maybe do a roundup of lazy loading image content - whether it's block-level images or background images? I've tried various JS plugins which have been hit and miss for this type of thing.

Thank you for this trick. I want to know your opinion about a responsive carousel and this lazy loading feature. Could it replace third party JS coding?

great video

Great video, but I compared js lazyloading with this native method and would have got an advantage only if it were possible to alter (and reduce) the vertical distance between the viewport and image where the native load image is triggered.

okay seems easy. But I have a question/concern. What about dynamic websites with the whole below and above the fold thing. Such as an e commerce shop and there will be products listed above the fold but also the fold is not set as it depends on whatever browser, so you don't really have control over which ones will be above or below the fold, it's either one or the other as you're using php to code only one product-card that then gets reused and repeated for each product. So you can't really have control over which will have lazy or not. If that makes sense. Also with browser support, how are supported it the aspect ratio thing, because if that isn't supported fully yet then do you end up with gaps on responsive sites?

Gotta love having a 6mb download and a .3mb upload :D

thanks

Thanks!

@KevinPowell

2 жыл бұрын

So sorry for the late reply on this one, YT doesn't do anything to notify us of the super thanks... but thank you so much!

Hey, Kevin great video! Can you please guide us on how to disable WordPress native lazy loading for the hero/featured image or largest contentful paint?

Mr. Kevin, really good breakdown. I just have a question about setting height and width attributes on the img tags. We can set each attribute only once, but what if the user has a device or desktop that has a different size than the values that were set? Wouldn't that still create a content shift because of the different dimensions?

@tomcoop9750

2 жыл бұрын

I think when the image’s max-width is 100% and the height is auto, the computer can make this calculation and prevent the elements from shifting.

A UX consideration: A placeholder background would be great

@v0xl

3 жыл бұрын

with moving line (pseudo-element with box-shadow)

@jamesc86808

3 жыл бұрын

blurred, low res version of the image is usually a good solution

@welikerosafloyd

3 жыл бұрын

Any example of these? I think I don't understand

@jamesc86808

3 жыл бұрын

@@welikerosafloyd Yeah -- On youtube, as you are scrolling down, before they load the video they load a simple placeholder widget that looks like the outline of the video/text before loading the videos. Tells user where to expect content and helps with preventing things from jumping around by "reserving" the space with the placeholder that has the same dimensions as the content.

@welikerosafloyd

3 жыл бұрын

@@jamesc86808 Great example man, I see what you're saying. Thank you!

great vid, thanks! i dont css much but i like to keep up to date. sry if dumb Q incoming... when you placed those height and width attr on the img elements themselves, just curious where those numbers came from? would using auto here be an option? might have to place those imgs in a container with what the combined height and width for auto to work?

@KevinPowell

3 жыл бұрын

I'm using the actual pixel dimensions of the image 😊

So, can loading="lazy" be used for other elements like ?

Thanks for the nice tips about native lazy loading. Did not know lazy loading is that easy! I am going to look at your other videos about responsive images. Two recommendations for the channel: - Can you please put the camera further away from your face when you are talking in full-screen? It feels too close and annoying. - Also can you please speak a little slowly, specially in the intro section of the video when you are trying to grab attention? I am fluent in English, but still it sounds almost gibberish! Please take these as a constructive feedback to improve the channel. All the best for the channel!

It would be great, if there would be a head request to receive the width and height for an image and set it to the img. Or is there a possibility?

Hi Kevin! Nice video. I've faced with one "bug" with my background image which takes whole height of website. When I scrolling up or down this image jitter with black lines on the top and bottom of viewport. I thought the problem is related with loading and I need to implement with lazy loading but it doesn't solve my problem. What is it can be? Thx

Hey! First time I hear about this attribute of the image element. Is it almost new? Is your invention???

Thanks

Does this work with just images or any HTML elements? I have a list of article posts on a page, each one having a containing div Is it possible to lazy load these divs with the method shown in the vid?

Thank you for this! One additional question: Is there any possibility to start load (showing in browser) images completed (as a size) in their frames juts blurred, and as browser loads them - they become more clearer? Cheers!

@senorzed6483

3 жыл бұрын

I have the same question! let me know if you find a solution please, thanks!

@mohamedruslicali5926

3 жыл бұрын

Same question.

I haven't watch all of the video You made Kevin, but You gave me a lot of knowledge that is hidden sometimes in this world. My question is, You never mentioned optimizing images JPG SVG or PNG cause We as developers often, are given images from various sites when JPG image is 10MB large.. and that CAN NOT come on server caues it will take time to download.. Ok we have better machines now but speeeeed is still important.. not everybody have dev machine as we have on job or home.. Some tools I use every day are guetzly, optipng, svgcelaner.. and when you test your site online it makes more speed and Google likes it more.. Thanks..

@KevinPowell

3 жыл бұрын

I have a series on this, where I look at webp and the picture element as well. I do need to look at automating it all though!

Kevin, if you’re using scrset with multiple sizes (1x, 2x, etc) or art direction, what size to I tell the browser for lazy load?

@KevinPowell

3 жыл бұрын

As long as you have it on the img as an attribute, you're good. It chooses which one it wants when it needs it from what I understand :)

Thank you for the video. As you noted, the "loading" attribute is not yet fully supported on HTML image and tags (see: caniuse.com/?search=lazy%20loading). Can you recommend a fallback in JS?

Good video

10:20 Is html file order not followed when loading page elements?

Just to confirm, if I put width and height in the img tag itself and set width: 100% and height: auto with css, the browser will still retain the space of that image in the viewpoint on responsive websites as well right?

Good to know that something like this exist, but it's still not compatible with Safari and IE Edge

The first 2k of the image is read in to get the dimensions, how does that work on server side?

8:40 why bother removing loading="lazy", if it is in the view port the browser will load it as eager anyway that way you don't have to guess which ones should be lazily loaded.

me: Oh cool! also me: *remembered he uses background-image and not tags* Oh...

@mohithguptakorangi1766

3 жыл бұрын

he used tags...

@Sollace

3 жыл бұрын

@@mohithguptakorangi1766 Yes, and I used background-image. I had to convert all my stuff to image tags so I could use lazy loading.

@mohithguptakorangi1766

3 жыл бұрын

@@Sollace ohh i thought u were saying that he(Kevin) was using background img

Hey Kevin, what do you think of the layoffs hitting Mozilla and the MDN teams?

@KevinPowell

3 жыл бұрын

Sucks big time. Luckily the MDN should be safe since Microsoft, Apple, Samsung and more have contribute to it as well. Bit worried about where Firefox is going from here though.

@notDYLANCOWLEY

3 жыл бұрын

@@KevinPowell Yeah Im really curious as to what the future of Mozilla is going to look like now. Thanks for the reply, and the great content by the way. You are a gifted teacher when it comes to front end and explaining advanced concepts in a very simple way.

Nice video. I've added lazy loading to my page with very little effort. You noted around 13:06 using "max-width:100% and height:auto;" will keep the images proportional if the width and height are assigned as attributes. I've been doing this for a while but and it works fine on Chrome but I can't get this to work on Safari on iOS as it only does the width and the height is 0 until the image gets loaded. Is there a way to get that to work in Safari on iOS?

@KevinPowell

3 жыл бұрын

That's interesting. I'll have to look into it more. I wonder if it'll be fixed once Safari pulls this out from behind a flag. Really strange since Safari was the first of the browsers to implement aspect ratios for images based on the width + height attributes....

@MikeMcCollister

3 жыл бұрын

@@KevinPowell I enabled "Lazy Image Loading" on iOS Safari and did not see the lazy loading happen. Possibly my network speed is too fast and I can't tell. I looked around at some of other experimental Webkit features and did not find anything that might have to do with proportional images.

I have a blog with many posts I cant go to each individual article and edit the img tag, how will I be able to add this the each tag using script or anything else please advise

Hey kevin , a question. At 6:35, why did all the images load when just a single image was in the viewport? If thats the normal behaviour, then whats the point of 8:07? My mind id bending.

@robertlinder8464

3 жыл бұрын

The browser will download images within 3x~ the viewport height, this is so that images have time to load before they're actually displayed to the user.

Hey Kevin - do you know how (or if) this would affect images in a Single Page Application built with something like React? My understanding is that the entire site is transferred over on initial load so the client just handles rendering resources. Does it obviate the need for lazy loading?

@ManInSombrero

3 жыл бұрын

A React app contains only links to images, not images themselves. SPA or not it doesn't matter here.

@vishsingh7235

3 жыл бұрын

@@ManInSombrero I've made React apps that include local images on the server as well as projects with images that are hosted elsewhere and included via a web address.

Those jump you are talking about also affects google's ranking.

To stop WordPress 5.5+ from automatically adding a loading="lazy" tag to your first few, above-the-fold images, it seems you need to specify loading="eager"

@arthzdeceva484

3 жыл бұрын

WP 5.5+ does that? And yes, I'm too lazy to read the changelogs...

I wonder Kevin, how would you lazy load CSS background images.

@isaactfa

3 жыл бұрын

You'll have to do it with the Intersection Observer API, but you can do it. Here's a handy article: imagekit.io/blog/lazy-loading-images-complete-guide/#lazy-loading-css-background-images

Can it be combined with fade in animations?

How about making a video of applying this to shopify themes? 😉

How to make a "placeholder" with some color, for pictures? So it will not be white? Or some loader?

Its also useful to add a low res or blurred placeholder image to avoid the mass of white-space while the image is loading. Like this:

@mcvgs1780

3 жыл бұрын

Is the data-src attribute the one that will show the skeleton loading image? Is it this a built in attribute?

@samkeen

3 жыл бұрын

Marc Vegas15 no, and this example’s the wrong way round. The full sized image should be in data-src, which is a custom data attribute that the browser doesn’t understand, but can be manipulated with JS. You then put the small image in src to load first, then when your JS kicks in you can have it transfer the data-src info into src.

I love the simplicity of the native method, but I would love to load some kind of preview image before the actual image, is that possible ?

@KBael

3 жыл бұрын

As long as it's got a width and height, just add a placeholder image with CSS by setting a background-image.

@GP-yc2it

3 жыл бұрын

@@KBael yes, or just a background color... maybe a nice gradient.

Is there a way to integrate this in a page builder like Oxygen, Elementor, or Divi?

Lazies!

@KevinPowell

3 жыл бұрын

😂😂

can you add a loading gif to indicate there is an image loading?

so freegin awesome

Very interesting, but as a user most of the time I have no problem to load all the images as the page load, I'll wait. It's annoying for me to wait while scrolling the page instead.

WCAG accessibility calls you out for not setting image h/w because it causes pah=ge loading "jumping" around

Nice, now potatoes got more use. Granted only if they have a modern browser. But it is still a net plus for everyone.