@chazeichazy the score with that tool doesn't equal to actual speed, it's common for the score to fluctuate randomly, and it can fluctuate when clearing certain warnings. We don't know their exact algorithm for estimating score so we did a case study to show that optimizing your site and making it faster can actually make the score go down (like in your case): https://speedboostr.com/case-study-google-psi.
Sorry, I disagree with many things on this thread.
Network is not the perf bottleneck anymore. Considering this store audience I would guess that most of the users are on high-end devices with good connections.
The src attribute is required for the HTML img element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img. Don't break the web.
@Mircea_Piturca i always love a differing opinion! since I've already went ahead and implemented LL with js, would it be even worth it to go back just to replace it with native LL? can you actually see a performance benefit to using native?
The lazy loading mechanism can also trigger additional perf implications. To lazy load an image, on each scroll event, you need to get the image size and compare its position to the viewport. Getting the image size in JS triggers a layout reflow. This needs to happen for all images you are lazy loading, on each scroll event.
The native lazy loading makes the browser handle all of these operations. The browser has more heuristics and can decide what and when to load. It gives a much smoother user experience.
I can not advise you on what to use. The native lazy load has global support of 70~75%. But if you look at your user's you may find that it is much higher. I would expect people looking for a "thermal temperature scanner" to be on new devices with decent connections.
There may be cases when you want to use a JS approach, performance optimization is really about numbers.
Hey @chazeichazy ,
I think by just lazy loading image is not going to help you achieving good score in mobile and not going to make you website load fast, to make your website load fast and achieve good score on mobile you need to follow all steps i have gave you earlier or contact me for any help to make you website fast
If your using the native lazyloading attribute, then you would want to remove the data-src and have a src for your image.
Keep in mind that like was said above, native lazyloading has 70% full browser support. Safari is one of the browsers that don't support it, so any Iphone user will not Lazyload the images on your site, this could be a serious performance hit to them, depending on how many images you have.
Also, you cannot apply native lazyloading to background images.