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.
UD5 Toolkit
Measure FP, FCP & LCP in real-time – right in your browser
Enter a relative path (e.g., /about or page.html) to measure its paint timings. The page will be loaded inside a hidden iframe. Cross-origin URLs are not supported due to browser security.
FP marks the time when the browser renders the first pixel on the screen. It represents the very first visual change, even if it’s just a background color change.
FCP measures the time until the first text, image, or non-white canvas element is painted. It gives a better sense of when useful content appears.
LCP reports the render time of the largest image or text block visible within the viewport. It's a core Web Vital for measuring perceived loading speed.
Minimize render-blocking resources (CSS/JS), use efficient font loading, and reduce server response time. Preload key assets and eliminate unnecessary code.
LCP may update as the page loads and larger elements appear. The final LCP is usually recorded after the page is fully interactive. Our tool listens for the latest entry.
Google recommends FP/FCP under 1 second for a good experience, and LCP under 2.5 seconds. Values above 4 seconds (LCP) are considered poor.
Rate each of your perfumes on projection, longevity, and best season. Build a personal database to choose the right scent for any occasion.
Render 1000 styled elements using inline styles vs. CSS classes and compare time. Understand CSS‑in‑JS trade‑offs.
Toggle content‑visibility: auto on long blocks and see the rendering time difference. Understand this powerful property.
Test how `content‑type: text/html` vs `content‑type: image/svg+xml` affects SVG rendering in the browser. Modern performance hint.
Construct HTTP Link headers for server push replacements, preload, and preconnect. Copy the header value.
List all resources loaded by the current page and their detailed timing breakdown. In‑browser waterfall.
See your current page load broken down into DNS, TLS, request, and DOM phases. Understand where time is spent.
Demonstrate how to yield heavy computation to user input using the isInputPending API. Keep UI responsive.
Calculate large Fibonacci numbers in a Web Worker. See the UI remain responsive. Copy the pattern for your app.
See your current page load broken down into DNS, TLS, request, and DOM phases. Understand where time is spent.
Adjust page characteristics (image size, server delay, layout shift) and see the simulated Core Web Vitals scores. Understand what impacts performance.
Test a regex against long strings and measure execution time. Detect catastrophic backtracking patterns. Visual warning if slow.
Compress text with Brotli at different quality levels. See size reduction and time. Find the sweet spot for your static assets.
Enter a URL and see a waterfall of external scripts with their download size and execution time estimate. Identify performance culprits.
Paste your full CSS and HTML; automatically identify and extract the styles needed for the visible part. Reduce render‑blocking resources.
Build <link> tags for preload, prefetch, preconnect, and dns‑prefetch. Improve page load speed with correct priorities. Copy the optimized HTML.
Start recording and watch for Long Tasks that block the main thread. See task duration and attribution. Improve Interaction to Next Paint.
Fetch a page and list all loaded assets (CSS, JS, images) with their sizes. See total page weight. Quick performance check.
Answer questions about your page (image size, caching, fonts) and get a tailored list of optimization tips. Manual audit helper.
Measure your browser's GPU compute power using a simple WebGPU matrix multiplication. See raw FLOPS and compare with peers. Fully client‑side.
Paste a raster image and an SVG, see the file size and rendering time. Understand when to use vector. Local.
Count total DOM nodes on the current page and show warnings if limits exceed best practices. Keep the DOM lean.
Add many complex CSS styles and measure frames per second. Isolate expensive properties. Practical performance lab.
Apply content‑visibility: auto to off‑screen sections and see the rendering cost drop. Demos for infinite scroll optimization.
Toggle contain: strict, content, paint, layout and see how it affects rendering. Understand isolation for faster pages.
Apply will‑change to any element and see its effect on compositing. Learn best practices for smooth animations.
Display used/total/limit JS heap size using performance.memory. Take snapshots and see growth. Simple memory leak detection.
Run a CPU‑heavy calculation (e.g., prime numbers) in a Web Worker and see the UI stay responsive. Code snippet provided.
Enter a URL and get a one‑page report of titles, description, headings, image alts, and broken links. All from browser.
Enter a URL and get a rough client-side performance simulation: request count, DOM size, and potential speed tips. No real Lighthouse.