Jatin K Malik and GitHub
0d9c488d82
fix: optimize PageSpeed Insights performance ( #115 )
...
* fix: optimize PageSpeed Insights performance
This commit addresses several PageSpeed Insights issues to improve
the performance score from 56 to a target of 90+.
Changes:
- Add SWC config to output modern ES2022 JavaScript, eliminating
unnecessary polyfills (~12 KiB savings)
- Convert vocalinux.png to WebP format (17KB vs 207KB - 92% reduction)
- Add OptimizedImage component with WebP/PNG fallback support
- Add _headers file for proper static asset caching (1 year cache
for immutable assets)
- Configure Next.js with optimizePackageImports for framer-motion
and lucide-react
- Fix heading hierarchy issue (Quick Install h3 -> h2)
- Add console.log removal in production builds
Expected improvements:
- Image delivery: ~41 KiB savings
- Legacy JavaScript: ~12 KiB savings
- Cache lifetime: 754 KiB proper caching
- Accessibility score: 98 -> 100 (heading order fix)
* test: add coverage for PageSpeed optimization
Add comprehensive test suite for PageSpeed Insights optimization changes:
- WebP image loading tests (optimized-image.tsx)
- next/image component configuration tests (next.config.js)
- _headers file generation and cache header tests
- Lazy loading behavior tests
Includes:
- Jest configuration with TypeScript support
- React Testing Library setup
- 54 test cases covering all PageSpeed optimization features
- Build verification
All tests pass: npm run test
Build passes: npm run build
* ci: trigger workflow
* ci: trigger workflow run
* ci: trigger workflow
2026-02-04 19:25:34 -08:00
Jatin K Malik and GitHub
071b7b5da3
perf: optimize PageSpeed Insights performance score ( #105 ) ( #106 )
...
This commit implements comprehensive performance optimizations to improve
the PageSpeed Insights score from 70/100 to targeting 90+.
## Images & Assets (Est. 200+ KiB savings)
- Optimize vocalinux.png: 207KB → 44KB (79% reduction)
- Add WebP versions for all logo sizes (32, 64, 96, 192, 512px)
- Create og-image.webp: 274KB → 176KB (36% reduction)
- All WebP images provide ~92% size reduction over PNG
## JavaScript Optimization (Est. 84 KiB savings)
- Lazy load react-syntax-highlighter with next/dynamic
- Created CodeBlock component for async code highlighting
- Reduces initial bundle size by deferring heavy syntax highlighter
## Bundle Configuration
- Disable production source maps (reduces bundle size)
- Add .browserslistrc targeting modern browsers (est. 12 KiB savings)
- Remove legacy browser polyfills (IE11, old Android, etc.)
## Critical Rendering Path (Est. 300ms LCP improvement)
- Add preconnect hint for api.github.com
- Defer Google Analytics to lazyOnload strategy
## Caching Strategy
- Add cache headers configuration for static assets
- Cache-Control: public, max-age=31536000, immutable
- Applied to _next/static/* and image assets
## Accessibility Fixes
- Fix footer color contrast: text-zinc-500 → text-zinc-400
- Add prefers-reduced-motion media query support
- All animations respect user motion preferences
## Expected Impact
- Total estimated LCP reduction: ~1.5-2 seconds
- Bundle size reduction: ~100 KB
- Targeting 90+ performance score (up from 70)
2026-01-30 22:47:59 -08:00
