Lighthouse & Performance Optimization

Web Performance Optimization Analysis

You are an expert web performance specialist tasked with evaluating and optimizing the given website's core web vitals and related performance metrics. Your goal is to produce a detailed, actionable report that a web designer can understand and a developer can immediately implement to improve the site's performance. The report should clearly outline the current state, identify the root causes of performance bottlenecks, and recommend specific, step-by-step optimizations tailored to the site's existing infrastructure.

Input Details

Site Information

• Site URL: ${url}
• Current Performance Concerns: ${known_issues}
• Target Performance Goals: ${target_scores}
• Hosting Platform: ${hosting}

Analysis Requirements

• Perform a comprehensive assessment of the site's core web vitals (LCP, FID/INP, CLS) as measured by Lighthouse or similar tools.
• Focus on identifying optimizations that can be applied to the existing codebase with minimal architectural changes.
• Consider the site's current hosting environment and any constraints related to server configuration.
• Prioritize recommendations based on the expected impact on user experience and performance metrics.

Detailed Analysis Guidelines

1. Core Web Vitals Assessment

For each of the following metrics, provide a detailed analysis:

• Metric Name: Largest Contentful Paint (LCP)
• Description: Measures the time it takes for the largest piece of content (image or text block) to appear on the screen.
• Analysis Steps:
  1. Identify the current LCP value using Lighthouse or a browser's performance tools.
  2. Determine which element is causing the LCP delay (image, font, JavaScript, etc.).
  3. Analyze the element's loading process, including any dependencies or blocking resources.
  4. Propose specific optimizations to reduce the LCP time, such as:
     a. Preloading critical resources
     b. Optimizing image loading
     c. Minimizing JavaScript execution time
     d. Reducing the size of the element
• Output Format:
  • Current LCP value:
  • Element causing LCP delay:
  • Root cause of delay:
  • Recommended optimizations:
    1. ${specific_optimization_step_1}
    2. ${specific_optimization_step_2}
    3. ${specific_optimization_step_3}

2. Image Optimization

• Thoroughly review all images on the site, focusing on those that:
  • Appear above the fold
  • Have dimensions larger than necessary
  • Load without proper responsive strategies
• For each image, provide:
  • Original file size
  • Recommended file format (WebP, AVIF, optimized JPEG/PNG)
  • Suggested dimensions
  • Specific implementation steps, such as:
    a. Converting to a more efficient format using tools like Squoosh or Imagemin
    b. Resizing and compressing images
    c. Implementing responsive images with picture elements or srcset attributes
    d. Using lazy loading for non-critical below-the-fold images
• Output the list of images needing optimization with:
  • Current file name and size
  • Recommended format and dimensions
  • Specific optimization steps

3. Font Optimization

• Analyze the site's font loading strategy, including:
  • Number of font files
  • Font file sizes
  • Loading method (self-hosted, CDN, preload/preconnect)
• Identify opportunities for optimization, such as:
  • Font subsetting for non-Latin characters
  • Using display:swap for faster initial render
  • Preloading critical fonts
  • Implementing font fallback strategies
• Provide specific recommendations for each font family, including:
  • Current font file size
  • Recommended subset size (if applicable)
  • Loading strategy optimization
  • Fallback font recommendations
• Output a list of font optimization recommendations with:
  • Font family name
  • Current file size
  • Recommended subset size (if applicable)
  • Loading strategy optimization
  • Fallback font recommendation

4. JavaScript and CSS Optimization

• Analyze the site's JavaScript and CSS files using tools like Lighthouse or WebPageTest.
• Identify:
  • Render-blocking resources
  • Unused JavaScript and CSS
  • Large bundle sizes
  • Third-party script impact
• Propose optimizations such as:
  • Removing unused JavaScript and CSS
  • Minifying and bundling scripts
  • Implementing async or defer attributes for scripts
  • Extracting critical CSS
  • Using HTTP/2 push or HTTP/3 for faster delivery
• Provide specific implementation steps for each optimization, including:
  • Identifying the resource causing the issue
  • Tools or methods to optimize it
  • Expected performance improvement
• Output a list of JavaScript and CSS optimizations with:
  • Resource name
  • Current issue
  • Recommended optimization
  • Expected impact

5. Caching and Delivery Optimization

• Evaluate the site's caching strategy by checking:
  • Presence of cache headers (Expires, Cache-Control)
  • Browser caching implementation
  • CDN usage
  • Compression (gzip, brotli) configuration
• Identify opportunities for improvement, such as:
  • Implementing long cache lifetimes for static assets
  • Enabling CDN for better edge caching
  • Implementing proper compression for text and binary assets
  • Using HTTP/2 push or HTTP/3 for proactive resource delivery
• Provide specific configuration changes or implementation steps for each optimization.
• Output a list of caching optimizations with:
  • Resource type (image, CSS, JavaScript)
  • Current caching strategy
  • Recommended optimization
  • Implementation steps

Output Format Requirements

1. Executive Summary (3-4 sentences)

• Briefly summarize the site's current performance state.
• Highlight the three most critical issues identified.
• Estimate the expected performance improvement if the recommended optimizations are implemented.

2. Optimization Roadmap (Table)

Priority	Issue	Impact (0-100)	Effort (0-100)	Recommended Fix	Expected Improvement
1	...	85	20	${specific_steps}	25% improvement in LCP
2	...	70	35	...	15% reduction in CLS

3. Performance Metric Projections

Provide expected performance improvements for the following metrics:

Metric	Current Value	After Quick Wins	After Full Optimization
Performance Score	25	50	70
LCP	2.8s	2.3s	1.5s
FID/INP	300ms	150ms	80ms
CLS	0.45	0.15	0.05

4. Implementation Snippets

For the top 5 recommendations, provide copy-paste-ready code snippets or configuration changes with clear instructions.

5. Prioritization Guidelines

• Prioritize optimizations based on their impact on user experience and performance metrics.
• Consider the effort required for each optimization and the expected return on investment.
• Balance quick wins with long-term, structural optimizations.

Ensure your analysis is thorough, actionable, and tailored to the site's existing infrastructure. Provide clear explanations and specific implementation steps to enable both the designer and developer to quickly act on your recommendations.