Images prefetch instead of lazy loading
I analyzed a page in GT Metrix to see the performance of our page. We have the recommendation to not lazy load Largest Contentful Paint image. On default all the images are on lazy load which is generally speaking fine.
However I want to preload images that are above the fold, so the rendering will be faster.
We added images in the builder page with an image block. But in this image block I can’t add fetchpriority=“high”. Is there a way to do this?
Or do I have to add images that I want to give fetchpriority=“high” as an custom code block, so I can add it as html. ?
Builder content link
Builder public api key
d0689e89408f48c29d9edda8d29a6894
All Builder content is fully server-side serializable to HTML. This means we can pre-render all content to optimized HTML, and remove all blocking scripts or styles. This way we can deliver content as very lightweight HTML and lazily load any additional JS, CSS, etc. for interactive elements which are hydrated after the initial load.
We do this in a modern style similar to Gatsby, Next.js, and Nuxt - and can work within any of those frameworks (and others!) natively as well.
If you wish to add fetchpriority=“high” attribute to a specific image you can use the below JS code
let image = document.querySelector('.class-name-of-image');
image.setAttribute('fetchpriority' , 'high');
You can also check out our Qwik API, which is our new, ultra-performance optimized alternative to our HTML API. It uses Qwik to prerender your content to optimized HTML that requires 0 JS to run (even if it has dynamic content!)
