# Comparison Pages Optimization Checklist


**Last Updated:** 2025-11-20

Use this checklist when creating or updating comparison pages to ensure optimal text-HTML ratio and performance.

## Pre-Creation Checklist

- [ ] Choose correct template (`compare_template_details.php` or `compare_template_nodetails.php`)
- [ ] Review competitor data and gather all required information
- [ ] Prepare competitor logo images (160x160px square, 320x64px comparison logo)

## JavaScript Optimization

- [ ] No inline `<script>` blocks added
- [ ] All JavaScript functionality added to `/v2/js/comparison-pages.js`
- [ ] Run `npm run minify` after JavaScript changes
- [ ] Script reference uses minified version: `comparison-pages.min.js`
- [ ] Script tag includes `defer` attribute for non-critical scripts

## SVG Optimization

- [ ] Large SVGs (>10KB) externalized to `/v2/img/svg/`
- [ ] Repeated icons (stars, arrows) use sprite sheet `/v2/img/svg/star-icons.svg`
- [ ] Static SVGs use `<img>` tags with `loading="lazy"` for below-fold
- [ ] Interactive SVGs remain inline but optimized (minified paths, removed unnecessary attributes)

## Performance Optimization

- [ ] Resource hints added (preconnect, dns-prefetch for external domains)
- [ ] LCP image preloaded with `fetchpriority="high"`
- [ ] Non-critical CSS deferred using `media="print"` trick
- [ ] Images have explicit `width` and `height` attributes
- [ ] Images use WebP format with responsive srcset
- [ ] Below-fold images have `loading="lazy"` attribute

## Content Enhancement

- [ ] Hero description expanded (minimum 2 sentences with context)
- [ ] Product description includes target audience and use cases
- [ ] FAQ section has minimum 5-7 detailed questions with comprehensive answers
- [ ] Comparison tables have descriptive text above/below
- [ ] Feature sections include contextual explanations

## Schema & Meta Tags

- [ ] Schema markup updated with competitor data
- [ ] Schema validated with Google Rich Results Test
- [ ] All schema URLs are absolute and correct
- [ ] Meta tags updated (title, description, keywords)
- [ ] Open Graph tags complete
- [ ] Canonical URL correct

## HTML Structure

- [ ] Semantic HTML5 elements used where appropriate (`<section>`, `<article>`, `<aside>`)
- [ ] Unnecessary wrapper divs removed
- [ ] CSS classes consolidated (no redundant classes)
- [ ] Empty or unnecessary elements removed
- [ ] HTML nesting depth minimized

## Testing & Validation

- [ ] Page tested locally at `http://localhost:8003`
- [ ] HTML structure validated (W3C HTML validator)
- [ ] Schema validated (Google Rich Results Test)
- [ ] No console errors
- [ ] Responsive design tested (mobile, tablet, desktop)
- [ ] Cross-browser testing (Chrome, Firefox, Safari, Edge)
- [ ] Performance tested (PageSpeed Insights, Lighthouse)
- [ ] Text-HTML ratio measured (target >25%)
- [ ] Visual regression testing (compare with existing pages)

## Post-Deployment

- [ ] Monitor performance metrics (LCP, CLS, FID)
- [ ] Check Google Search Console for schema errors
- [ ] Verify page loads correctly in production
- [ ] Test all interactive elements (tooltips, expandable sections, CTAs)

## Quick Reference

**JavaScript:**
```html
<script src="/v2/js/comparison-pages.min.js?v=<?php echo filemtime(__DIR__ . '/../js/comparison-pages.min.js'); ?>" defer></script>
```

**Resource Hints:**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
```

**SVG Sprite:**
```html
<svg><use href="/v2/img/svg/star-icons.svg#star-filled"></use></svg>
```

**External SVG:**
```html
<img src="/v2/img/svg/icon.svg" alt="Description" loading="lazy" width="20" height="20">
```

## Related Documentation

- `docs/guides/COMPARISON_PAGES_OPTIMIZATION.md` - Detailed optimization guide
- `.cursor/rules/comparison-pages.mdc` - Cursor rules with optimization guidelines
- `docs/guides/comparison-pages/COMPARISON_PAGES_GUIDE.md` - Complete creation workflow