Attempt to improve LCP #28
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
RobbieTheWagner
force-pushed
the
lcp-improvements
branch
from
394de0f to
f8b333c
Compare
delucis
left a comment
delucis
left a comment
There was a problem hiding this comment.
Pretty sure none of these are helpful. You can always test, but I don’t think they’d help LCP and are just a bunch of extra code to maintain for little gain.
| @@ -1,3 +1,3 @@ | |||
| <div class="absolute top-0 left-0 flex h-12 w-full justify-center p-2"> | |||
| <div class="bg-dots-light dark:bg-dots-dark h-12 w-full bg-repeat-x"></div> | |||
| <div class="bg-dots-light dark:bg-dots-dark h-12 w-full bg-repeat-x" style="content-visibility: auto;"></div> | |||
There was a problem hiding this comment.
this isn't doin anything
| </div> | ||
| </a> | ||
|
|
||
| <script> |
There was a problem hiding this comment.
| <script> | |
| <script type="module"> |
this essentially does the same thing, allows deferred non-blocking initialization
There was a problem hiding this comment.
Ooh, best not to do this! Astro will bundle this script and make it a module for you. But if you add type="module" yourself, Astro assumes you're in charge and doesn't process it at all, which would break the import.
| /* Ensure LCP image renders quickly */ | ||
| .show-art img { | ||
| content-visibility: auto; | ||
| contain: layout style paint; | ||
| } |
There was a problem hiding this comment.
i dont think this is doing anything either. containment comes with content-visibility, and content-visibility doesnt really do much alone, needs paired with contain-intrinsic-size.
i think what is needed instead is fetchpriority="high" on the image in the HTML + a preload tag if we want. here's some docs https://developer.mozilla.org/en-US/blog/fix-image-lcp/
There was a problem hiding this comment.
Looking at WebPageTest traces earlier, the image already downloads as early as possible. There's a gap between download completion and paint that could maybe be tackled, but I suspect the image itself is already as optimized for loading as possible.
| <div class="relative z-10 mx-auto lg:min-h-full lg:flex-auto"> | ||
| <div | ||
| class="bg-light-card dark:bg-dark-card m-2 rounded-lg pt-10 pb-4 lg:pt-16 lg:pb-12" | ||
| style="contain: layout style;" |
| <div class="relative mt-2 pt-16"> | ||
| <div | ||
| class="bg-gradient-light dark:bg-gradient-dark absolute top-0 right-0 left-0 z-0 h-80 w-full opacity-30" | ||
| style="content-visibility: auto;" |
No description provided.