How to ship interactive charts and still aim for 100 performance

Interactive charts and perfect Lighthouse scores don't have to be mutually exclusive. Traditional approaches often involve a sizable chart library, hydration, and a blank space until JavaScript finishes. However, you can provide real visuals and limited interaction without incurring the performance cost on every page load. This article discusses a "paint-first pipeline" where data is compiled to HTML/CSS, allowing the browser to draw on the first paint, followed by adding interaction as progressive enhancement.

The primary performance concern for Core Web Vitals is blocking the main thread and delaying useful pixels. The chart library cost is typically higher than using a paint-first CSS approach.

The typical JS chart stack incurs increased download and parsing time, while a paint-first CSS chart eliminates this overhead. The paint-first CSS charts provide the chart HTML/CSS in the first response, which is beneficial for SEO and initial crawl. The interaction is optional and built into a separate lightweight runtime.

The pipeline consists of three steps:

1. Compile: Send JSON to a generator (build step or API). Example: ProvChart generates scoped HTML + CSS (custom properties, clip-path, bars, gauges).

2. Paint: Inject the HTML and CSS on the server or at the beginning of the page. No new Chart(ctx, ...) is required.

3. Enhance (optional): Provide runtime interaction through a separate MIT script for tooltips, scroll reveal, legend focus, and more.

"Interactive" can mean something different without a substantial library. Lightweight hover values, runtime tooltips, legend focus, and live data can be achieved through CSS variables or re-calling the generator. For more advanced features like brush/zoom, analytics, or marketing pages, heavy analytics suites may not be necessary.

Checklists for achieving a top performance score include not having a chart library on the critical path, deferring enhancements, respecting reduced motion preferences, optimizing images, minimizing font blocking, splitting products, ensuring accessibility, and providing static site generation or agents for generating charts. While JS chart libraries may still be necessary for complex features like brushing, zooming, or streaming ticks, they should be used deliberately and only where the cost justifies the benefit, not as the default for every sparkline.