This is a guide to optimizing image loading I created for my colleagues. It contains live examples of resource loading issues related to the priority assigned by a browser.
Quick Look at the Best Practices
- The LCP image and/or an important image in the viewport should have a high priority
- If the browser is getting confused, we can help by assigning hints > the fetchpriority HTML attribute
- Images in the viewport shouldn't be lazy-loaded
Detailed Resources You Can Look at:
Set up Chrome Dev Tools
- Network panel > Settings > Enable "Big request rows"
- Network panel > Disable Cache
- Network Panel > Right click on a resource > Header Options > Enable "Priority"
Live Examples
CasinoToppListan
We can see here that the browser initially assigned a "Low" priority for the first toplist operator logo but then reevaluated and assigned "High".
Solution: We can save this time by setting up a fetchpriority="high" attribute to the first toplist operator logo.
CasinoTopsOnline
We can see that the fetchpriority attribute was confused due to the redesign and now footer logos have a higher priority than the highlighted operator logo on top of the page.
Solution: We are going to remove all fetchpriority attributes because the browser is pretty good at assigning them itself and add a fetchpriority="high" just to the operator logo on top of the page.
CasinoSpesialisten
www.casinospesialisten.net/casinoomtaler
We can observe here that the menu icon doesn't show at all in the beginning, making the page look as if something is broken. In the network tab, we can see that the priority for this image is "Low". If we search for the icon menu-icon.svg we will see that it is lazy-loaded.
Solution: Removing the lazy-load for this asset would solve all issues here.
JohnSlots
There are a couple of things we notice here:
- The flags, which are hidden in a dropdown, have a higher priority than the header banner and the first toplist operator logo because they are higher up on the page
- The header banner is assigned a "Low" priority at first and only after re-evaluation a "High" one
- The first toplist operator logo has loading="eager" but the resource itself is initiated by lazyload.min.js script, which means it is lazy-loaded via javascript anyway.
Solution: The flags can be assigned a fetchpriority="low" to avoid them being loaded first. The header banner can be given a fetchpriority="high" to help the browser assign it the right priority from the very beginning. And how lazy-loading is being handled can be thought through again.
Back to portfolio home