perf: mobile performance optimization#2
Merged
Conversation
- Add remotePatterns for demo.daolanx.com in next.config.ts - Replace raw <img> with next/image in ProjectRow and ProjectCard - Use fill + sizes for responsive image loading - Expected savings: ~360KB on mobile (from 447KB to ~87KB)
- Add isDesktop() utility for viewport check - Bail early in useEffect when viewport < 768px - Prevents unused requestAnimationFrame loop on mobile
- Add custom image loader with deviceSizes/imageSizes - Add optimizePackageImports for motion/react and lucide-react
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
dax-studio | d2cd49d | Commit Preview URL Branch Preview URL |
May 30 2026, 03:27 PM |
daolanx
force-pushed
the
perf/mobile-optimization
branch
from
4bbb13a to
192cb3c
Compare
Read window.innerWidth/Height in resize handler instead of every animation frame to prevent layout thrashing.
- Move ParticleCanvas after Footer to unblock first paint - Use requestIdleCallback to delay initialization until browser idle - SSR disabled, only loads on client side
- Remove FadeIn wrapper from first portfolio image (was hiding it with opacity:0) - Add priority to first portfolio image for preload - Reduce Space Mono to weight 400 only (700 unused)
- Replace material-symbols-outlined font with lucide-react icons - Use inline SVG for GitHub/Twitter brand icons - Remove external Google Fonts CSS link (zero network requests) - Use CSS variables from next/font for all font families - Switch font-display to optional for better LCP
- Move View All links to bottom center for better UX - Responsive hero: smaller min-height and padding on mobile - Hero social links: icon-only on mobile, full labels on desktop - CaseLink: vertical stack on mobile, horizontal on desktop - Consistent button styles: square corners, border-on-surface - Remove FadeIn from hero section to improve LCP - Replace Material Symbols with lucide-react/inline SVG - Use CSS variables from next/font for all font families - Switch font-display to optional
Owner
Author
Before
After
|
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.
Mobile Performance & UI Optimization
LCP Optimization
FadeInfrom hero section — LCP element was hidden withopacity: 0, delaying Lighthouse LCP timerpriorityto above-the-fold portfolio image for preloadfont-displayfromswaptooptional— eliminates FOIT/FOUT and layout shiftnext/fontfor all font families in Tailwind themeBundle Size Reduction
<img>withnext/imageusingfill+sizesfor responsive loadingoptimizePackageImportsto match actual import path (framer-motion)Mobile UX Improvements
min-hfrom90vhto70vhon mobile, smaller paddinghidden md:inline)border-on-surface, hover fill effectRender-Blocking & JS Deferral
ParticleCanvaswithnext/dynamic(ssr: false) +requestIdleCallbackParticleCanvasto bottom of page to unblock first paintinnerWidth/Heightto avoid forced reflow in animation loopConfiguration
poweredByHeader: falsedeviceSizesandimageSizesfor image delivery🤖 Generated with Claude Code