IvyyDev.se – ombyggnad för hastighet och SEO
Jag byggde om ivyydev.se från botten upp med React, Vite, TypeScript och Tailwind. En enda SEOHead hanterar meta, hreflang och JSON-LD. Prestandan förbättrades med icke-blockerande CSS (Vite-plugin), lazy-load + min-height för CLS-fix, PageHero på inre sidor och content-visibility för under-the-fold.
1 vecka
Byggtid
Solo-projekt
Team
SEO
Bättre standard
DX
Renare flöde
Utmaning, lösning och resultat
Utmaning
Det gamla upplägget gjorde publicering segt, SEO låg utspritt och Lighthouse rapporterade CLS samt att CSS blockerade first paint.
Lösning
En enda SEOHead-komponent (meta, canonical, hreflang, OG, Twitter, JSON-LD), Vite manualChunks och cssAsyncLoad för icke-blockerande CSS. Lazy-load av under-the-fold med requestIdleCallback och en min-height-wrapper för att fixa CLS. PageHero på inre sidor och content-visibility: auto för mindre layoutarbete.
Resultat
Lägre CLS och TBT, snabbare FCP/LCP, enhetlig hero och SEO på ett ställe. Förutsägbar kodbas att bygga vidare på.
Tekniska lösningar i korthet
- SEOHead: meta, canonical, hreflang, OG, Twitter, JSON-LD (BlogPosting, BreadcrumbList)
- Vite: manualChunks (react, router, query, radix), cssAsyncLoad för icke-blockerande CSS
- CLS-fix: min-height-wrapper kring lazy-sektioner; content-visibility: auto under the fold
- PageHero på inre sidor; section-blend-after-hero för mjuk övergång
- Defer av Analytics/CookieBanner via requestIdleCallback i App.tsx
SEO
Canonical, hreflang, Open Graph och JSON-LD
Prestanda
Vite, ren asset-hantering, minimalt JS
DX
TypeScript och komponent-först
Tillväxt
Sitemap och redirects för ren indexering
Relaterade artiklar
Så byggde jag om IvyyDev.se
Så byggde jag om sajten med React, Vite, TypeScript och Tailwind – arkitektur och lärdomar.
IT & webbyrå i Sölvesborg
Lokal hjälp för support, reparation och webb.