search

fastify / website-metalsmith

This project is used to build the website for fastify web framework and publish it online.
https://www.fastify.io
MIT License
73 stars 132 forks source link

Optimize `<img />` loading 🖼️ #372

Closed sanjaiyan-dev closed 2 years ago

sanjaiyan-dev commented 2 years ago

Optimize <img /> loading 🖼️

netlify[bot] commented 2 years ago

Deploy Preview for fastify-website ready!

Name Link
Latest commit 4e164cb26ed0296268db5f818976f629d3b8fea3
Latest deploy log https://app.netlify.com/sites/fastify-website/deploys/6336c3f76b65a00008e7c4ad
Deploy Preview https://deploy-preview-372--fastify-website.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

sanjaiyan-dev commented 2 years ago

Optimize <img /> loading 🖼️

For more information about lazy loading -: https://web.dev/browser-level-image-lazy-loading

luisorbaiceta commented 2 years ago

Does not affect large contentful paint so I agree with parallelizing and lazy loading the assets. It does affect cumulative layout shift in the organizations page though. Could you fix that? The height property will let the browser know beforehand how much space has to save to avoid this issue

jsumners commented 2 years ago

The height property will let the browser know beforehand how much space has to save to avoid this issue

Yes please. I really dislike it when a site shifts around because image heights were not specified.

sanjaiyan-dev commented 2 years ago

Hope I did it correctly :)