Performance & Accessibility

📋 Overview

Page performance and accessibility are critical quality signals for LLMs. Fast-loading, accessible pages demonstrate technical excellence and user-first design, making them more likely to be recommended by AI systems.

🎯 Why Performance Matters

LLMs consider performance because:

• Speed indicates quality: Fast sites suggest professional development
• User satisfaction: Better performance = better user experience
• Mobile-first indexing: Mobile performance is especially critical
• Accessibility signals: Accessible sites demonstrate inclusivity

🔧 Core Web Vitals

Google's Core Web Vitals are key performance metrics:

1. Largest Contentful Paint (LCP)

What it measures: Loading performance

Target: Under 2.5 seconds

How to improve:

• Optimize images (compress, use WebP, lazy load)
• Reduce server response time
• Remove render-blocking resources
• Use a CDN for static assets

2. First Input Delay (FID)

What it measures: Interactivity

Target: Under 100 milliseconds

How to improve:

• Minimize JavaScript execution
• Break up long tasks
• Use web workers for heavy processing
• Optimize third-party scripts

3. Cumulative Layout Shift (CLS)

What it measures: Visual stability

Target: Under 0.1

How to improve:

• Set size attributes on images and videos
• Reserve space for ads and embeds
• Avoid inserting content above existing content
• Use transform animations instead of layout-triggering properties

⚡ Performance Optimization Techniques

Image Optimization

• Compress images (aim for < 100KB)
• Use modern formats (WebP, AVIF)
• Implement lazy loading
• Use responsive images (srcset)
• Remove image metadata

Code Optimization

• Minify CSS, JavaScript, and HTML
• Remove unused CSS and JavaScript
• Enable compression (Gzip or Brotli)
• Defer non-critical JavaScript
• Inline critical CSS

Server Optimization

• Use HTTP/2 or HTTP/3
• Enable browser caching
• Implement CDN
• Optimize database queries
• Use server-side caching

Resource Loading

• Preload critical resources
• Prefetch next-page resources
• Use dns-prefetch for external domains
• Lazy load images and videos
• Defer third-party scripts

♿ Accessibility Optimization

Essential Accessibility Features

• Alt text: Descriptive text for all images
• Semantic HTML: Proper use of headings, lists, landmarks
• Keyboard navigation: All functionality accessible via keyboard
• Color contrast: 4.5:1 ratio for normal text, 3:1 for large text
• Form labels: Every input has an associated label
• ARIA labels: For complex interactive elements

WCAG 2.1 Level AA Compliance

• Text alternatives for non-text content
• Captions for audio and video
• Content is keyboard accessible
• Users have enough time to read content
• No content flashing more than 3 times per second
• Clear page titles and headings
• Consistent navigation across pages

✅ Performance Checklist

• □ LCP under 2.5 seconds
• □ FID under 100 milliseconds
• □ CLS under 0.1
• □ Images optimized and compressed
• □ CSS and JavaScript minified
• □ Browser caching enabled
• □ CDN implemented
• □ Lazy loading enabled for images
• □ Third-party scripts deferred
• □ Mobile performance optimized

✅ Accessibility Checklist

• □ All images have alt text
• □ Proper heading hierarchy (H1 > H2 > H3)
• □ Color contrast meets WCAG AA standards
• □ Forms have labels and helpful errors
• □ Site is navigable by keyboard
• □ Focus indicators are visible
• □ Links have descriptive text
• □ Page has descriptive title
• □ Language is declared in HTML
• □ No automatic audio or video playback

🚀 Quick Wins

1. Compress images: Use TinyPNG or similar tool (aim for 70-80% reduction)
2. Enable caching: Set cache headers for static resources (1 year)
3. Add alt text: Describe every image (5-15 words)
4. Minify code: Use build tools to minify CSS/JS
5. Lazy load images: Add loading="lazy" to img tags

📊 Performance Targets

Metric	Good	Needs Improvement	Poor
LCP	≤ 2.5s	2.5s - 4s	> 4s
FID	≤ 100ms	100ms - 300ms	> 300ms
CLS	≤ 0.1	0.1 - 0.25	> 0.25

🔧 Testing Tools

• PageSpeed Insights - Core Web Vitals and performance
• WebPageTest - Detailed performance analysis
• WAVE - Accessibility evaluation
• Lighthouse - Comprehensive auditing
• GTmetrix - Performance monitoring

📚 Image Optimization Tools

• TinyPNG - Smart PNG and JPEG compression
• Squoosh - Modern image compression
• ImageOptim - Mac app for image optimization
• Cloudinary - Image CDN with automatic optimization