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
performance
Core Web Vitals Reference→
Reference guide to Core Web Vitals — LCP, INP, CLS thresholds and optimization.
performance
JavaScript Bundle Size Calculator→
Assess JS bundle size against performance budget and estimate parse time on mobile.
css
CSS Specificity Calculator→
Calculate CSS selector specificity as a 4-number tuple.
performance
Web Performance Budget Calculator→
Set and assess web performance budgets for JS, images, and Core Web Vitals targets.
caching
HTTP Cache-Control Header Generator→
Generate Cache-Control headers for different resource types and caching strategies.
performance
Image Optimization Calculator→
Calculate bandwidth and LCP savings from image format conversion and compression.
accessibility
Accessibility Color Contrast Checker→
Calculate WCAG 2.1 color contrast ratio and check AA/AAA compliance.
performance
JavaScript Memory Reference→
Reference guide to JavaScript memory leaks — event listeners, closures, WeakMap, and heap profiling.
performance
Render-Blocking Reference→
Reference guide to render-blocking resources — defer, async, critical CSS, and resource hints.
caching
CDN Cache Hit Rate Calculator→
Calculate CDN cache hit rate, origin offload, and cost savings from improving cache hit rate.
caching
Service Worker Strategy Reference→
Reference guide to service worker caching strategies — cache-first, network-first, stale-while-revalidate.
compatibility
Browser Compatibility Reference→
Reference guide to Baseline features, browserslist, and progressive enhancement.