LCP Image Preload Improvement Suggestion

  • Resolved drazon

    (@drazon)


    2 years, 4 months ago

    Hi Frank,

    Right now the LCP image field accepts a url which in a proper design will preload either the image served on a desktop or an image served on a mobile (depending which size will somebody use in the field).

    There is no way to cover both, the way it is now unless it is the same url. However by accepting an ID and modifying a bit the output code it can properly preload any image served inside an tag by wordpress which has imagesrcset and imagesizes.

    The output shoud be slightly be modified like this
    <link rel="preload" href="..." as="image" imagesrcset="..." imagesizes="..." fetchpriority="high">

    this is tested on both mobile and desktop and the correct image size is preloaded and chrome doesn’t throw any warning at the console for preloading a non used image.

    Please give it a try,
    Thank you in advance

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter drazon

    (@drazon)

    Wait… last time I checked this was as I described above (at least I think…). I just checked right now on a website and if I use an absolute url of an image it outputs the image with imagesrcset and imagesizes. Was this functionality applied in a recent update or was I blind and never saw it?

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    It was there already, but the entry in the “metabox LCP preload”-field (which does not have to be absolute) has to be found (exactly) in a responsive <img tag (as part of either image optimization OR image lazyload in AO ??

    If your theme does not support responsive images, the AO preload will not be responsive either.

    Only if while processing images (again for shortpixel-based optimization or lazyload) there is no match of the “metabox LCP preload”, AO as a fallback adds a simple link preload for that image specifically.

    hope this clarifies,
    frank

    Thread Starter drazon

    (@drazon)

    Thank you Frank for the detailed explanation, well in that case I guess I was half-blind… ?? Ok then, so another recommendation what about a global field to preload the logo of a website like:

    <link rel="preload" href="...." as="image" imagesrcset="...normal-logo.png 1x, ...retina-logo.png 2x" imagesizes="" fetchpriority="high">

    this will cover retina screens as well.

    Plugin Author Optimizing Matters

    (@optimizingmatters)

    given logo’s generally are part of the HTML as an <img src they are discovered very early by the browser, so preloading those is usually not very useful (and preloading too much can be counter-productive).

    that being said; I’ll add a filter to the preload array in autoptimizeImages.php so you can add whatever you want there (including the logo) in order not to force you to do it on a per-page base ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘LCP Image Preload Improvement Suggestion’ is closed to new replies.