Menu
I am currently trying to update my Website using the new loading="lazy" attribute as shown here: https://web.dev/native-lazy-loading
As seen in the video, everything works as expected, but compared with my waterfall diagram in chrome, it doesn't.
How it looks:
How it should look:
This is how its implemented:
<img class="has-border" src="https://andreramoncombucket.s3.amazonaws.com/static/assets/img/work/personal-website/pw_full.jpg" style="object-fit: cover;" alt="..." loading="lazy">
801
If you're not sure if lazy loading is working correctly, you can open the Chrome DevTools and check that the images are not loaded until the scroll.
It's because you haven't added routing to your student module. The student module needs to use . forChild() when declaring routes since it is a child module. Save this answer.
To enable lazy load in WordPress, go to the “Perfmatters” settings in your WordPress admin dashboard. Click on the “Lazy Loading” tab. There are a few different options you have when it comes to lazy loading. They can also be used together at the same time.
The loading attribute specifies whether a browser should load an image immediately or to defer loading of off-screen images until for example the user scrolls near them. Tip: Add loading="lazy" only to images which are positioned below the fold.
I had a similar problem, and after some research, I found the solution:
Just need to add width and height to the IMG tag, this is because the browser needs to know the size of the element before applying lazy loading.
Your code:
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy">
Your code after adding width and height:
<img class="has-border" src="..." style="object-fit: cover;" alt="..." loading="lazy" width="200px" height="200px">
Another alternative is using inline style:
<img class="has-border" src="..." style="object-fit:cover; height:200px; width:200px;" alt="..." loading="lazy">
Take into consideration I just randomly set the dimensions of the IMG tag to 200px. You can find more information on this web.dev article
hope it helps 👍
191
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
