Page Speed Audit
Inspect HTML source for render-blocking scripts, unoptimized stylesheets, layout shift hazards, and simulate Core Web Vitals (LCP, CLS, TBT).
Speed & Vitals Rating
11 DOM Elements (optimal)
Speed & Layout Shift Findings (2)
Detected 1 synchronous <script> tag(s) that block HTML parsing until downloaded and executed.
💡 Fix: Add "defer" or "async" to non-critical scripts, or place them before the closing </body> tag.
1 of 1 image tag(s) lack explicit width/height attributes or loading="lazy". Images without dimensions cause Cumulative Layout Shift (CLS).
💡 Fix: Always set explicit width and height attributes on <img> tags and add loading="lazy" for below-the-fold assets.
In-Browser Core Web Vitals Simulation and Performance Bottleneck Auditor
The Page Speed Audit provides web developers, performance engineers, and technical SEO specialists with an instant diagnostic workspace to evaluate HTML markup against Google Core Web Vitals standards. Page rendering velocity and visual stability are confirmed search ranking factors that directly govern organic visibility, user engagement, and conversion rates. Auditing source markup prior to deployment enables engineering teams to eliminate render-blocking elements before they impact live production users.
This utility parses HTML source code to simulate key performance indicators: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Total Blocking Time (TBT), and First Contentful Paint (FCP). It pinpoints render-blocking synchronous scripts, unoptimized CSS stylesheets, excessive DOM node trees, and image tags lacking explicit dimensions or modern lazy-loading attributes. The engine computes an aggregate performance rating from zero to one hundred based on official performance weighting formulas.
Operating with complete local-first privacy, the entire audit runs in client browser memory without needing slow external network proxies or headless browser fleets. Developers can test unreleased Astro, Next.js, or HTML templates with complete security, knowing proprietary source code remains strictly on their local machine.
Core Tool Capabilities
- Core Web Vitals Simulation: Simulates LCP, CLS, TBT, and FCP metrics based on markup weight, resource distribution, and layout rules. It translates complex code patterns into clear, actionable performance scores and threshold warnings.
- Render-Blocking Resource Detection: Identifies synchronous external scripts and stylesheets that stall browser parser threads. The tool highlights exact lines where async or defer attributes should be added to accelerate page delivery.
- Layout Shift Hazard Scanning: Flags image and media elements lacking explicit width and height dimensions or modern lazy loading attributes. Adding explicit aspect ratios prevents sudden layout shifts during image loading.
- DOM Complexity Analysis: Counts total HTML elements and warns when DOM node counts exceed recommended performance thresholds. Lean DOM trees ensure rapid style recalculations and smooth browser rendering on mobile devices.
- Resource Weight and Inline Code Auditing: Measures the payload size of inline scripts, embedded SVG assets, and internal style blocks. It helps engineers identify opportunities to extract large inline code into cacheable external files.
- Prioritized Remediation Recommendations: Generates an itemized action plan ranking detected issues by performance severity. Developers can tackle critical bottlenecks first to achieve the largest improvements in Core Web Vitals scores.
Local Browser Privacy
Your files are processed locally on your device. Files are not uploaded, transmitted, or stored on remote servers.
Once the page has loaded, you can disconnect your network connection and continue using this tool offline.
Target Use Cases
- • Pre-Launch Speed Optimization
- • Core Web Vitals Remediation
- • Template Overhead Audits
- • E-Commerce Product Page Auditing
Technical Specifications and Platform Limits
Evaluates metrics against official Web Vitals thresholds.
Parses head declarations, external resource links, scripts, and media elements.
Instant in-memory simulation with zero third-party API delays.
Detailed performance score (0-100) and prioritized action items.
Step-by-Step Workflow
Paste HTML Source Code
Insert your full HTML template or production page source into the editor.
Review Performance Score
Check your aggregate 0-100 performance rating and simulated Core Web Vitals cards.
Inspect Blocking Resources
Examine detected synchronous script tags and excessive external stylesheet links.
Implement Optimization Advice
Add async/defer to scripts, declare image dimensions, and reduce DOM node depth.
Practical Real-World Use Cases
Pre-Launch Speed Optimization
Frontend engineers auditing newly coded Astro, Next.js, or static HTML landing pages before deploying to production to ensure optimal Core Web Vitals compliance.
Core Web Vitals Remediation
Technical SEO specialists diagnosing persistent Google Search Console mobile URL performance issues to restore organic search traffic.
Template Overhead Audits
Web development teams checking third-party tracking scripts and chat widgets to prevent them from blocking initial DOM parsing and inflating TBT.
E-Commerce Product Page Auditing
E-commerce developers optimizing high-traffic catalog pages to eliminate layout shifts caused by dynamic promotional banners and unsized product photos.
Frequently Asked Questions
- Does this audit run real browser network tests?
- No. This tool operates as an in-browser code analyzer that evaluates HTML markup structure, script attributes, and resource declarations to simulate performance without remote headless browsers.
- Why are synchronous scripts flagged as render-blocking?
- Synchronous script tags force the browser to pause HTML parsing and DOM tree construction until the external file is downloaded and executed, directly delaying First Contentful Paint.
- How does missing image dimensions trigger Cumulative Layout Shift?
- When images lack explicit width and height attributes, the browser cannot reserve layout space before downloading the image file, causing surrounding content to jump suddenly when rendered.
- What is an acceptable DOM size for optimal performance?
- Google recommends keeping total DOM nodes under 1,500 elements and maximum node depth under 32 levels to prevent sluggish rendering and high memory usage.
- Is my proprietary HTML markup stored or tracked?
- No. All code analysis executes entirely within local browser memory with zero server telemetry, external logging, or remote storage.
Share this tool
Help others discover this utility. No login or registration required.
Master this tool with Guides & Articles
Learn the workflows, common mistakes, and advanced techniques behind Page Speed Audit - Simulate Core Web Vitals and Performance with our deep-dive educational content.
Building a Custom Developer Toolbox with Browser Utilities
A practical guide to assembling browser-native developer workflows for formatting, validation, URL checks, payload preparation, security review, and deployment preflight.
Identifying CSS Bloat in Modern UI Components
A frontend workflow guide to finding CSS bloat, reducing unused styles, controlling Tailwind utility growth, and keeping component systems maintainable.
Cleaning Messy JSON for API Performance and Reliability
A developer workflow guide to JSON cleanup, validation, schema alignment, payload size, and debugging API data before production handoff.