nuxt.js - Nuxt - images load slowly and shifts the whole layout

Question

I have problem with my Nuxt simple website. The images on page load doesn't load fast enough. It makes all the layout shift and for a while I can only see their alt text. Why nuxt doesn't wait for all the resources? It just downloads like half of the page size and later lazy load the rest.

Answer 1

Many static site generators have image components helping you to handle images on websites. In Nuxt you have:

https://image.nuxtjs.org/

Most of them will provide images in various resolutions including very small (blurred) placeholder images which will be used on first request and which will be replaced on subsequent loading frames. In the frontend it will generate you those <picture><source> html tags.

Apart from that, its of course still possible that you have some other weird HTML/CSS issues going on but i would first try adding such a plugin like the one mentioned. Its good for SEO and pageloading times anyway and always a good idea.

More infos about those html elements can be seen at developer.mozilla.org