8000 Optimize rendering/LCP of above the fold images of articles · Issue #103 · tomfran/typo · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Optimize rendering/LCP of above the fold images of articles #103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
runofthemillgeek opened this issue Mar 16, 2025 · 1 comment
Open

Optimize rendering/LCP of above the fold images of articles #103

runofthemillgeek opened this issue Mar 16, 2025 · 1 comment

Comments

@runofthemillgeek
Copy link
Contributor

This is based on the suggestions and discussions in #81 and #87.

Currently, all images have loading="lazy" attribute applied via render-image.html hook. This raises warnings in Lighthouse reports and might lead to delayed load and render times for the images present above the fold causing a large LCP score in Web Vitals reports.

To improve performance and perceived experience, it's better ideally to load and render the images above the fold as fast as possible. For this, it's recommended to not add loading="lazy" and to add fetchpriority="high". See https://web.dev/articles/fetch-priority#increase-lcp-priority

However, we don't have a single "above the fold" size as that depends on the user agents and their screen sizes. Instead, the proposal as per discussions is to apply these optimizations to a constant number of images appearing at the top of the content's markup. For now, we can go with the first 3 images.

So, the overall change proposed:

  1. For the first 3 images in the article:
    1. Add fetchpriority="high"
    2. Do not add loading="lazy"
  2. For remainder of images:
    1. Add loading="lazy"

Optionally, we could add a config for the number of images to optimize.
@runofthemillgeek runofthemillgeek mentioned this issue Mar 16, 2025
Draft
@tomfran
Copy link
Owner
tomfran commented Mar 16, 2025

Really nice middle ground, I'm in favor of loading the first k images in this way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@runofthemillgeek @tomfran
0