perf: Achieve 91/100 Lighthouse score with CSS inlining and responsive images #27
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Changed Google Analytics loading strategy to prioritize critical content: - Load gtag.js after window.onload event (when page is fully loaded) - Add 1-second delay to ensure page is fully interactive first - Dynamically inject script to avoid blocking initial parse Benefits: - Doesn't compete with critical resources during initial load - Prioritizes user-facing content - Analytics still collects data (just slightly deferred) - Better First Contentful Paint and user experience Performance maintained: - Performance: 86/100 - Accessibility: 100/100 - Best Practices: 100/100 - SEO: 100/100 Note: Google Analytics shows as "unused JavaScript" (56KB) in Lighthouse because it's a large third-party library with features we don't use. This is expected and acceptable for analytics tracking. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Change from listing individual lighthouse report files to a single wildcard pattern that catches all lighthouse-* files. Pattern: /lighthouse-* 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…e images Major performance improvements to achieve 91/100 Lighthouse score: - Inline style.css (11.4 KB) to eliminate 700ms render-blocking request - Reduce fonts from 18 weights to 3 critical (Geist 400/700, Geist Mono 400) - Add font preloading with fetchpriority="high" for instant discovery - Add explicit image dimensions to prevent layout shifts (CLS: 0) - Implement responsive images with srcset for 142 KB mobile savings - Add fetchpriority="high" and preload for hero image (LCP optimization) - Maintain full responsive design with CSS max-width rules Results: - Performance: 84/100 → 91/100 - Critical path latency: 11ms - CLS: 0 (perfect) - Mobile image savings: 142 KB
Add 'just generate-responsive-images' command to automate creation of responsive image variants (480w, 768w, 1024w) for background images. The command: - Generates multiple sizes using sips - Optimizes PNGs with pngquant + optipng - Converts to WebP format for better compression - Outputs file size summary This ensures responsive images can be regenerated consistently as assets are updated, maintaining the 142 KB mobile savings.
Update both CLAUDE.md and README.md to document all performance optimizations: - CSS inlining rationale (eliminates 700ms blocking request) - Font optimization (18 fonts → 3 critical weights) - Responsive images (142 KB mobile savings) - Explicit image dimensions (CLS: 0) - LCP optimization (fetchpriority + preload) - Updated Lighthouse score: 84/100 → 91/100 - Document new 'just generate-responsive-images' command Ensures future maintainers understand the "why" behind each optimization and can regenerate assets as needed.
✅ Deploy Preview for planetnix-com ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Move the base branch Lighthouse report to /tmp before checking out the PR branch, then restore it afterwards. This prevents the report from being lost when switching branches, which was causing the 'Parse Lighthouse scores' step to fail.
🔍 Lighthouse Performance ReportPerformance audit completed for commit fd6a7db Scores Comparison
Performance Impact🎉 Great job! Performance improved by 16 points! ✨ Performance score is excellent! 📊 Score Guide
Change indicators:
🚀 Current OptimizationsOptimizations in place:
🤖 Automated report generated by Lighthouse CI comparing against |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Comprehensive performance optimizations that improve Lighthouse score from 84/100 to 91/100, with a focus on eliminating render-blocking resources and optimizing image delivery.
Key Improvements
Performance Score: 84/100 → 91/100
CSS & Font Optimization
fetchpriority="high"for instant discoveryImage Optimization
fetchpriority="high"for LCP optimizationmax-width: 100%; height: auto;Developer Experience
just generate-responsive-imagescommand for reproducible asset generationPerformance Metrics
Files Changed
index.html: CSS inlining, font optimization, image dimensions, responsive imagesassets/css/style.css: Removed (now inlined)assets/images/: Added 12 responsive image variants (480w, 768w, 1024w)Justfile: Added responsive image generation commandCLAUDE.md&README.md: Updated performance documentation