UD5 Toolkit
Fragrance Performance Log â Sillage, Longevity & Season
Rate each of your perfumes on projection, longevity, and best season. Build a personal database to choose the right scent for any occasion.
Tag: Website Performance Analyzer
31+ toolsResource 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 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.
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.
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.
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.
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.
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.
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.
Resource Timing Viewer - Online See All Asset Loads
List all resources loaded by the current page and their detailed timing breakdown. Inâbrowser waterfall.
isInputPending() API Demo - Online Yield to User
Demonstrate how to yield heavy computation to user input using the isInputPending API. Keep UI responsive.
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.
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.
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.
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.
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.
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 Benchmark - Online Render Cost
Toggle contentâvisibility: auto on long blocks and see the rendering time difference. Understand this powerful property.
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.
CSS Paint Cost Benchmark - Online Measure Style Performance
Add many complex CSS styles and measure frames per second. Isolate expensive properties. Practical performance lab.
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.
HTTP Link Header Generator - Online Preload & DNSâPrefetch
Construct HTTP Link headers for server push replacements, preload, and preconnect. Copy the header value.
Regex Catastrophic Backtracking Tester - Online Benchmark
Test a regex against long strings and measure execution time. Detect catastrophic backtracking patterns. Visual warning if slow.
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 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.
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.
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.
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.
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.