nuxt / nuxt/image

Components or presets for LCP and lazy elements

Open
#1,820 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
1.5k
Forks
331
Avg merge
19h 52m
Merged PRs (30d)
9

Description

Hey there!

I recently thought about a feature addition to the Nuxt Image that will deliver following functionality in form of additional component or a preset:

  1. Largest Contentful Paint element that will not be lazy loaded, will have a fetchPriority high, preload, and maybe more
  2. Lazy element, that will have loading lazy, fetchPriority low, etc.

This way, users would be able to just set a preset for the element that they want to be loaded first (LCP) and the ones that can be loaded after (i.e icons in the footer).

WDYT?

I am happy to contribute with this change if you think that it will make sense :)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing Nuxt Image's existing component and preset APIs to determine where LCP and lazy-loading behavior could fit. Done means the project has agreed on the component or preset scope and its expected loading, priority, and preload behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt
Domain
frontend, performance, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.