Lighthouse Performance Optimizations: 99→100 Score Target#9
Merged
Conversation
Accessibility improvements: - Add <main> landmark to default layout for screen reader navigation Image optimizations (saves ~900 KiB): - Add explicit width/height to all images (prevents CLS) - Convert 15 blog PNG images to WebP format - Convert og-image.png to WebP - Implement <picture> elements with WebP sources in blog posts - Reduce image payload by ~70% (1.3MB PNG → 400KB WebP) Caching strategy (saves 267 KiB on repeat visits): - Create _headers file with cache-control directives - 1-year cache for static assets (images, CSS, JS) - 1-hour cache with revalidation for HTML - Add security headers (X-Frame-Options, X-Content-Type-Options, etc.) CSS optimization (saves 11 KiB + reduces render-blocking): - Load non-critical CSS asynchronously (blog, plan, contact, comparison) - Preload Google Fonts to prevent render-blocking - Keep theme.css and layout.css synchronous (critical for first paint) JavaScript optimization (saves 140 KiB on most pages): - Conditionally load Swiper.js only on pages that need it (homepage) - Add defer attribute to all scripts - Reduce unnecessary JS on blog, about, pricing pages Render-blocking resolution (saves 320ms on FCP): - Async non-critical CSS with media="print" trick - Defer all JavaScript execution - Preconnect to external font domains Total savings: ~1,300 KiB data + 320ms render time Expected scores: Performance 100/100, Accessibility 100/100 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Problem: Jekyll Polyglot plugin was not passing page.title and page.description variables correctly, resulting in empty meta tags for blog pages. Solution: Use site.active_lang in default layout to detect language and serve appropriate meta tags for blog pages. Added fallback logic based on page.url to identify blog pages since page.page_id was also being overridden. Changes: - Modified _layouts/default.html to add language-specific meta tags for /blog/ - Updated blog page permalinks from /blog/ to blog/ (remove leading slash) - Added blog.page_title and blog.page_description to EN/FR strings.yml - Changed blog pages to use page layout instead of default Meta descriptions now display correctly: - EN: "Learn modern project management strategies, release planning..." - FR: "Apprenez les stratégies modernes de gestion de projet..." - ES: "Aprenda estrategias modernas de gestión de proyectos..." 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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
Complete implementation of all Lighthouse audit recommendations to achieve perfect 100/100 scores across all categories.
Accessibility (98→100)
<main>landmark to default layout for improved screen reader navigationImage Optimizations (~900 KiB savings)
widthandheightattributes to all images (prevents CLS)<picture>elements with WebP sources in blog post layoutCaching Strategy (267 KiB savings on repeat visits)
_headersfile with optimized cache-control directivesCSS Optimizations (11 KiB savings + render-blocking reduction)
JavaScript Optimizations (140 KiB savings on most pages)
deferattribute to all scripts for non-blocking executionRender-Blocking Resolution (320ms FCP improvement)
media="print"loading patternImpact
Total Savings:
Expected Lighthouse Scores:
Files Modified
_layouts/default.html- Main landmark, CSS/JS optimization_layouts/post.html- Image dimensions, WebP support_includes/index.html- Image dimensions, deferred scripts_includes/comparison-table.html- Logo dimensions_config.yml- Include _headers in buildindex.html- Conditional Swiper loading flag_headers- NEW: Cache and security headersassets/images/blog/*.webp- 16 NEW WebP imagesTest Plan
bundle exec jekyll build)🤖 Generated with Claude Code