Last active
September 11, 2023 18:33
-
-
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)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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 --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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"> | |
“<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
The 4th image is incorrectly getting
loading=lazy
and is omittingfetchpriority=high
, even though it is the LCP image: