Repository navigation
Home page performance: AWS icons on demand, hero map after load - #36
Merged
Merged
Conversation
- ProviderServiceIcon imported @react-icons-cloud/aws statically: ~500 icons in one pre-bundled file that can't be tree-shaken (241 KB, 96% unused on the home page). It now loads the first time an AWS component renders, shared by all of them, with the path glyph until then. - LazyLiveMapHero: on phones the observer fired during hydration, so the map's JavaScript competed with the first paint. When it is only visible it now waits for the load event and requestIdleCallback; interaction still loads it at once. Local production builds, 3 Lighthouse mobile runs each (medians), main vs branch: unused JS 292 -> 43 KiB, TBT 219 -> 177 ms, Speed Index 2,529 -> 2,347 ms, score 84 -> 85. Simulated LCP unchanged (~3.85 s); observed LCP is 224 ms, with the first paint. experimental.inlineCss was tried and dropped (946 KB HTML, score 75). SEO.md: section 11c (measure before optimising) and change-log rows.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the
 |
- Draw edges of one fan on nested 14px lanes (fanLaneSeparation) as the last step of optimizeEdgeRoutes. - Treat groups as passable empty space so edges take the shortest way around cards only (EXP_GROUP_WALLS restores the old walls). - Step edge labels beside the line when every spot on it covers a card. - Give studio-minimal columns a 72px corridor (EXP_NS48 restores 48). - Shared viewer zooms on wheel; MCP preview widget URI bumped to v3.
fix(layout): stabilize edge routing and diagram geometry
This branch was successfully deployed
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.
Summary
Two home page performance fixes, measured against
main, plus anSEO.mdsection on measuring performance. This PR's base is #35's branch, so the twoSEO.mdedits don't conflict. Merge #35 first; GitHub then moves this PR ontomain.components/icons/ProviderServiceIcon.tsx). The@react-icons-cloud/awsset is about 500 icons in a single pre-bundled file that can't be tree-shaken, and it was imported statically into every canvas. On the home page that was a 241 KB chunk, 96% unused, because the hero map shows no AWS components. It now loads the first time an AWS component renders, one load shared by all of them, and the existing path glyph shows until it arrives. The editor, share and embed pages also benefit for diagrams without AWS components.LazyLiveMapHero.tsx). On phones theIntersectionObserverwith a 200px margin fired during hydration, so the map's JavaScript competed with the first paint. When the map is only visible, it now waits forloadplusrequestIdleCallback. Scrolling, moving the pointer, touching or pressing a key still loads it at once.Measurements
Local production builds of
mainand this branch, served the same way; Lighthouse 12 mobile, three runs each, medians.mainexperimental.inlineCss. It inlined all of the app's CSS, producing 946 KB of HTML and a score of 75.Test plan
tscclean; eslint clean on the changed files; component and icon tests pass (63)/, check unused JavaScript and total blocking time