Optimize all website images for web delivery

[garbas]

Summary

This PR implements comprehensive web performance optimizations including image optimization, lazy loading, and automated performance testing infrastructure.

Changes

1. Image Optimization (Commit 1)

Optimized all PNG images in assets/images/ using pngquant and optipng to significantly reduce file sizes while maintaining visual quality.

Large Background Images:

• location-bg.png: 940 KB → 186 KB (80.2% reduction)
• about-bg.png: 646 KB → 91 KB (85.9% reduction)
• hero-moon.png: 192 KB → 10 KB (94.8% reduction)

Speaker Images (267x267px):

• speaker_kelsey_hightower.png: 77 KB → 19 KB (75.3% reduction)
• speaker_priya_ananthasankar.png: 120 KB → 35 KB (70.8% reduction)
• speaker_rok_garbas.png: 75 KB → 21 KB (72.0% reduction)
• speaker_ron_efroni.png: 115 KB → 35 KB (69.6% reduction)
• speaker_stormy_peters.png: 80 KB → 19 KB (76.3% reduction)

Icons & Favicons:

• android-chrome-192x192.png: 14 KB → 10 KB (25.8% reduction)
• android-chrome-512x512.png: 53 KB → 39 KB (27.0% reduction)
• apple-touch-icon.png: 12 KB → 9.1 KB (25.9% reduction)
• favicon-16x16.png: 668 B → 530 B (20.7% reduction)
• favicon-32x32.png: 1.5 KB → 1.1 KB (26.7% reduction)
• grid.png: 15 KB → 7.5 KB (50.0% reduction)
• flox_logo.png: 1.7 KB → 1.5 KB (11.8% reduction)

Overall Impact:

• Total Original Size: ~2.3 MB
• Total Optimized Size: ~556 KB
• Overall Savings: ~76.6% (1.8 MB saved!)

Optimization tools (imagemagick, pngquant, optipng, libwebp) added to flox environment for future use.

2. Lazy Loading Implementation (Commit 2)

Added native HTML lazy loading to 12 below-the-fold images:

• 5 speaker images (127 KB total)
• 2 large background images (277 KB total)
• 5 about section SVG icons

Benefits:

• Reduces initial page load from ~556 KB to ~139 KB of images
• 94% reduction in initial image payload
• Improves First Contentful Paint and Largest Contentful Paint
• Images load automatically as user scrolls near them

Also added descriptive alt attributes for better accessibility.

Hero images (hero-moon.png, logo) intentionally not lazy-loaded as they are above the fold and critical for initial render.

3. Just Command Runner (Commit 3)

Set up Just as a command runner for common development tasks with automated performance testing via Lighthouse.

Available commands:

just dev                 # Start development server
just lighthouse          # Run full Lighthouse audit (HTML report)
just lighthouse-full     # Comprehensive desktop audit
just lighthouse-mobile   # Mobile performance audit
just perf                # Quick performance score check
just optimize-images     # Re-run image optimization
just clean               # Remove generated reports
just info                # Show environment information

Flox packages added:

• just (1.43.1): Command runner
• nodejs (22.21.1): For running Lighthouse via npx

Documentation:

• Complete documentation included in Justfile header comments (65 lines)
• Run just to see all available commands

Current performance score: 84/100

4. GitHub Workflow for Lighthouse CI (Commit 4)

Created automated Lighthouse audits that run on every pull request, compare against the base branch, and post results as a comment.

Features:

• Runs on PR open, synchronize, and reopen events
• Only triggers on changes to index.html, assets/, or the workflow itself
• Tests base branch first, then PR branch
• Compares all 4 Lighthouse categories: Performance, Accessibility, Best Practices, SEO
• Uses Flox environment for consistent tooling

Workflow process:

1. Checkout and test base branch (e.g., main)
2. Checkout and test PR branch
3. Calculate score deltas
4. Post comparison comment to PR

PR Comment shows:

• Side-by-side score comparison (base vs PR)
• Color-coded change indicators:
  • 🟢 Positive change (improvement)
  • 🔴 Negative change (regression)
  • ⚪ No change
• Performance impact summary
• Expandable sections for score guide and optimization tips
• Automatic update on subsequent commits

Combined Impact

Before this PR:

• Total images: ~2.3 MB
• All images load on initial page load
• No performance testing automation

After this PR:

• Optimized images: ~556 KB (76.6% reduction)
• Initial page load: ~139 KB of images (94% reduction in initial payload)
• Lazy loading for below-fold content
• Automated performance testing on every PR
• Performance score: 84/100

Testing

Tested with Playwright MCP:

• ✅ Verified all 12 images have loading="lazy" attribute
• ✅ Confirmed hero images load immediately (not lazy)
• ✅ All images render correctly
• ✅ Alt attributes properly set for accessibility

Tested with Just commands:

• ✅ just perf - Performance score: 84/100
• ✅ Dev server starts correctly
• ✅ Lighthouse reports generate successfully

Files Changed

• index.html - Added lazy loading attributes and alt tags
• assets/images/*.png - Optimized all PNG images
• Justfile - New command runner with comprehensive inline docs
• .github/workflows/lighthouse-pr.yml - New CI workflow for performance testing
• .gitignore - Added Lighthouse reports and temp files
• .flox/env/manifest.toml & .flox/env/manifest.lock - Added just, nodejs packages

Next Steps

After this PR is merged:

• Monitor Lighthouse CI results on future PRs
• Use just lighthouse locally to test performance before pushing
• Consider additional optimizations suggested by Lighthouse reports

[netlify]

✅ Deploy Preview for planetnix-com ready!

Name	Link
🔨 Latest commit	fe8c72f
🔍 Latest deploy log	https://app.netlify.com/projects/planetnix-com/deploys/693ac46fb2aa7c0008fb9c3f
😎 Deploy Preview	https://deploy-preview-25--planetnix-com.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.