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 page load performance into precise phases using the Navigation Timing API. Analyze your current page, or paste JSON from any site to get a detailed waterfall breakdown.
Analyze this page
Uses PerformanceNavigationTiming (falls back to performance.timing)
Example format:
Show sample |
Or run the snippet in the target page's console.
FAQ & Performance Insights
The Navigation Timing API provides precise timestamps for each phase of a page load, from DNS lookup to DOM interactive. It helps developers understand performance bottlenecks and optimize user experience.
SSL/TLS negotiation adds latency before data transfer begins. Minimizing certificate complexity and enabling HTTP/2 or TLS 1.3 can reduce this overhead.
Use a fast, reliable DNS provider. Reduce the number of unique domains, implement DNS prefetching (<link rel="dns-prefetch">), and consider using a CDN.
DOMContentLoaded fires when HTML is parsed and deferred scripts have run. The Load event fires after all resources (images, stylesheets) are fully loaded. Focusing on DOMContentLoaded gives a faster perceived performance.
Client-side rendering, large JavaScript bundles, blocking CSS, or heavy DOM manipulation can delay interactivity. Use the breakdown to spot large DOM processing or script execution phases.
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.
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.
Compression Streams API Demo - Online Gzip/Deflate Raw
Compress and decompress text using the browser's native Compression Streams API. See the binary output size.
Permissions Query API Demo - Online Check All APIs
Query the permission state of camera, microphone, geolocation, and more. See the response and learn the API.
Gamepad Tester - Online Button & Axis Visualizer
Connect a game controller and see every button press, axis movement, and vibration test. Uses the Gamepad API.
Pointer Events Playground - Online Mouse, Touch & Pen
Unified input demo: see pressure, tilt, and type from any pointer. Compare pointerType values. Essential for drawing apps.
Screen Wake Lock Tester - Online Keep Screen On
Toggle a screen wake lock to prevent the device from dimming or sleeping. See the lock state and learn the API.
Built-in Translation API Demo - Online On‑Device Translate
Test the experimental Translation API to translate text between languages directly in the browser, without cloud calls. Check support and copy the JavaScript starter.
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.
ImageDecoder API Demo - Online Progressive Decode
Decode an image progressively using the ImageDecoder API. See partial results and metadata. Modern alternative to <img>.
WebCodecs Video Frame Reader - Online Decode & Display
Decode individual video frames from a local file using the VideoDecoder API. Step through frames. Cutting‑edge browser feature.
FedCM Demo - Online Federated Credential Management
Experiment with the Federated Credential Management API. Simulate a sign‑in flow without third‑party cookies. Privacy‑first.
Web HID Explorer - Online List & Read HID Devices
Request HID devices and list them. Read input reports and send output. For custom hardware and controllers.
Idle Detection API Demo - Online User Activity Monitor
Request permission and detect when the user is idle (away from keyboard). See screen lock state. For native‑like apps.
Web OTP API Demo - Online Auto‑Read SMS Codes
Demonstrate how the Web OTP API automatically reads one‑time codes from SMS (mobile). Simulation with a fake SMS input.
Web Locks API Demo - Online Resource Coordination
Acquire and release locks across tabs. Prevent race conditions in IndexedDB or localStorage. Visual queue and lock state.
Gamepad API Tester - Online Visual Controller Check
Connect a gamepad and see all button presses and axis movements visually. Check that every input is detected correctly.
Vibration API Demo - Online Test Haptic Feedback
Trigger different vibration patterns on mobile devices. Test if your phone supports haptic feedback. Simple demo.
Network Information API Checker - Online Downlink Speed
Display your effective connection type (4g, 3g, etc.) and downlink speed using the Navigator API. Adapt your app accordingly.
Battery Status API Viewer - Online Check Level
See your device's battery level, charging status, and discharge time using the Battery Status API. Fun utility.
Screen Orientation API Tester - Online Lock & Check
Check current screen orientation and test the lock API. Useful for mobile web apps. Demo with code.
Popover API Demo - Online No‑JS Tooltips & Menus
Test the new HTML popover attribute for creating accessible tooltips, menus, and dialogs without JavaScript. Copy code snippets.
Clipboard API Tester - Online Read & Write Sandbox
Experiment with the Async Clipboard API: read/write text and images from the clipboard. Verify permissions and see demo code.
Web Share API Tester - Online Demo & Code
Test the Web Share API by sharing text, links, and files directly from the browser. Check compatibility and see example code.
API Status Checker - Online Test Endpoint & Response
Enter an API URL and quickly check its HTTP status code and response time. See response headers and body. Browser fetch.
HTTP Request Composer - Online Build & Send Requests
Pick a method, URL, headers, and body, then send an HTTP request directly from your browser. Debug APIs easily.
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.
Random JSON Generator - Online Create Sample API Responses
Generate random JSON data with customizable fields (users, products, orders). Useful for frontend mocking. All local.
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.