claude-force: Skill for Claude Code

Performance Optimization Patterns

Comprehensive patterns and techniques for optimizing Core Web Vitals (LCP, INP, CLS) and overall web performance.

Core Web Vitals Optimizer

from typing import Dict, List
import json

class CoreWebVitalsOptimizer:
    """Analyze and optimize Core Web Vitals"""

    def __init__(self):
        self.thresholds = {
            "lcp": {"good": 2.5, "needs_improvement": 4.0},
            "inp": {"good": 200, "needs_improvement": 500},
            "cls": {"good": 0.1, "needs_improvement": 0.25},
        }

    def analyze_lcp(self, lcp_value: float) -> Dict:
        """
        Analyze LCP (Largest Contentful Paint) and provide recommendations

        Good: < 2.5s | Needs Improvement: 2.5-4.0s | Poor: > 4.0s
        """
        recommendations = []

        if lcp_value > self.thresholds["lcp"]["good"]:
            recommendations.extend([
                {
                    "priority": "high",
                    "issue": "Slow LCP",
                    "recommendations": [
                        "Optimize largest image (use WebP/AVIF format)",
                        "Implement CDN for faster asset delivery",
                        "Preload critical resources with <link rel='preload'>",
                        "Remove render-blocking resources",
                        "Use server-side rendering (SSR) for above-fold content",
                        "Optimize server response time (TTFB < 600ms)",
                        "Implement lazy loading for below-fold images"
                    ]
                }
            ])

        status = self._get_status(lcp_value, "lcp")

        return {
            "metric": "LCP",
            "value": lcp_value,
            "unit": "seconds",
            "status": status,
            "recommendations": recommendations
        }

    def analyze_inp(self, inp_value: float) -> Dict:
        """
        Analyze INP (Interaction to Next Paint) and provide recommendations

        Good: < 200ms | Needs Improvement: 200-500ms | Poor: > 500ms
        """
        recommendations = []

        if inp_value > self.thresholds["inp"]["good"]:
            recommendations.extend([
                {
                    "priority": "high",
                    "issue": "Slow INP",
                    "recommendations": [
                        "Reduce JavaScript execution time",
                        "Implement code splitting to reduce bundle size",
                        "Defer non-critical JavaScript",
                        "Use web workers for heavy computations",
                        "Optimize event handlers and listeners",
                        "Debounce/throttle expensive operations",
                        "Break up long tasks (< 50ms chunks)",
                        "Optimize third-party scripts"
                    ]
                }
            ])

        status = self._get_status(inp_value, "inp")

        return {
            "metric": "INP",
            "value": inp_value,
            "unit": "milliseconds",
            "status": status,
            "recommendations": recommendations
        }

    def analyze_cls(self, cls_value: float) -> Dict:
        """
        Analyze CLS (Cumulative Layout Shift) and provide recommendations

        Good: < 0.1 | Needs Improvement: 0.1-0.25 | Poor: > 0.25
        """
        recommendations = []

        if cls_value > self.thresholds["cls"]["good"]:
            recommendations.extend([
                {
                    "priority": "high",
                    "issue": "High CLS",
                    "recommendations": [
                        "Set explicit width and height on images and videos",
                        "Reserve space for ads and embeds",
                        "Avoid inserting content above existing content",
                        "Use CSS aspect-ratio for responsive media",
                        "Preload fonts to prevent FOIT/FOUT",
                        "Use font-display: swap for web fonts",
                        "Avoid animations that trigger layout shifts"
                    ]
                }
            ])

        status = self._get_status(cls_value, "cls")

        return {
            "metric": "CLS",
            "value": cls_value,
            "unit": "score",
            "status": status,
            "recommendations": recommendations
        }

    def _get_status(self, value: float, metric: str) -> str:
        """Determine if metric passes/fails"""
        threshold = self.thresholds[metric]

        if value <= threshold["good"]:
            return "good"
        elif value <= threshold["needs_improvement"]:
            return "needs_improvement"
        else:
            return "poor"

    def generate_optimization_plan(self, vitals: Dict) -> Dict:
        """Generate complete optimization plan"""
        plan = {
            "lcp": self.analyze_lcp(vitals.get("lcp", 0)),
            "inp": self.analyze_inp(vitals.get("inp", 0)),
            "cls": self.analyze_cls(vitals.get("cls", 0))
        }

        # Overall status
        statuses = [plan["lcp"]["status"], plan["inp"]["status"], plan["cls"]["status"]]
        if all(s == "good" for s in statuses):
            plan["overall_status"] = "passing"
        elif any(s == "poor" for s in statuses):
            plan["overall_status"] = "failing"
        else:
            plan["overall_status"] = "needs_improvement"

        return plan