Optimization Workflows

This guide walks you through common web quality optimization workflows, from initial audits to ongoing maintenance.

Full Site Audit Workflow

Use the web-quality-audit skill to perform comprehensive quality reviews.

Run Initial Assessment

Start with automated tools to establish a baseline:

# Run Lighthouse audit
npx lighthouse https://your-site.com --output html --output-path report.html

# Or use the web-quality-audit skill
# In your AI coding agent:
# "Audit my site for web quality issues"

This identifies issues across:

Performance (40% of typical issues)
Accessibility (30% of typical issues)
SEO (15% of typical issues)
Best Practices (15% of typical issues)

Categorize by Severity

Group findings by impact level:

Level	Examples	Action
Critical	Security vulnerabilities, complete failures	Fix immediately
High	Core Web Vitals failures, major accessibility barriers	Fix before launch
Medium	Performance opportunities, SEO improvements	Fix within sprint
Low	Minor optimizations, code quality	Fix when convenient

Address Critical & High Priority Issues

Focus on issues that affect user experience and search ranking:Critical issues to fix first:

HTTPS not enabled
Security vulnerabilities (check npm audit)
Missing accessibility labels on forms
Core Web Vitals failures (LCP > 4s, INP > 500ms, CLS > 0.25)

High priority issues:

Color contrast below 4.5:1
Missing meta tags (title, description)
Images without dimensions (causing CLS)
Render-blocking resources

Optimize Medium Priority Items

Improvements with measurable impact:

Compress and optimize images (WebP/AVIF)
Implement lazy loading for below-fold content
Add structured data (JSON-LD)
Improve internal linking structure
Set up proper caching headers

Verify Improvements

Re-run tests to confirm fixes:

# Compare before/after Lighthouse scores
npx lighthouse https://your-site.com --output json

# Check Core Web Vitals in the field
# Visit Google Search Console → Core Web Vitals report

Target scores:

Performance: ≥ 90
Accessibility: 100
Best Practices: ≥ 95
SEO: ≥ 95

Document Findings

Create a record of:

Issues found and fixes applied
Before/after metrics
Remaining technical debt
Recommendations for future work

Performance Optimization Workflow

Systematic approach to improving page speed and Core Web Vitals.

Measure Current Performance

Establish baseline metrics:

# Lab testing (synthetic)
npx lighthouse https://your-site.com --only-categories=performance

# Field testing (real users)
# Check Chrome User Experience Report (CrUX)
# Or implement web-vitals library:

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics({name, value, rating}) {
  gtag('event', name, {
    event_category: 'Web Vitals',
    value: Math.round(name === 'CLS' ? value * 1000 : value),
    event_label: rating
  });
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

Identify LCP Element

Find what’s causing slow Largest Contentful Paint:

// Add to your page temporarily
new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP element:', lastEntry.element);
  console.log('LCP time:', lastEntry.startTime);
}).observe({ type: 'largest-contentful-paint', buffered: true });

Common LCP elements:

Hero image
Large text block
Background image
Video poster

Optimize LCP

Apply targeted fixes:

Reduce Server Response Time (TTFB < 800ms)

Use a CDN for edge caching
Enable Brotli or Gzip compression
Optimize database queries
Use edge functions for dynamic content
Cache HTML at the edge when possible

Eliminate Render-Blocking Resources

<!-- Inline critical CSS -->
<style>/* Above-fold styles */</style>

<!-- Defer non-critical CSS -->
<link rel="preload" href="/styles.css" as="style" 
      onload="this.onload=null;this.rel='stylesheet'">

<!-- Defer JavaScript -->
<script defer src="/app.js"></script>

Preload LCP Image

<link rel="preload" 
      href="/hero.webp" 
      as="image" 
      fetchpriority="high">

<img src="/hero.webp" 
     fetchpriority="high" 
     loading="eager" 
     width="1200" 
     height="600" 
     alt="Hero">

Optimize Image Format & Size

Use WebP or AVIF formats
Compress images (80-85% quality)
Serve correctly sized images via srcset
Remove unnecessary metadata

Optimize INP

Improve interaction responsiveness:

Break up long tasks (> 50ms)
Debounce expensive handlers
Use web workers for CPU-intensive work
Lazy load third-party scripts
Minimize JavaScript bundle size

// Break up long tasks
async function processLargeArray(items) {
  const CHUNK_SIZE = 100;
  for (let i = 0; i < items.length; i += CHUNK_SIZE) {
    const chunk = items.slice(i, i + CHUNK_SIZE);
    chunk.forEach(item => processItem(item));
    
    // Yield to main thread
    await new Promise(r => setTimeout(r, 0));
  }
}

Optimize CLS

Prevent layout shifts:

Verify in Production

Monitor real user metrics:

Check Google Search Console → Core Web Vitals
Review field data in CrUX
Monitor your analytics for web-vitals events
Test on real devices and network conditions

Pre-Deployment Checklist

Essential checks before every production deploy.

Critical Checks

High Priority Checks

Medium Priority

Ongoing Monitoring Strategy

Maintain web quality over time with regular reviews.

Daily Monitoring

Automated alerts for:
- Build failures
- Security vulnerabilities
- Production errors (via error tracking)
- Downtime (via uptime monitoring)

Weekly Review

Monthly Deep Dive

Quarterly Planning

Tech debt review: Address accumulated low-priority issues
Framework updates: Upgrade to latest stable versions
Competitive analysis: Compare to similar sites
User testing: Identify real-world usability issues
Strategy adjustment: Based on data and business goals

Quick Reference Commands

Audit Commands

# Full Lighthouse audit
npx lighthouse https://example.com --output html --output-path report.html

# Performance only
npx lighthouse https://example.com --only-categories=performance

# Accessibility only  
npx lighthouse https://example.com --only-categories=accessibility

# Mobile emulation
npx lighthouse https://example.com --preset=mobile

# Check for vulnerabilities
npm audit
npm audit fix

# Accessibility testing
npx @axe-core/cli https://example.com

Build Optimization

# Analyze bundle size (Next.js)
ANALYZE=true npm run build

# Check bundle size (general)
npx source-map-explorer build/static/js/*.js

# Optimize images
npx @squoosh/cli --webp --mozjpeg '{}' --output-dir optimized/ *.jpg

Testing

# Test with different network conditions
npx lighthouse https://example.com --throttling.rttMs=150 --throttling.downloadThroughputKbps=1600

# Desktop testing
npx lighthouse https://example.com --preset=desktop

# CI integration
npx lighthouse https://example.com --output=json | jq '.categories[].score'

Web Quality Audit

Comprehensive audit process

Performance

Speed optimization guide

Core Web Vitals

LCP, INP, CLS optimization

Get Started

Core Concepts

Guides

Full Site Audit Workflow

Performance Optimization Workflow

Pre-Deployment Checklist

Critical Checks

High Priority Checks

Medium Priority

Ongoing Monitoring Strategy

Daily Monitoring

Weekly Review

Monthly Deep Dive

Quarterly Planning

Quick Reference Commands

Audit Commands

Build Optimization

Testing

Web Quality Audit

Performance

Core Web Vitals

​Full Site Audit Workflow

​Performance Optimization Workflow

​Pre-Deployment Checklist

​Critical Checks

​High Priority Checks

​Medium Priority

​Ongoing Monitoring Strategy

​Daily Monitoring

​Weekly Review

​Monthly Deep Dive

​Quarterly Planning

​Quick Reference Commands

​Audit Commands

​Build Optimization

​Testing

​Related Skills

Web Quality Audit

Performance

Core Web Vitals

Full Site Audit Workflow

Performance Optimization Workflow

Pre-Deployment Checklist

Critical Checks

High Priority Checks

Medium Priority

Ongoing Monitoring Strategy

Daily Monitoring

Weekly Review

Monthly Deep Dive

Quarterly Planning

Quick Reference Commands

Audit Commands

Build Optimization

Testing

Related Skills