High-Performance Web UI with Web Components

Discover strategies for creating high-performance web UIs using Web Components in this conference talk from the Reliable Web Summit 2021. Explore techniques to measure and optimize Web Components, including tree shaking for components, icons, and CSS, bundling strategies with Webpack and Rollup, CDN support for micro-frontends, and tracking performance regressions through CI automation and Lighthouse. Gain insights into building lightweight and consistent UIs for any web application, covering topics such as component-level tree shaking, side effects, icon optimization, CSS performance improvements, browser rendering techniques, and automated performance benchmarking. Learn how to leverage Web Components to enhance your web development skills and create more efficient, scalable user interfaces.

Introduction
Welcome
About me
Web Components
Example Web Component
Web Component Performance
Dependencies
Build Targets
Code
Components
Tree Shaking
Component Level Tree Shaking
Side Effects
Registration
Icons
CDN Performance
Import Maps
CSS Performance
Text Compression
CSS Custom Properties
Tree Shake with CSS
Purge CSS
Browser Rendering
CSS Contain
CSS Content Visibility
Performance
Render Time
Measure and Automate
Tree Shake
Lightweight Components
Performance Benchmarks
Resources