← Blog Nyura Blog
Nona Banana celebrating performance improvements

Faster, Smoother, Smarter: Under-the-Hood Performance Polish

How we shaved layout shifts, lazy-loaded heavy charts, improved color picker accessibility, and added browser autofill support — all without changing a single feature.

March 16, 2026 3 min read Cyril Simonnet
PerformanceAccessibilityProduct Update

Eliminating Layout Shifts (CLS)

Cumulative Layout Shift (CLS) is one of Google's Core Web Vitals — it measures how much content jumps around as a page loads. Every image without explicit width and height causes the browser to guess, then recalculate once the image loads. The result: buttons shift, text moves, and users accidentally tap the wrong thing.

In this release, we audited every image in Nyura and added explicit width and height attributes to 8 key images: the main logo in the header and sidebar, playlist artwork in Spotify search, album art on tracks, app icon previews in settings, blog hero images in the admin panel, and avatar previews on business cards.

The fix is invisible to users — but the experience is noticeably smoother. Pages no longer jump during loading, and your Core Web Vitals score gets a boost.

Lazy-Loading Heavy Charts

Recharts is a powerful charting library, but it adds ~80 KB to the bundle. Not every user visits the productivity dashboard where these charts live. So why load them for everyone?

We wrapped the EstimateAccuracyWidget in React.lazy() with a Suspense boundary. Now, the Recharts bundle only downloads when you actually navigate to the dashboard. For everyone else, the main bundle is 80 KB lighter — that's a meaningful difference on mobile networks.

The user sees a subtle loading placeholder while the chart loads, then it fades in smoothly. No flash, no layout jump.

Color Picker Accessibility

Color inputs are notoriously tricky for screen readers. A sighted user sees a color swatch and knows it's a color picker. A screen reader user hears... nothing. The native HTML color input doesn't announce itself well.

We added aria-label attributes to all 4 color inputs across the app: the accent color picker in appearance settings, project color pickers in workflow editor and project list, and initiative color pickers. Each now announces itself clearly: "Custom color" or "Color" depending on context.

Small change, big impact for the ~15% of users who rely on assistive technology.

Browser Autofill & Feature Discovery Badges

Two more quality-of-life improvements in this release:

First, we added proper autoComplete attributes to the business card form — job title, organization, email, phone, and website fields now trigger your browser's autofill suggestions. Filling out your business card just got 5x faster.

Second, we introduced a feature discovery badge system. When we ship new features, a small "New" badge appears next to the relevant settings section. Once you interact with the feature, the badge disappears permanently. This release adds badges for 6 features: passkey authentication, data export, AI task breakdown, audio briefing, weekly briefing, and the public API.

No more missing new features because you didn't read the changelog.

95 End-to-End Tests and Counting

Every feature we ship gets automated tests. This release added 2 new business card E2E tests — one verifying error states for invalid card tokens, another confirming the page renders without crashing. We also added the business card route to our automated WCAG accessibility audit.

The test suite now stands at 1,567 unit tests and 95 Playwright end-to-end tests across 15 spec files. Every public page is tested for loading, rendering, and accessibility. Every push to main triggers the full suite.

Quality isn't a feature — it's the foundation everything else is built on.

Try Nyura for free

Available on iOS, Android, and web. No credit card required.

Get Started →