How Hub

Performace Review

Updated:

Categories:

Author:

Hector Jarquin

This guide outlines the step-by-step process for creating a comprehensive performance report for any website using PageSpeed Insights and collaborative review.

Process

Run PageSpeed Insights

  • Go to PageSpeed Insights.
  • Enter the website URL and run tests for both mobile and desktop.
  • Download each report (mobile and desktop) as a PDF for our records.

Extract Key Data

  • Use LM assistance to summarize and structure the findings. Example prompt:
  • Copy and paste the relevant metrics, scores, and insights from the PageSpeed results (Core Web Vitals, performance scores, diagnostics, and recommendations) within the prompt.
  • The prompt instructions will be different between LLMs

Example:
This prompt is specific in the context of GitHub copilot using VS Code. And that the current directory contains performance-review-instructions.md.

Summarize the key performance issues, metrics, and recommendations from the following PageSpeed Insights results using the "performance-review-instructions.md" file and create a file "clientName-performance-review-september-2025.md". Present the information in a client-friendly format for a technical audit report. Do not recommend plugins; focus on code-level or server/CDN optimizations.

Summarize Core Web Vitals

List only the main performance metrics for both mobile and desktop (table):

  • Largest Contentful Paint (LCP)
  • Interaction to Next Paint (INP)
  • Cumulative Layout Shift (CLS)
  • First Contentful Paint (FCP)
  • Time to First Byte (TTFB)

Example:

| Metric                      | Mobile        | Desktop      |
|---------------------------- |-------------- |--------------|
| Performance Score           | 92            | 95           |
| Largest Contentful Paint    | 1.5 s         | 1.5 s        |
| Interaction to Next Paint   | 78 ms         | 33 ms        |
| Cumulative Layout Shift     | 0             | 0.01         |
| First Contentful Paint      | 1 s           | 0.8 s        |
| Time to First Byte          | 0.4 s         | —            |

Do not include Accessibility, Best Practices, or SEO scores in the Core Web Vitals Overview table. Focus exclusively on performance and web vitals.
Note any differences between platforms.

Identify Performance Issues

  • Review the “Insights” and “Diagnostics” sections for actionable items (e.g., render-blocking resources, cache lifetimes, image delivery, unused JS/CSS, third-party code).
  • List each issue with a brief description.

Draft Solutions

  • For each issue, write clear, actionable solutions (e.g., “Defer non-critical JS and CSS,” “Convert images to WebP,” “Audit codebase for unused assets”).
  • Focus on code-level, server, or CDN optimizations. Do not recommend plugins unless specifically requested by the client.

Create the Report

  • Use a markdown template with the following sections:
    • Executive Summary
    • Core Web Vitals Overview (table format for mobile/desktop)
    • Detailed Performance Issues & Solutions
    • Recommendations
    • Prepared for / Date
  • Combine mobile and desktop findings if most issues overlap; otherwise, create separate reports.

Review and Edit

  • Share the draft with stakeholders for review.
  • Update the document based on feedback and site-specific details.
  • Ensure all recommendations are clear and actionable.

Finalize and Deliver

  • Save the final report in the project folder (e.g., performance-september-2025.md).
  • Use the report to quote work and estimate investigation or development hours.
  • Reference the instructions for future audits.

Create Issue and Branch Workflow

  • Open a new issue in your issue tracker titled Task - performance review - Month - Year.
  • Add a comment to the issue with the markdown report (copy and paste the document).
  • Tag relevant stakeholders in the comment for review and approval.
  • When work is approved, create a new branch in your repository named task/performance-review-month-year.
  • Complete all performance-related tasks in this branch.
  • Merge the branch back to main after review and testing.

Tips

  • Always use the latest PageSpeed Insights results.
  • Document any manual changes or site-specific notes.
  • Keep the report client-friendly and focused on actionable improvements

Example:

# IBEW353  Performance Review

**Prepared for:** BeOne  
**Date:** September 17, 2025

## Executive Summary

This report presents the results of the PageSpeed Insights assessment for both the mobile and desktop versions of ibew353.org, conducted in September 2025. The site passes Core Web Vitals on both platforms, but several performance issues were identified that require prompt attention. Addressing these items will improve user experience, site speed, and maintainability. This document is intended to inform the client, support quoting, and help the development team estimate the required effort.

---

## Core Web Vitals Overview

| Metric                      | Mobile        | Desktop      |
|---------------------------- |-------------- |--------------|
| Performance Score           | 57            | 87           |
| Largest Contentful Paint    | 1.5 s         | 1.5 s        |
| Interaction to Next Paint   | 78 ms         | 33 ms        |
| Cumulative Layout Shift     | 0             | 0.01         |
| First Contentful Paint      | 1 s           | 0.8 s        |
| Time to First Byte          | 0.4 s         | —            |

Both versions pass Core Web Vitals, but desktop scores slightly better in INP and CLS.

---

## Detailed Performance Issues & Solutions

### 1. Render Blocking Requests
**Issue:** CSS and JS files are blocking the initial render, delaying LCP and FCP.
**Solution:**
- Defer non-critical JS and CSS.
- Inline critical CSS.
- Optimize asset loading, test for theme/plugin compatibility.

### 2. Cache Lifetimes
**Issue:** Some resources have short cache lifetimes, slowing repeat visits.
**Solution:**
- Increase cache TTL (Time To Live) for static assets (images, JS, CSS) via server or CDN settings.
- Configure browser caching.

### 3. Image Delivery
**Issue:** Images are larger than necessary and not in modern formats.
**Solution:**
- Convert images to WebP or AVIF.
- Compress images and use responsive sizes (srcset).
- Register specific image sizes to use.
- Resize images.
- Use the Performance Lab plugin for automatic conversion.

### 4. LCP Image Discovery
**Issue:** LCP image is not prioritized or lazy-loaded correctly.
**Solution:**
- Add `fetchpriority="high"` to the LCP image.
- Ensure the image is discoverable in the initial HTML and not lazy-loaded.

### 5. Forced Reflow
**Issue:** JavaScript causes forced reflows, impacting performance.
**Solution:**
- Refactor JS to minimize layout thrashing.
- Avoid querying layout properties after DOM changes.

### 6. Critical Request Chains
**Issue:** Long chains of critical requests increase latency.
**Solution:**
- Reduce the length and size of critical request chains.
- Defer non-essential resources.

### 7. Document Request Latency (Desktop)
**Issue:** Initial document request could be optimized further.
**Solution:**
- Avoid redirects and enable text compression.
- Use lightweight themes and full-page caching.
- Upgrade hosting if needed.

### 8. Third-Party Code
**Issue:** Twitter and Vimeo embeds add significant load and blocking time.
**Solution:**
- Lazy-load third-party embeds using facades.
- Defer loading until user interaction.

### 9. Unused JavaScript & CSS
**Issue:** Large amounts of unused JS and CSS are loaded.
**Solution:**
- Audit plugins and themes for unused assets.
- Remove or defer unused JS/CSS.
- Use Chrome DevTools coverage to identify unused code.

### 10. Legacy JavaScript
**Issue:** Legacy polyfills/transforms are served to modern browsers.
**Solution:**
- Update build process to avoid unnecessary transpilation for modern browsers.

### 11. Minify CSS
**Issue:** CSS files are not minified.
**Solution:**
- Minify CSS using build tools or WordPress plugins.

### 12. Passive Event Listeners
**Issue:** Touch and wheel event listeners are not passive, affecting scroll performance.
**Solution:**
- Update event listeners to use `{ passive: true }`.

### 13. Long Main-Thread Tasks
**Issue:** Some JS tasks block the main thread for extended periods.
**Solution:**
- Optimize or defer heavy JS tasks.
- Split long tasks into smaller asynchronous chunks.

---

## Recommendations

- Prioritize fixing render-blocking resources, optimizing image delivery, and improving cache lifetimes for the largest impact.
- Audit and reduce unused JS/CSS, especially from plugins and third-party embeds.
- Implement caching and minification strategies for all static assets.
- Regularly monitor performance using PageSpeed Insights and Chrome DevTools.
- Use this report to quote work and estimate development hours for each item.

---

Prepared for: ibew353.org
Date: September 17, 2025

Hector Jarquin

One of the newest team members at Kobayashi, Hector works with the team developing user-centered experiences (UX), and has a passion for accessible, semantic, and responsive applications. Also, believes in sharing and conversing with others about the tools and practices that have helped deliver the best solutions in his developer journey.