Thanks for sharing!! I'd reduce the image width and height on some of those images like in the hero they are set to over 2000px but only need to be like 600 or so. will load a lot faster
Thanks John!! I'll get into that ๐ Do you recommend any tool to test site speed?
If I change the width and height in here, does that improve the speed or should I reupload a new image?
Tool: lighthouse in chrome
itll change the speed. So those dimensions are used to create optimized versions of the image. If you put in 5000 pixels, the largest optimized version will be 5000 pixels but if you put 500 pixels then the largest optimized version will be 500. Even though both are optimized, the 5000 is going to still be much bigger file size than 500
That's amazing! Makes life much more easy ๐ Thank you
I lowered all the images to 600-900 width and the corresponding heigth. Went up from 66 to 67 in performance. Lighthouse says that this h1 title is most heavy to render. Any clue why that might be?
hm i would expect more than that. That's just saying that it took 6 seconds to get the LCP which happens to be the title entering the screen (LCP is when most of the content is present more or less) so something is taking 6 seconds before the title renders. will look..
1 set images above the folder to eager load, not lazy
Ah yes I remember that from oleg in the meetup
Only the first image(s) from the first view, right?
Only one or can be multiple?
im getting 94 on mobile. The first time the images load they take longer to render because they are getting optimized. maybe you ran the test on the first render?
multiple. anything above the fold
Which folder do you mean?
LCP measures when most of the content is loaded in the viewport. So if your images are lazy, they'll be delayed in loading which will affect LCP. Anything below the fold you can set to lazy
"fold" is what's visible without scrolling
comes from newspapers where they would come folded. above the fold is what was visible without unfolding it
Mmm my performance dropped from 66 to 59 after eager load of images ๐ฎ
hm wonder why we are getting such different results. also you have a lot of fonts. these hurt performance
Didn't know they could hurt performance! I'll clean those up
try to get rid of as many fonts as possible
says somthing about swiper have multiple scripts too
Can I remove the weights of the font as well or only all or nothing here?
I used the one from the marketplace and duplicated it a bunch of times
I guess all or nothing then on upload only select the ones you need
only load the script once. browsers prevent it loading multiple times but idk maybe its causing some perf issue
It seems to be in a Slot as HTML Embed, that should do it once, right?
but the slot is present like 5 times so that means script is present 5 times
Gotcha! Just removed the slots and it still works. It's these little things to wrap my head around, but now I know ๐