Skip to content

Identifying and Optimising the LCP Image #117

@dainemawer

Description

@dainemawer

This task is something that can be tricky to determine, but if we get it right, I think it could have huge positive effects on WordPress performance. Improving the loading performance of the Largest Contentful Paint image is one of the hallmarks of keeping LCP scores in the green. However, doing so has proven relatively tricky.

In order to reduce LCP, we need to consider a few things:

  1. The size (dimensions of the image)
  2. The resource size (mb) - is the image compressed etc
  3. How its served and where its served from (server vs CDN)
  4. How soon the browser renders the image

There are a number of things out of our control here, especially from a server, caching and infrastructure perspective. But we can look at preloading that image if we can identify that it is in fact the LCP on the page. This spoken about here on web.dev in detail: https://web.dev/optimize-lcp/#preload-important-resources especially for responsive images.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs DiscussionAnything that needs a discussion/agreement[Plugin] Image PrioritizerIssues for the Image Prioritizer plugin (dependent on Optimization Detective)

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions