Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save westonruter/af852e61cfbe896691abd62faf4ed856 to your computer and use it in GitHub Desktop.
Save westonruter/af852e61cfbe896691abd62faf4ed856 to your computer and use it in GitHub Desktop.
Demonstration of blocks in post content that cause fetchpriority to be omitted on the LCP image (and from all images)
<!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column {"layout":{"type":"default"}} -->
<div class="wp-block-column"><!-- wp:image {"align":"center","id":112,"sizeSlug":"thumbnail"} -->
<figure class="wp-block-image aligncenter size-thumbnail"><img src="http://localhost:8889/wp-content/uploads/2023/09/image-150x150.jpeg" alt="" class="wp-image-112"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"align":"center","id":113,"sizeSlug":"thumbnail"} -->
<figure class="wp-block-image aligncenter size-thumbnail"><img src="http://localhost:8889/wp-content/uploads/2023/09/image-1-150x150.jpeg" alt="" class="wp-image-113"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"align":"center","id":114,"sizeSlug":"thumbnail"} -->
<figure class="wp-block-image aligncenter size-thumbnail"><img src="http://localhost:8889/wp-content/uploads/2023/09/image-2-150x150.jpeg" alt="" class="wp-image-114"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:image {"id":115} -->
<figure class="wp-block-image"><img src="http://localhost:8889/wp-content/uploads/2023/09/image-3.jpeg" alt="" class="wp-image-115"/><figcaption class="wp-element-caption">"<a href="https://www.rawpixel.com/image/8718239/photo-image-moon-space-planet" target="_blank" rel="noreferrer noopener">Taken by Apollo 8 crewmember</a>"/ <a href="https://creativecommons.org/publicdomain/zero/1.0/?ref=openverse" target="_blank" rel="noreferrer noopener">CC0 1.0</a></figcaption></figure>
<!-- /wp:image -->
<div
class="wp-block-columns is-not-stacked-on-mobile is-layout-flex wp-container-9 wp-block-columns-is-layout-flex"
>
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-thumbnail">
<img
decoding="async"
width="150"
height="150"
src="http://localhost:8889/wp-content/uploads/2023/09/image-150x150.jpeg"
alt=""
class="wp-image-112"
/>
</figure>
</div>
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-thumbnail">
<img
decoding="async"
width="150"
height="150"
src="http://localhost:8889/wp-content/uploads/2023/09/image-1-150x150.jpeg"
alt=""
class="wp-image-113"
/>
</figure>
</div>
<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image aligncenter size-thumbnail">
<img
decoding="async"
width="150"
height="150"
src="http://localhost:8889/wp-content/uploads/2023/09/image-2-150x150.jpeg"
alt=""
class="wp-image-114"
srcset="
http://localhost:8889/wp-content/uploads/2023/09/image-2-150x150.jpeg 150w,
http://localhost:8889/wp-content/uploads/2023/09/image-2-300x300.jpeg 300w,
http://localhost:8889/wp-content/uploads/2023/09/image-2-768x768.jpeg 768w,
http://localhost:8889/wp-content/uploads/2023/09/image-2.jpeg 1024w
"
sizes="(max-width: 150px) 100vw, 150px"
/>
</figure>
</div>
</div>
<figure class="wp-block-image">
<img
decoding="async"
loading="lazy"
width="1300"
height="1300"
src="http://localhost:8889/wp-content/uploads/2023/09/image-3.jpeg"
alt=""
class="wp-image-115"
srcset="
http://localhost:8889/wp-content/uploads/2023/09/image-3.jpeg 1300w,
http://localhost:8889/wp-content/uploads/2023/09/image-3-300x300.jpeg 300w,
http://localhost:8889/wp-content/uploads/2023/09/image-3-1024x1024.jpeg 1024w,
http://localhost:8889/wp-content/uploads/2023/09/image-3-150x150.jpeg 150w,
http://localhost:8889/wp-content/uploads/2023/09/image-3-768x768.jpeg 768w
"
sizes="(max-width: 1300px) 100vw, 1300px"
/>
<figcaption class="wp-element-caption">
&#8220;<a
href="https://www.rawpixel.com/image/8718239/photo-image-moon-space-planet"
target="_blank"
rel="noreferrer noopener"
>Taken by Apollo 8 crewmember</a
>&#8220;/
<a
href="https://creativecommons.org/publicdomain/zero/1.0/?ref=openverse"
target="_blank"
rel="noreferrer noopener"
>CC0 1.0</a
>
</figcaption>
</figure>
@westonruter
Copy link
Author

The 4th image is incorrectly getting loading=lazy and is omitting fetchpriority=high, even though it is the LCP image:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment