perf: add decoding=async to lazy images, fix architecture eager load,…#112
Merged
Conversation
… preload hero bg - Add `decoding="async"` to all lazy-loaded images (AvatarLink, Footer, BoardSection, BottomCTA, DiscussionSection, Sponsors) so image decoding happens off the main thread - Change ArchitectureSection diagram from `loading="eager"` to `loading="lazy" decoding="async"` — the diagram is below the fold on challenge detail pages - Add `links()` export to About.tsx with `rel="preload"` for nyx_peek.webp, which is the above-fold hero background image that the browser cannot discover until after CSS layout - Add `aria-labelledby` + matching `id` to Hero, PageHero, and ChallengesGrid sections for improved landmark navigation - Update CLAUDE.md, PERFORMANCE.md, README.md, styleguide.md, ADVENTURES.md, CONTRIBUTING.md with doc fixes from prior work Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
Contributor
|
- Add /brand route with BrandGuidelines.tsx covering logo, colors, typography, mascot, and voice and tone - Move logo SVGs from src/assets/ to public/brand/ so they are accessible as stable downloadable assets with no Vite hash - Replace Sponsors nav link in footer with Brand - Wire up route in src/routes.ts, react-router.config.ts, public/sitemap.xml - Update Navbar and Footer to reference logos via import.meta.env.BASE_URL paths - Update footer test, prerender test, SEO test, and e2e smoke spec for the new route - Document Brand Guidelines page in styleguide.md and add hover contrast rules to ACCESSIBILITY.md Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
- Lighten ColorCard panel background and border so swatches are legible on the light preview surface - Adjust HSL label and code block background tints for better contrast Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
…brand page - Promote h4 to h3 in Photography (Use/Avoid/When photos) and Accessibility (Color and contrast/Interaction and motion) sections to fix heading-order WCAG violations where h2 jumped directly to h4 - Fix hover color contrast in Navbar/Footer: replace hover:text-primary with hover:text-foreground dark:hover:text-primary so light mode gets an accessible dark color instead of amber on a light surface - Remove Sponsors from footer Explore nav to equalise link count (5 each side); Brand link takes its place Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
…t to AAA - Replace dark/light mode toggle with side-by-side panels, each always rendering its own mode's surface colors - Remove difficulty badge swatches from both palettes (feature-level detail, not brand colors) - Add link hover entry to dark mode palette - Fix light mode starter/builder badge token values to match CSS (80%, 75% lightness) - Raise body text contrast target to 7:1 WCAG AAA in brand page and ACCESSIBILITY.md - Fix empty space in dark panel by adding items-start to grid - Lighten dark mode card borders for visibility (#1d293f -> #2e4268) - Add role=list to Accessibility page lists - Add light pill-inactive hover rule to index.css Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
…rs, update styleguide - Remove dead `.light .pill-inactive:hover` block that was always overridden by the later rule with `box-shadow: none` and `border-color` - Add `loading="lazy"`, `decoding="async"`, and explicit `width`/`height` to all below-fold images on the brand page (logo cards, icon marks, nyx, og) - Update styleguide Brand Guidelines entry to reflect side-by-side panels with `dark: boolean` prop — the `colorMode` toggle was removed Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.com>
- Replace <a href> with React Router <Link to> for the Accessibility Statement link - Add Brand Guidelines entry to public/llms.txt Signed-off-by: Sinduri Guntupalli <sinduri.guntupalli@dynatrace.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.
… preload hero bg
decoding="async"to all lazy-loaded images (AvatarLink, Footer, BoardSection, BottomCTA, DiscussionSection, Sponsors) so image decoding happens off the main threadloading="eager"toloading="lazy" decoding="async"— the diagram is below the fold on challenge detail pageslinks()export to About.tsx withrel="preload"for nyx_peek.webp, which is the above-fold hero background image that the browser cannot discover until after CSS layoutaria-labelledby+ matchingidto Hero, PageHero, and ChallengesGrid sections for improved landmark navigationType of change
featnew featurefixbug fixrefactorno behavior changedocs/chore/config/perf/style/security