UD5 Toolkit
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.
Navigation Timing API Viewer - Online Page Load Breakdown
Navigation Timing API Viewer
Break down your page load timeline using real browser Navigation Timing data. Paste exported JSON or analyze this page live.
You can export this data from Chrome DevTools:
performance.getEntriesByType('navigation')[0].toJSON() or via the console.
Loading...
Collecting navigation timing data for this page...
Frequently Asked Questions
The Navigation Timing API provides precise timestamps and metrics about the page load process, broken down into stages like DNS lookup, TCP connection, request/response, and DOM processing. It helps developers analyze and optimize web performance.
Open your browser's DevTools console, run
performance.getEntriesByType('navigation')[0].toJSON() and copy the JSON output. If you're using an older API, JSON.stringify(performance.timing) works too. Then paste it above.Time To First Byte (TTFB) measures the time from the start of the request until the first byte of the response arrives. It equals
responseStart - requestStart and reflects server responsiveness and network latency.A value of 0 means that particular phase did not occur (e.g., no redirect) or that the browser didn't record it. For example,
secureConnectionStart is 0 for non-HTTPS connections, and redirectStart is 0 when no redirects happened.Due to browser security (same-origin policy), you can only retrieve detailed timing data for pages that explicitly allow it via the
Timing-Allow-Origin HTTP header. However, you can always measure your own pages or pages you control.View Transitions API Demo - Online Smooth Page Switch
See the View Transitions API in action. Cross‑fade and morph between two states. Copy the JavaScript starter code.
Tab Counter & Memory Estimator - Online Window Stats
See how many tabs you have open and estimate memory usage based on navigator object. Fun productivity check.
Cache Storage Viewer - Online Inspect Cache API
List cached responses for your domain. View headers, content, and delete individual entries. Understand your PWA's cache.
Intersection Observer Sandbox - Online Visual Threshold
Adjust root, margin, and threshold. See a live log of intersection events as you scroll. Debug lazy loading.
content‑visibility: auto Benchmark - Online Render Cost
Toggle content‑visibility: auto on long blocks and see the rendering time difference. Understand this powerful property.
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.
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.
Browser Window Info - Online Viewport & Screen Data
See exact dimensions of your current browser inner/outer window, screen resolution, and pixel ratio. Developer debug.
Caching Strategy Visualizer – Online Cache First vs Network First
Select a caching strategy and see a flow diagram of how requests are handled. Learn PWA patterns.
Scroll Timeline Playground - Online Scroll‑Driven Animation
Create an animation that advances with scroll using animation‑timeline: scroll(). See the visual timeline editor. Modern CSS.
CSS Paint Cost Benchmark - Online Measure Style Performance
Add many complex CSS styles and measure frames per second. Isolate expensive properties. Practical performance lab.
HTML Meta Inspector - Online View All Page Meta
Paste a URL and extract all meta tags, Open Graph, Twitter Cards, and JSON‑LD. View in a friendly table. Client‑side fetch.
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.
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.
Skip Navigation Link Generator - Online A11y Helper
Create a properly styled 'Skip to Content' link. Customize target and appearance. Essential for keyboard users. Copy the HTML/CSS.
Scroll Progress Bar Generator - Online CSS‑Only
Create a pure CSS scroll progress indicator using animation‑timeline: scroll(). No JavaScript. Copy the complete code.
Launch Handler API Demo - Online Control App Launch Behavior
Configure how your PWA launches: focus existing or create new. Test with the launch_handler manifest field.
JavaScript Proxy Playground - Online Observe Object
Apply a Proxy to an object and see the get/set traps log fired in real time. Understand metaprogramming. Local.
Daily Time Block Planner – Online Hourly Schedule
Divide your day into blocks with color codes. Drag tasks into slots. See free time at a glance.
Prioritized Task Scheduler Demo - Online scheduler.postTask()
Schedule tasks with user‑visible, user‑blocking, or background priority. See execution order and delays. Modern web perf.
Web Animations API Sandbox - Online JS Animation Editor
Write JavaScript using element.animate() and see the result in a live preview. Compare with CSS keyframes. Debugger included.
Lazy Loading Image Snippet Generator - Online
Generate an <img> tag with the loading='lazy' attribute and optional low‑quality placeholder. Improve Core Web Vitals. Copy the snippet.
GeoJSON Map Previewer - Online Render on Interactive Map
Paste GeoJSON and instantly see it drawn on a draggable map. Supports points, lines, and polygons. Local fetch of tiles.
Promise State Viewer - Online Check Resolve & Reject
Create promises that resolve or reject after a delay. See state changes and chain .then/.catch. Debug async code.
Knitting Stitch Counter & Row Progress Tracker
Keep track of stitches and rows for your knitting projects. Multiple counters with increase/decrease shortcuts. Data saved in your browser.
Web Page Screenshot Tool - Online Capture Browser Tab
Take a screenshot of the current browser tab using Screen Capture API. Crop, annotate with text and arrows, and download as PNG. Local only.
scroll‑start Property Playground - Online Carousel Initial Snap
Define the initial scroll position for a scroll container with scroll‑start. Test with and without snapping. New feature.
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.
Roof Snow Load Estimator – Online Ground Snow & Pitch Factor
Enter ground snow load and roof pitch to estimate the effective snow load on a sloped roof. Quick structural check for snowy regions.