perf: homepage load speed, image, and icon-font optimizations#310
Merged
Conversation
- Lazy-load Chessground in ErrorBoundary and PlaySetupModal via next/dynamic - Split barrel imports (src/contexts, src/components) to direct paths for better tree-shaking and code-splitting - Optimize Material Symbols font loading (preconnect/preload, swap, and hide icons until the font is ready to avoid layout flash) - Homepage component updates (GameCarousel, HomeHero, index) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Convert team avatars and paper-card previews from raw <img> to next/image (responsive srcset, WebP/AVIF delivery, automatic lazy-loading below fold) - Add scripts/optimize-images.mjs and downscale oversized source assets in place (team avatars to 320px, paper previews to 900px): 7.6MB -> 0.57MB Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The icon font URL requested the full variable font across every axis range (opsz/wght/FILL/GRAD), making Google serve a ~3.8MB woff2 - the single largest resource on every page and the long pole on the load event. Only wght 200-400 and FILL 0/1 are actually used, so pin opsz=24/GRAD=0 and narrow the ranges: Google now serves a ~1.1MB instance (-72%). Also downscale favicon.png from 809x809/104KB to 64x64/2.7KB. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
# Conflicts: # src/pages/_app.tsx
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Combines three complementary homepage/app performance optimizations. Measured via headless-Chrome A/B (median runs) against
main.Results — homepage first load (cold cache)
What's included
1. JS bundle (
speed up homepage and app initial load)next/dynamicsrc/contexts,src/components) to direct paths so the shared_appchunk tree-shakes (565 kB → 292 kB)2. Images (
optimize homepage images)next/image(responsive, WebP/AVIF, lazy below the fold)scripts/optimize-images.mjsdownscales oversized source assets in place (7.6 MB → 0.57 MB). Image bytes on the homepage: −99%.3. Icon font + favicon (
shrink Material Symbols icon font and favicon)wght 200-400andFILL 0/1are used, so pinopsz=24/GRAD=0and narrow ranges → ~1.1 MB instance (−72%).First paint (FCP/LCP) is unchanged — these target time-to-interactive and full-load, not the critical render path.
🤖 Generated with Claude Code