Performance things in lighthouse
Hey, i'm wondering can't know what LCP, FCP, and others means.
and what type of images should i make them lazy loading? should i add the lazy loading to large images or specifically on small images?
and in this image the image is 15KiB what should i do? what she wanted from me?
18 Replies
Largest* Contentful paint, First contentful paint.
Its not complaining about the file size as much as it is the actual size?
You can look into
srcset to load different size images for different devices/screen sizes.
So if you are loading a 1400x800px img you would also want to only load a 300x50 or w/e img for mobile. That is the jist of it.<img
class="aspect-video"
srcset="{hero400} 400w, {hero600} 600w, {hero800} 800w, {hero1000} 1000w"
sizes="(max-width: 400px) 400px, (max-width: 600px) 600px, (max-width: 800px) 800px, (min-width: 801px) 1000px"
src={hero}
alt="Hero"
width="600"
height="300"
/>
that's my img with the srcset and sizes, where's the wrong part and why?
if you replied make sure to mention me, thanksif you click the bell, then click all messages, you'll get pinged whenever someone says something in a post
I know this way, the another way how is it?
You can do it both ways, I used pug to simplify my test but https://codepen.io/b1mind/pen/VwQRyOv?editors=1010
they do behave differently based on responsiveness (which really only matters if you are resizing not the initial screen size)
You can view it as html maybe to get a better idea
I don’t understand the another way 😭
which part?
you are using a srcset attribute on the img tag
its just a comma separated key/value pair
key: img url value: device or page size.
The 800w….
so that one is based on viewport* or rather width of the page
is going to look at the device DPI/size of the screen.
as I understand it.
For the devices with higher DPI honestly I just do the dirty thing and make sure its a larger image sized down for the display xD
but that is how I would do it proper
Ok, I need to deep on it
interesting, it looks better than the srcset attr
Then the
800w is the same to write media=(min-width: 800)?Kevin Powell
YouTube
srcset and sizes attributes - [ images on the web | part one ]
Using srcset allows us to load in different versions of the same image based on the size of the viewport, or the pixel density of the user's device. This is really helpful as it's one relatively easy way to go about reducing bandwidth for users on lower end devices while ensuring that users on high-end devices get nice, crisp images.
One cool t...
Kevin Powell
YouTube
The HTML picture element explained [ Images on the web part 3 ]
The picture element is a little different than most HTML elements in how it works. It has some similarities to the video and audio element, as it gives us the ability to have different sources and it also uses the srcset attribute, which allows each source to actually have multiple sources... which is a bit strange.
It's a powerful element whic...
old skool Kevin!
your syntax is bad but yea ig xD I'm sure there tech a difference but ya that is the idea. (I'm quickly watching these videos too xD)
Ok, I am going to watch the videos as well
Still watching those videos to understand, 
don’t get it the other way 😢
I am understanding it a little bit
don’t get it the other way 😢
I am understanding it a little bit