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.
Tag: Website Performance Analyzer
30+ toolsPaint 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.
Web Page Resource Analyzer - Online List Assets & Size
Fetch a page and list all loaded assets (CSS, JS, images) with their sizes. See total page weight. Quick performance check.
Resource Timing Viewer - Online See All Asset Loads
List all resources loaded by the current page and their detailed timing breakdown. In‑browser waterfall.
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.
Resource Hint Generator - Online Preload, Prefetch, Preconnect
Build <link> tags for preload, prefetch, preconnect, and dns‑prefetch. Improve page load speed with correct priorities. Copy the optimized HTML.
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.
Rendering Intent Hint Demo - Online content‑type CSS
Test how `content‑type: text/html` vs `content‑type: image/svg+xml` affects SVG rendering in the browser. Modern performance hint.
HTTP Link Header Generator - Online Preload & DNS‑Prefetch
Construct HTTP Link headers for server push replacements, preload, and preconnect. Copy the header value.
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.
WebGPU Compute Benchmark - Online GPU Performance Test
Measure your browser's GPU compute power using a simple WebGPU matrix multiplication. See raw FLOPS and compare with peers. Fully client‑side.
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.
JavaScript Memory Heap Checker - Online performance.memory
Display used/total/limit JS heap size using performance.memory. Take snapshots and see growth. Simple memory leak detection.
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.
Regex Catastrophic Backtracking Tester - Online Benchmark
Test a regex against long strings and measure execution time. Detect catastrophic backtracking patterns. Visual warning if slow.
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.
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.
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.
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.
Web Worker Heavy Task Demo - Online Non‑Blocking
Run a CPU‑heavy calculation (e.g., prime numbers) in a Web Worker and see the UI stay responsive. Code snippet provided.
Web Worker Fibonacci Demo - Online Non‑Blocking Calculation
Calculate large Fibonacci numbers in a Web Worker. See the UI remain responsive. Copy the pattern for your app.
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.
Live Website Audit Checker - Online Quick SEO & Performance
Enter a URL and get a one‑page report of titles, description, headings, image alts, and broken links. All from browser.
Page Speed Simulator - Online Estimate Load Metrics
Enter a URL and get a rough client-side performance simulation: request count, DOM size, and potential speed tips. No real Lighthouse.