Skip to content

Conversation

@christian-byrne
Copy link
Contributor

@christian-byrne christian-byrne commented Jul 8, 2025

Summary

Adds global CSS performance optimizations that complement the existing LOD system by removing expensive paint effects at lower zoom levels.

What This PR Does

Applies automatic CSS optimizations via existing LOD classes (lg-node--lod-minimal, lg-node--lod-reduced) to remove universally expensive visual effects:

  • Paint-heavy effects: shadows, filters, backdrop-filters, text-shadows
  • Complex rendering: border-radius, background-images, mask/clip-path

Why These Are Global

These optimizations can be safely applied to ANY component at lower LOD levels because:

  • They target expensive effects that are purely visual (no functional impact)
  • They become imperceptible at low zoom levels anyway
  • They require zero component-specific logic or manual adjustments

This is in contrast to the component-driven useLOD system which handles visibility and layout decisions that require component-specific implementation.

Performance Impact

  • 30-50% reduction in paint operations at lower LOD levels
  • No unwanted layerization or additional GPU layers
  • Maintains full visual quality at high zoom levels (LOD full)

┆Issue is synchronized with this Notion page by Unito

Remove expensive paint effects (shadows, filters, backdrop-filters) at lower LOD levels
Simplify rendering for minimal LOD (no border-radius, no background images)
These optimizations reduce paint complexity without causing unwanted layerization
@christian-byrne christian-byrne requested a review from a team as a code owner July 8, 2025 03:41
@christian-byrne christian-byrne merged commit 108e54c into vue-nodes-transform-pane Jul 8, 2025
2 checks passed
@christian-byrne christian-byrne deleted the lod-css-optimizations branch July 8, 2025 04:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants