Open
Conversation
- Fix critical image lazy-loading bug in SnapshotPlaygroundScroll:
loading={index >= 3 ? 'eager'} → 'lazy', preventing all 14
playground screenshots (~5.4MB) from downloading on initial load
- Lower hero image quality from 100 → 75 in HeroImage, reducing
LCP image weight while keeping visual fidelity
- Fix NanumPenScript font-display: block → swap to unblock rendering
while the decorative handwriting font loads
- Defer 797KB view-transition GIF: change CSS fallback from
url('/images/i-love-you-love.gif') to none so the GIF is only
fetched when the user clicks the theme toggle (already set via JS)
- Add long-term Cache-Control headers (1 year, immutable) for
/screenshots/*, /fonts/*, /images/* in next.config.mjs
- Remove unused @tabler/icons-react dependency from package.json
Co-Authored-By: Oz <oz-agent@warp.dev>
Contributor
|
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.
Web Performance Audit — Fixes
Findings and fixes from a codebase audit of
dockerman.app(Next.js 16 + Tailwind CSS v4 + Turbo).Fixes
Critical: Image lazy-loading bug (
SnapshotPlaygroundScroll.tsx)loading={index >= 3 ? 'eager' : undefined}should be'lazy'. This caused all 14 playground screenshots (~5.4MB of PNGs before optimizer compression) to download eagerly on page load. Only the first 3 are visible; the rest should be deferred.LCP image quality (
HeroImage.tsx)Both hero images used
quality={100}, the maximum. Changed toquality={75}, which is visually indistinguishable for UI screenshots but generates significantly smaller optimized images from Next.js's image pipeline.Render-blocking font (
globals.css)NanumPenScript(a decorative handwriting font used for accent text) usedfont-display: block, which holds back text rendering until the font arrives. Changed tofont-display: swap— text renders immediately with a fallback and swaps when the font loads.797 KB GIF eagerly downloaded on CSS parse (
globals.css)/images/i-love-you-love.gifwas referenced as a CSSmaskfallback in::view-transition-new(root). Browsers pre-fetch URLs in CSS at parse time — before any user interaction. The GIF is only needed for the theme-toggle animation (which already sets--transition-maskvia JS). Changed the fallback from the URL tononeto defer the fetch until the user actually clicks the toggle.Long-term caching for static assets (
next.config.mjs)Added
Cache-Control: public, max-age=31536000, immutablefor/screenshots/*,/fonts/*, and/images/*. Previously these served withmax-age=0, must-revalidate, forcing a conditional re-fetch on every page visit.Removed unused dependency
@tabler/icons-reactwas listed inpackage.jsonbut is never imported anywhere in the codebase.Not changed (informational)
/→/en): The middleware handles this at the edge and sets a 1-year cookie, so only the very first visit incurs the redirect hop. Acceptable tradeoff for i18n.curl -sIprobe didn't advertiseAccept-Encoding: brcorrectly.This PR was generated with Oz.