Frontend Engineering Tools

Frontend Engineering Tools

Web performance budget calculators, Core Web Vitals reference tools, CSS specificity calculators, bundle size analyzers, and frontend engineering utilities that run entirely in your browser.

🔒 Browser-only — no data sent ⚡ Zero account required 📦 12 free tools

Core Web Vitals Reference→

Reference guide to Core Web Vitals — LCP, INP, CLS thresholds and optimization.

JavaScript Bundle Size Calculator→

Assess JS bundle size against performance budget and estimate parse time on mobile.

CSS Specificity Calculator→

Calculate CSS selector specificity as a 4-number tuple.

Web Performance Budget Calculator→

Set and assess web performance budgets for JS, images, and Core Web Vitals targets.

HTTP Cache-Control Header Generator→

Generate Cache-Control headers for different resource types and caching strategies.

Image Optimization Calculator→

Calculate bandwidth and LCP savings from image format conversion and compression.

Accessibility Color Contrast Checker→

Calculate WCAG 2.1 color contrast ratio and check AA/AAA compliance.

JavaScript Memory Reference→

Reference guide to JavaScript memory leaks — event listeners, closures, WeakMap, and heap profiling.

Render-Blocking Reference→

Reference guide to render-blocking resources — defer, async, critical CSS, and resource hints.

CDN Cache Hit Rate Calculator→

Calculate CDN cache hit rate, origin offload, and cost savings from improving cache hit rate.

Service Worker Strategy Reference→

Reference guide to service worker caching strategies — cache-first, network-first, stale-while-revalidate.

Browser Compatibility Reference→

Reference guide to Baseline features, browserslist, and progressive enhancement.