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.
UD5 Toolkit
Core Web Vitals Emulator â Simulate & Diagnose Your Site's Performance
--
--
| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP | ⤠2.5s | 2.5s â 4s | > 4s |
| INP | ⤠200ms | 200ms â 500ms | > 500ms |
| CLS | ⤠0.1 | 0.1 â 0.25 | > 0.25 |
| TTFB | ⤠800ms | 800ms â 1.8s | > 1.8s |
| FCP | ⤠1.8s | 1.8s â 3s | > 3s |
* Based on Google's Core Web Vitals thresholds. INP replaced FID as a Core Web Vital in March 2024.
Enter a URL above and click "Test Now" to simulate Core Web Vitals performance metrics.
Choose a preset scenario or toggle between Desktop / Mobile to explore different results.
Adjust page characteristics (image size, server delay, layout shift) and see the simulated Core Web Vitals scores. Understand what impacts performance.
Patch the PerformanceObserver and show your pageâs Core Web Vitals as you browse. See realâtime scores and suggestions.
Compress text with Brotli at different quality levels. See size reduction and time. Find the sweet spot for your static assets.
Simulate adaptive bitrate logic by switching between different quality video segments. See how ABR algorithms work.
Tap any key to the beat and get the BPM (beats per minute). Useful for DJs, musicians, and running. Simple and accurate.
Simulate forcedâcolors mode and see how your site looks. Adjust CSS system colors. Make your design accessible.
See your current page load broken down into DNS, TLS, request, and DOM phases. Understand where time is spent.
See your current page load broken down into DNS, TLS, request, and DOM phases. Understand where time is spent.
Test overscrollâbehavior: contain to prevent background scroll or pullâtoârefresh. See the effect in a live demo.
Stack multiple background images and blend them with colors. Create unique textures. Copy the CSS code instantly.
Simulate reduced motion preference and test your animations. Copy the media query snippet. Keep your users safe.
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.
Toggle scrollbarâgutter: stable to reserve space for the scrollbar and avoid content jumps. Visual demo with two columns.
Interpret your blood pressure reading based on American Heart Association and European Society of Cardiology categories. Visual gauge with actionable health insights.
Detect browser support for fontâtech() and fontâformat() values in @fontâface src. Check COLRv1, variable, etc.
Inspect any website's SSL/TLS certificate details: issuer, expiry date, subject, and SANs. Verify certificate chains. All checks are private and require no server upload.
Pick your egg style and get a precise timer with visual progress. Perfect boiled eggs every time. No app needed.
Guided breathing exercises with animated circle for inhale/hold/exhale. Includes box breathing, 4-7-8, and resonant breathing patterns. Customizable intervals.
Enter a URL and extract tabâindex order violations and focusable elements. Quick accessibility audit. Clientâside fetch.
Load an animated GIF and adjust its frame delay to make it slower or faster. Download the modified GIF. All local.
Enter a URL and a userâagent to see if it is allowed or blocked by the robots.txt file. Quick bot validation.
Paste two strings that look the same and see if they differ after normalization. Debug invisible encoding bugs.
Compare width/height with blockâsize/inlineâsize in different writing modes. Understand intrinsic sizing. Copy best practices.
Paste a `SetâCookie` header and see all attributes parsed: domain, path, MaxâAge, SameSite, Secure, HttpOnly. Debug cookies easily.
See how a full paragraph looks with your chosen text and background colors. Not just a ratio; the real appearance.
Define multiple @layer blocks and see which styles win. Understand layer order and revertâlayer. Modern CSS architecture.
Click through the TCP connection states (LISTEN, SYN_SENT, ESTABLISHEDâŚ) and see the animated transitions. Networking education.
Create a CAA DNS record to specify which certificate authorities can issue SSL certs for your domain. Prevent misâissuance.
Apply contentâvisibility: auto to offâscreen sections and see the rendering cost drop. Demos for infinite scroll optimization.
Select PostCSS plugins (Autoprefixer, nesting, customâmedia) and generate a postcss.config.js file. Streamline your CSS pipeline.