Repository navigation
perf(sites): optimize article and feed images; record Phase 1 measurements (#71) - #142
Merged
Merged
Conversation
…er (#71) The Image primitive rendered the original URL, so blog post, docs and feed images skipped next/image. It now uses the same resolver as block images, and article hero images load eagerly at high priority. The resolver lives on globalThis: /server and /primitives/server each bundle their own copy of the module, so registering it through one entry didn't reach the other.
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of #75, closes the remaining work in #71 (the code from #78 was merged without measurements).
Change
Imageprimitive now goes through the host's image resolver, like block images. Blog post, docs and blog-feed images now go throughnext/image(resized, modern formats). Article hero images load eagerly withfetchpriority="high"; feed images are lazy.globalThis./serverand/primitives/servereach bundle their own copy of the module, so registering it through one entry never reached the other. That's why these images were still full-size originals after Improve public site rendering performance #78.Measurements (Lighthouse 13, mobile, simulated throttling, median of 5)
Sample tenant: homepage with 9 blocks and 8 images, 12 docs, 7 posts. Baseline =
f8787cb(main before #78).This PR, on the blog post: image bytes 172 KB → 44 KB. LCP is a text paragraph on docs and blog. The small LCP change there is within run-to-run variance (first-run values 3.18 s vs 3.30 s) and comes from render-blocking CSS and the larger server-rendered HTML document on simulated slow 4G, not from images.
CLS is 0 everywhere.
Testing
page-builderandsitesunit tests pass; sites typecheck passes./_next/image, feed images areloading="lazy", and none are broken.Not covered: images embedded inside TipTap content (docs/blog bodies) are rendered by
@frontlit/text-editor, which has no resolver yet. That's a follow-up.