← Back to Documentation
Website Optimization SOP
Purpose
Step-by-step standard operating procedures for Core Web Vitals optimization, UX standards, and A/B testing. Ties into the Web Performance and UX Track and provides ticket templates for developers.
Core Web Vitals Optimization
LCP
Largest Contentful Paint
< 2.5s
Target
FID
First Input Delay
< 100ms
Target
CLS
Cumulative Layout Shift
< 0.1
Target
📊 Step 1: Measure Baseline
- 1. Run PageSpeed Insights for all key pages
- 2. Set up Real User Monitoring (RUM) in GA4
- 3. Document current scores for LCP, FID, CLS
- 4. Identify top 10 pages by traffic for optimization
Tools: PageSpeed Insights, Chrome DevTools, WebPageTest
⚡ Step 2: Optimize LCP
- ✓ Preload critical resources (hero images, fonts)
- ✓ Optimize and compress images (WebP, AVIF)
- ✓ Remove render-blocking JavaScript and CSS
- ✓ Implement critical CSS inline
- ✓ Use CDN for static assets
🎯 Step 3: Optimize FID
- ✓ Break up long JavaScript tasks
- ✓ Use web workers for heavy computations
- ✓ Reduce JavaScript execution time
- ✓ Implement code splitting
- ✓ Defer non-critical JavaScript
📐 Step 4: Optimize CLS
- ✓ Set explicit dimensions for images and videos
- ✓ Reserve space for ads and embeds
- ✓ Avoid inserting content above existing content
- ✓ Use CSS transform for animations
- ✓ Load fonts with font-display: optional
UX Standards Checklist
🎨 Visual Hierarchy
- □ Clear primary CTA above the fold
- □ Consistent heading hierarchy (H1 → H6)
- □ Adequate white space between sections
- □ Visual grouping of related content
- □ F-pattern or Z-pattern layout
📱 Mobile Experience
- □ Touch targets minimum 44x44px
- □ Thumb-friendly navigation
- □ No horizontal scrolling
- □ Readable font size (16px minimum)
- □ Sticky header optimized for mobile
♿ Accessibility
- □ Color contrast ratio 4.5:1 minimum
- □ Alt text for all images
- □ Keyboard navigation support
- □ ARIA labels where needed
- □ Focus indicators visible
🔄 Loading States
- □ Skeleton screens for dynamic content
- □ Progress indicators for long processes
- □ Error states with recovery options
- □ Empty states with clear CTAs
- □ Optimistic UI updates
A/B Testing Framework
🧪 Testing Process
- 1. Hypothesis: Define what you're testing and expected outcome
- 2. Sample Size: Calculate required traffic (minimum 1000 per variant)
- 3. Duration: Run for at least 1 full business cycle (typically 2 weeks)
- 4. Significance: Aim for 95% statistical confidence
- 5. Decision: Implement winner or iterate
📊 What to Test
High Impact
- • Headlines and value props
- • CTA buttons (text, color, placement)
- • Pricing display
- • Form fields
Medium Impact
- • Images and videos
- • Social proof placement
- • Navigation structure
- • Page layout
📈 Test Documentation Template
Test Name: [Descriptive name] Hypothesis: We believe [change] will [outcome] because [reason] Metrics: Primary: [CVR] | Secondary: [Bounce rate, Time on page] Variants: Control: [current] | Variant A: [change] Traffic: [%] split | Sample size: [number] Duration: [Start date] to [End date] Results: Control: [metrics] | Variant: [metrics] Winner: [Control/Variant] | Confidence: [%] Next Steps: [Implement/Iterate/Abandon]
Developer Ticket Templates
🎫 Performance Optimization Ticket
Title: [PERF] Optimize LCP on [Page Name] Current State: - LCP: [X]s (Target: <2.5s) - Largest element: [element description] - PageSpeed Score: [score] Tasks: [ ] Preload hero image with <link rel="preload"> [ ] Convert images to WebP format [ ] Implement lazy loading for below-fold images [ ] Inline critical CSS [ ] Remove unused JavaScript Acceptance Criteria: - LCP < 2.5s on mobile (3G) - PageSpeed score > 90 - No visual regression Testing: - Chrome DevTools Performance audit - PageSpeed Insights (mobile & desktop) - Cross-browser testing (Chrome, Safari, Firefox)
🎫 UX Improvement Ticket
Title: [UX] Improve Mobile Navigation Problem: - Users can't easily navigate on mobile - Hamburger menu has low engagement - Key pages are 3+ taps away Solution: [ ] Implement sticky bottom navigation [ ] Add search functionality [ ] Create quick access menu for top pages [ ] Improve menu animation (< 300ms) Design: - Figma: [link to design] - Breakpoint: < 768px Acceptance Criteria: - Navigation accessible with thumb - All pages reachable in ≤ 2 taps - Animation smooth (60fps) - Meets WCAG 2.1 AA standards
🎫 A/B Test Implementation Ticket
Title: [TEST] CTA Button Color Test Hypothesis: Changing CTA from blue to green will increase CTR by 15% Implementation: [ ] Set up test in Google Optimize/VWO [ ] Create variant with green button (#00B67A) [ ] Configure 50/50 traffic split [ ] Set up event tracking for clicks [ ] QA both variants Tracking: - Event: button_click - Label: [control/variant] - Goal: form_submission Duration: 14 days Sample size: 2000 per variant Rollback Plan: If negative impact > 10%, revert immediately
Performance Monitoring
📊 Weekly Performance Review
Monday: Baseline Check
Run PageSpeed Insights on top 10 pages
Wednesday: RUM Review
Check Core Web Vitals in GA4
Friday: Test Results
Review A/B tests and make decisions
Quick Wins Checklist
🚀 Immediate Impact (< 1 day)
- □ Enable text compression (gzip/brotli)
- □ Set up browser caching headers
- □ Minify CSS and JavaScript
- □ Remove unused plugins/scripts
- □ Optimize favicon and app icons
⚡ Week 1 Improvements
- □ Implement lazy loading
- □ Convert images to next-gen formats
- □ Set up CDN
- □ Add resource hints (preconnect, dns-prefetch)
- □ Implement critical CSS
Tools and Resources
📊
Analytics
GA4, GTM
🏃
Performance
PageSpeed, WebPageTest
🧪
Testing
Optimize, VWO
🔥
Heatmaps
Hotjar, Clarity
Ready to Optimize?
Transform your website into a high-performance conversion machine. Contact henry@primechasedata.com to start your optimization journey.