IvyyDev Website Rebuild – Speed, SEO, Maintainability
I rebuilt ivyydev.se from the ground up with React, Vite, TypeScript and Tailwind. A single SEOHead handles meta, hreflang and JSON-LD. Performance improved with non-blocking CSS (Vite plugin), lazy-load plus min-height for CLS fix, PageHero on inner pages and content-visibility for below-the-fold.
1 week
Build Time
Solo project
Team
SEO
Better defaults
DX
Cleaner workflow
Challenge, solution and impact
Challenge
The old setup made publishing slow, SEO was scattered, and Lighthouse reported CLS and CSS blocking first paint.
Solution
A single SEOHead component (meta, canonical, hreflang, OG, Twitter, JSON-LD), Vite manualChunks and cssAsyncLoad for non-blocking CSS. Lazy-load of below-the-fold content with requestIdleCallback and a min-height wrapper to fix CLS. PageHero on inner pages and content-visibility: auto to reduce layout work.
Impact
Lower CLS and TBT, faster FCP/LCP, consistent hero and SEO in one place. Predictable codebase to build on.
Technical solutions in short
- SEOHead: meta, canonical, hreflang, OG, Twitter, JSON-LD (BlogPosting, BreadcrumbList)
- Vite: manualChunks (react, router, query, radix), cssAsyncLoad for non-blocking CSS
- CLS fix: min-height wrapper around lazy sections; content-visibility: auto below the fold
- PageHero on inner pages; section-blend-after-hero for smooth transition
- Defer Analytics/CookieBanner via requestIdleCallback in App.tsx
SEO
Canonical, hreflang, Open Graph and JSON-LD
Performance
Vite, clean assets, minimal JS
DX
TypeScript and component-first structure
Growth
Sitemap and redirects for clean indexing
Related Articles
How I Rebuilt IvyyDev.se
How I rebuilt the site with React, Vite, TypeScript and Tailwind – architecture and lessons learned.
IT & Web Agency in Sölvesborg
Local IT help and website packages with clear pricing and fast response.