Performance Optimization Tools

New

Web Font Subset Generator – Reduce Font File to Only Used Glyphs

Paste the characters your site uses and upload a TTF/OTF font. Download a smaller, subsetted WOFF2 for faster page loads.

Developer Tools font generator subset

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.

Developer Tools FCP FP Paint Timing performance

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.

Developer Tools Brotli compression performance test

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.

Developer Tools INP LCP real‑time Web Vitals

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.

Developer Tools API Navigation Timing page load performance

Resource Timing Viewer - Online See All Asset Loads

List all resources loaded by the current page and their detailed timing breakdown. In‑browser waterfall.

Developer Tools API performance Resource Timing waterfall

isInputPending() API Demo - Online Yield to User

Demonstrate how to yield heavy computation to user input using the isInputPending API. Keep UI responsive.

Developer Tools demo isInputPending performance yield

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.

Performance audit checklist lighthouse performance

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.

Developer Tools analyzer performance scripts third party

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.

Developer Tools critical CSS extractor inline performance

Image Compression Visualizer - Online Before/After Slider

Drag a slider to compare your original image with a compressed version (e.g., WebP). See the quality difference and file size savings.

Image Tool before after compression image slider

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.

Developer Tools API Navigation Timing page load performance

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.

Developer Tools DOM nodes performance size

HTML Minifier Comparison - Online See Savings Live

Paste HTML and see a before/after comparison of minified output. Check the byte savings. All local.

Developer Tools compare HTML minifier savings

content‑visibility: auto Benchmark - Online Render Cost

Toggle content‑visibility: auto on long blocks and see the rendering time difference. Understand this powerful property.

Developer Tools benchmark content‑visibility CSS performance

Next‑Gen Image Format Comparator - Online AVIF vs WebP vs JPEG XL

Upload one image and see it encoded in AVIF, WebP, and JPEG XL side‑by‑side. Compare quality and file size in your browser.

Image Tool AVIF comparison JPEG XL WebP

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.

Developer Tools debug INP Long Task performance

CSS Paint Cost Benchmark - Online Measure Style Performance

Add many complex CSS styles and measure frames per second. Isolate expensive properties. Practical performance lab.

Developer Tools benchmark CSS paint performance

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.

Developer Tools content‑visibility CSS performance rendering

Web Font Subset Generator - Online Reduce Font Size

Enter the characters you need and generate a smaller font file from a TTF/OTF. Keep only the glyphs you use. Using harfbuzz WASM.

Developer Tools font reduce subset woff2

WebP Quality Comparator - Online vs JPEG & PNG

Compare your image as JPEG, PNG, and WebP side by side at different quality levels. See the size savings visually.

Image Tool comparison compression JPEG WebP

Regex Catastrophic Backtracking Tester - Online Benchmark

Test a regex against long strings and measure execution time. Detect catastrophic backtracking patterns. Visual warning if slow.

Developer Tools backtracking benchmark performance regex

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.

Developer Tools compare image performance SVG

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.

Developer Tools contain CSS layout performance

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.

Developer Tools CSS GPU performance will‑change

JPEG Quality Visual Comparator - Online Side‑by‑Side

Upload an image and see a slider comparison of different JPEG quality levels. Find the optimal file size vs. quality trade‑off.

Image Tool comparison compression JPEG quality

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.

Developer Tools LCP performance simulator Web Vitals

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.

Developer Tools benchmark CSS‑in‑JS performance render