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.
Resource Hint Generator - Online Preload, Prefetch, Preconnect
Resource Hint Generator
Generate optimized <link> tags for preload, prefetch, preconnect and dns-prefetch to speed up your website.
Add New Resource Hint
Please enter a valid URL (including https://).
Configure the resource hint and click "Add Hint". You can build an entire list of hints.
Your Resource Hints
- No hints added yet. Start by adding a resource hint above.
Frequently Asked Questions
Resource hints are HTML
<link> elements that tell the browser to perform early actions (like DNS lookups, TCP handshakes, or pre-fetching) before they are strictly needed. They help improve perceived page load performance by warming up connections or preloading critical assets.
Preload fetches a resource for the current navigation with high priority. It’s great for fonts, above-the-fold images, or critical CSS/JS. Prefetch fetches a resource that might be needed for future navigations (low priority). Use preload for now, prefetch for next pages.
Use dns-prefetch to resolve a domain early (lightweight). Use preconnect when you also need the TCP and TLS handshake completed ahead of time. Preconnect is more resource-intensive; save it for critical third‑party origins (like your CDN or API).
If you preload a CORS-enabled resource (like fonts from Google Fonts), you must set
crossorigin="anonymous" (or use-credentials) to match the eventual request. Otherwise the browser may fetch the resource twice, wasting bandwidth.
Yes – for example, a
preconnect to a CDN origin combined with a preload for a specific font file from that CDN. Avoid redundant hints, though; a single preconnect already covers DNS resolution, making an extra dns-prefetch unnecessary.
All modern browsers (Chrome, Firefox, Safari, Edge) support
preload, prefetch, preconnect, and dns-prefetch. However, always check caniuse.com for the latest compatibility details, especially for preload nuances.
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.
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.
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.
Resource Timing Viewer - Online See All Asset Loads
List all resources loaded by the current page and their detailed timing breakdown. In‑browser waterfall.
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.
isInputPending() API Demo - Online Yield to User
Demonstrate how to yield heavy computation to user input using the isInputPending API. Keep UI responsive.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.