role-frontend:frontend-performance

Improve Core Web Vitals by diagnosing LCP, INP, and CLS metrics, then applying resource loading strategies like code splitting and image optimization. This process audits CWV scores and produces actionable recommendations to reduce page weight and enhance perceived performance.

Optimize images and fonts by adopting modern formats like WebP and AVIF alongside lazy loading controls. This strategy reduces unnecessary resource payloads, directly improving loading times and preventing layout shifts on your web pages.

Code splitting reduces page weight by breaking down large JavaScript bundles into smaller chunks loaded on demand. Combined with tree shaking and bundle analysis, it enforces performance budgets to ensure faster initial page loads across various frameworks.

Yes, this frontend performance optimization approach works across different frameworks by diagnosing resource loading and Core Web Vitals universally. It provides tooling guidance and actionable optimization recommendations applicable to diverse web application scenarios.

Use service workers for frontend performance optimization to enable efficient caching strategies and deliver a better user experience. Integrating service workers allows web applications to load faster by serving cached resources reliably during subsequent visits.

Yes, you can set performance budgets to prevent frontend bundle size bloat by enforcing strict limits on resource loading. Analyzing bundle sizes alongside tree shaking ensures your application maintains optimal Core Web Vitals scores.