UD5 Toolkit
CSS‑in‑JS Runtime Cost Simulator - Online Render 1000 Nodes
Render 1000 styled elements using inline styles vs. CSS classes and compare time. Understand CSS‑in‑JS trade‑offs.
Performance Optimization Tools
27+ toolsJPEG Quality Visual Comparator - Online Side‑by‑Side
Upload an image and see a slider comparison of different JPEG quality levels. Find the optimal file size vs. quality trade‑off.
Paint Timing API Monitor - Online FP, FCP & LCP
Access the Paint Timing API and display First Paint, First Contentful Paint, and Largest Contentful Paint times. Quick perf check.
Navigation Timing API Viewer - Online Page Load Breakdown
See your current page load broken down into DNS, TLS, request, and DOM phases. Understand where time is spent.
WebP Quality Comparator - Online vs JPEG & PNG
Compare your image as JPEG, PNG, and WebP side by side at different quality levels. See the size savings visually.
Resource Timing Viewer - Online See All Asset Loads
List all resources loaded by the current page and their detailed timing breakdown. In‑browser waterfall.
Web Performance Checklist - Online Quick Audit
Answer questions about your page (image size, caching, fonts) and get a tailored list of optimization tips. Manual audit helper.
content‑visibility: auto Benchmark - Online Render Cost
Toggle content‑visibility: auto on long blocks and see the rendering time difference. Understand this powerful property.
Next‑Gen Image Format Comparator - Online AVIF vs WebP vs JPEG XL
Upload one image and see it encoded in AVIF, WebP, and JPEG XL side‑by‑side. Compare quality and file size in your browser.
isInputPending() API Demo - Online Yield to User
Demonstrate how to yield heavy computation to user input using the isInputPending API. Keep UI responsive.
Navigation Timing API Viewer - Online Page Load Breakdown
See your current page load broken down into DNS, TLS, request, and DOM phases. Understand where time is spent.
Critical CSS Extractor - Online Inline Above‑the‑Fold Styles
Paste your full CSS and HTML; automatically identify and extract the styles needed for the visible part. Reduce render‑blocking resources.
Image Compression Visualizer - Online Before/After Slider
Drag a slider to compare your original image with a compressed version (e.g., WebP). See the quality difference and file size savings.
DOM Size Inspector - Online Count & Warn for Performance
Count total DOM nodes on the current page and show warnings if limits exceed best practices. Keep the DOM lean.
content‑visibility: auto Tester - Online Render Deferral
Apply content‑visibility: auto to off‑screen sections and see the rendering cost drop. Demos for infinite scroll optimization.
Regex Catastrophic Backtracking Tester - Online Benchmark
Test a regex against long strings and measure execution time. Detect catastrophic backtracking patterns. Visual warning if slow.
HTML Minifier Comparison - Online See Savings Live
Paste HTML and see a before/after comparison of minified output. Check the byte savings. All local.
CSS contain Property Demo - Online Layout & Paint Isolation
Toggle contain: strict, content, paint, layout and see how it affects rendering. Understand isolation for faster pages.
will‑change Property Visualizer - Online GPU Hint Tool
Apply will‑change to any element and see its effect on compositing. Learn best practices for smooth animations.
Core Web Vitals Simulator - Online Learn How to Improve LCP/INP/CLS
Adjust page characteristics (image size, server delay, layout shift) and see the simulated Core Web Vitals scores. Understand what impacts performance.
Brotli Compression Level Tester - Online Optimal Setting
Compress text with Brotli at different quality levels. See size reduction and time. Find the sweet spot for your static assets.
Image vs. SVG Weight Comparator - Online Byte‑for‑Byte
Paste a raster image and an SVG, see the file size and rendering time. Understand when to use vector. Local.
CSS Paint Cost Benchmark - Online Measure Style Performance
Add many complex CSS styles and measure frames per second. Isolate expensive properties. Practical performance lab.
3rd‑Party Script Impact Analyzer - Online See Cost
Enter a URL and see a waterfall of external scripts with their download size and execution time estimate. Identify performance culprits.
Web Font Subset Generator - Online Reduce Font Size
Enter the characters you need and generate a smaller font file from a TTF/OTF. Keep only the glyphs you use. Using harfbuzz WASM.
Live Web Vitals Monitor - Online Real‑Time LCP, INP, CLS
Patch the PerformanceObserver and show your page’s Core Web Vitals as you browse. See real‑time scores and suggestions.
Long Task Detector - Online Identify INP Bottlenecks
Start recording and watch for Long Tasks that block the main thread. See task duration and attribution. Improve Interaction to Next Paint.