perf(web): inline CSS and lazy-load third-party scripts for mobile LCP - #25
Merged
Merged
Conversation
Mobile LCP p75 was 3.02s after the TTFB fixes in #19/#22/#23 — over the 2.5s CWV gate. TTFB is no longer the bottleneck (186ms); the remaining cost is on the render path: 1. Render-blocking external CSS: a 37KB stylesheet served as an external file (Astro's `auto` threshold is 4KB). On slow 4G that is a full round trip before first paint, and the LCP element is text that cannot render until CSS arrives. Inlining it into a `<style>` tag via `build.inlineStylesheets: 'always'` eliminates the round trip — the HTML grows by 37KB but ships in the same response as the content it styles. 2. Third-party scripts competing for bandwidth: Clarity (~1KB loader), `sassmaker.com/project-strip.js` (23KB), and `sassmaker.com/ai-chat-footer.js` (48KB) were all `defer`/`async`, so they did not block rendering, but they initiated downloads that stole bandwidth from the CSS on slow 4G. Wrapping all three in a `requestIdleCallback` lazy loader (1.5s `setTimeout` fallback) keeps them off the critical path entirely. They still load and function — just after the page is interactive. System fonts (Iowan Old Style, Inter) are used throughout, so there is no web-font loading delay to address. Refs #11 Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
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
1 participant
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.
Summary
Mobile LCP p75 was 3.02s after the TTFB fixes in #19/#22/#23 — over the 2.5s CWV gate. TTFB is no longer the bottleneck (186ms); the remaining cost is on the render path.
Two changes, both in the web app:
Inline CSS (
build.inlineStylesheets: 'always'). The 37KB stylesheet was served as an external file (Astro'sautothreshold is 4KB). On slow 4G that is a full round trip before first paint, and the LCP element is text that cannot render until CSS arrives. Inlining eliminates the round trip — the HTML grows by 37KB but ships in the same response as the content it styles.Lazy-load third-party scripts. Clarity,
sassmaker.com/project-strip.js(23KB), andsassmaker.com/ai-chat-footer.js(48KB) weredefer/asyncbut still initiated downloads that stole bandwidth from the CSS on slow 4G. Wrapping all three inrequestIdleCallback(1.5ssetTimeoutfallback) keeps them off the critical path. They still load — just after the page is interactive.System fonts (Iowan Old Style, Inter) are used throughout, so no web-font loading delay.
Test plan
pnpm qualitygreenpnpm --filter @on-record/web buildgreen — no external CSS files in distRefs #11
Generated with Devin