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.
Focus Order Analyzer - Online Tab Navigation Check
Enter a URL and extract tabâindex order violations and focusable elements. Quick accessibility audit. Clientâside fetch.
View Timeline Playground - Online ElementâInâView Animations
Animate elements as they enter and exit the viewport using view() timeline. Parallax and reveal effects without JS.
HTML Structure Viewer - Online Indented Tag Explorer
Paste HTML and see a collapsible tree of tags. Understand document outline and nesting. Handier than raw code.
Tab Order Visualizer - Online See Focus Navigation Path
Enter a URL and see a visual map of the tab order. Detect broken tabindex values. Improve keyboard navigation.
Tab Focus Order Checker - Online Visualize Tab Navigation Flow
Paste HTML and see the order in which elements would receive focus via Tab key. Highlight issues. Local accessibility testing.
UI Animation Timing Demo - Online Easing Presets
Compare all CSS easing presets side by side on a bouncing ball. See which curve fits your UI animation.
Local JSON Data Explorer - Online Browser Storage Viewer
View, edit, and manage JSON objects saved in your browser's localStorage. Delete, export, or import keys. No setup.
Simple Page Speed Tester - Online Core Web Vitals Emulator
Enter a URL and get a quick simulation of First Contentful Paint, LCP, and CLS using browser metrics. Lightweight alternative.
Online PDF Page Counter - Instant Document Inspector
Check how many pages a PDF has without uploading it (uses FileReader). Also shows file size and title if available. Simple and fast client-side tool.
Broadcast Channel API Demo - Online CrossâTab Communication
Open the same page in two tabs and send messages between them. See realâtime crossâtab communication. Learn the API.
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.
ariaâdescribedby Visualizer - Online Check Descriptions
Highlight elements with ariaâdescribedby and see the linked description text. Verify a11y annotations.
iCalendar File Viewer - Online ICS Parser
Drop or paste an .ics file and see all events in a readable table. Check dates, times, and locations. Privacyâfriendly.
Screen Reader Text Visualizer - Online View Hidden A11y Content
Paste a website's HTML and see which text is only visible to screen readers (e.g., .srâonly). Preview the accessible layer.
Book Reading List - Online Track ToâRead & Finished
Add book titles and authors to a toâread list. Move them to 'finished' and add a rating. Data saved locally.
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.
Online SRT Subtitle Shifter - Adjust Timing & Sync
Load an SRT file and shift all timestamps forward or backward by milliseconds or seconds. Fix out-of-sync subtitles instantly. Download corrected file.
Email Header Parser - Online Analyze Email Delivery Path
Paste raw email headers and get a human-readable breakdown of the delivery route, authentication results, and delays. Private analysis.
IDBâKeyval Explorer - Online Simple KeyâValue Storage Viewer
Browse, edit, and delete keys stored by the idbâkeyval library in your browser. Handy for debugging PWAs.
BackgroundâBlendâMode Explorer - Online Layer Patterns
Stack multiple background images and blend them with colors. Create unique textures. Copy the CSS code instantly.
Caffeine HalfâLife Tracker - Online Blood Level Visualizer
Visualize how caffeine decays in your body over time. Enter intake amount and see remaining caffeine at bedtime to optimize sleep. Uses standard 5-hour half-life.
Live Web Vitals Monitor - Online RealâTime LCP, INP, CLS
Patch the PerformanceObserver and show your pageâs Core Web Vitals as you browse. See realâtime scores and suggestions.
CORS Header Debugger - Online Check CrossâOrigin Access
Enter a URL and see its CORS headers. Understand why a fetch fails. Check preflight responses. Clientâside debugger.
Window Size Detector - Online Outer & Inner Dimensions
See outerWidth, innerWidth, outerHeight, innerHeight, screenX/Y, and availWidth/Height live. Understand the viewport.
TCP State Machine Visualizer - Online Animated Diagram
Click through the TCP connection states (LISTEN, SYN_SENT, ESTABLISHEDâŚ) and see the animated transitions. Networking education.
PGP Message Viewer - Online Decode & Inspect
Paste an ASCIIâarmored PGP message and view its packet structure. See the encrypted/plaintext blocks without decrypting.
Data Structure Visualizer - Online Array, Stack, Queue
Add, remove, push, pop items and watch the data structure change visually. Supports arrays, stacks, and queues. For CS students.
ariaâhidden Conflict Finder - Online A11y Audit
Paste HTML and detect elements with ariaâhidden='true' that contain focusable children. An easy a11y win to fix.
Pathfinding Visualizer - Online A*, Dijkstra & BFS Grid
Draw walls on a grid and watch A*, Dijkstra, or BFS find the shortest path. Interactive animation. Learn graph traversal.