Explore CSS performance optimizations in Vaadin Grid—borders vs shadows, selector tuning, and faster rendering for large-scale UIs.

Vaadin is a platform for building web applications with Java. Readers can learn about Java web development, UI components, and web application architecture. With tutorials, documentation, and community support, Vaadin offers resources for developers interested in creating modern and scalable web applications.

Vaadin

Vaadin's engineering team shares three CSS optimizations made for Grid and Tree Grid in Vaadin 25 to address severe rendering slowdowns with the new Aura theme. The key fixes were: replacing CSS box shadows (computed via custom properties) with regular borders, cutting rendering time by ~50%; switching from CSS part attribute selectors to class selectors, reducing selector match attempts by 3.5x and improving scrolling frame time from 90ms to 40ms; and registering CSS custom properties that use light-dark() with explicit <color> syntax via the Houdini @property API, reducing Aura rendering time by ~60%. Together these brought a 180-column grid's initial render from ~7.2s down to ~1s.

CSS Performance Optimizations for Grid

Replacing CSS Attribute Selectors with Classes Internally

Registering CSS Custom Properties as Colors Explicitly