Så byggde jag om IvyyDev.se: snabbare, tydligare SEO och enklare att underhålla

Jag byggde nyligen om ivyydev.se från botten upp. Målet var enklare: snabbare sida, tydlig SEO från start och ett flöde där jag kan publicera blogg och portfolio utan att lägga tid på verktyg. Fokus låg på det som ger mest värde – hastighet, sökrankning och underhållbar kod. Här beskriver jag arkitekturen, de problem jag stötte på och hur jag löste dem i koden.

Varför bygga om?

Det tidigare upplägget funkade för statiska sidor, men varje ny artikel eller portfolio-post krävde för mycket manuellt arbete och SEO låg utspritt. Jag ville ha en liten, modern stack utan onödig friktion: React + Vite + TypeScript, Tailwind för styling och ett konsekvent UI-kit. Inget team – bara jag och koden.

Arkitektur i kod

• React + Vite + TypeScript – snabb dev-loop och tydliga typer. Vite med manualChunks delar upp react, router, query och radix i egna chunks så att main-bundeln blir mindre och TBT (Total Blocking Time) sänks.
• Tailwind – konsekvent design; CSS-variabler för tema och gemensamma utility-klasser som section-blend-after-hero och content-visibility-auto.
• En enda SEOHead-komponent – varje sida skickar in title, description, canonical, hreflang, schema. Komponenten sätter document title, meta description/keywords, canonical link, hreflang-länkar (inkl. x-default), Open Graph, Twitter Cards och injicerar JSON-LD (t.ex. BlogPosting och BreadcrumbList via generateArticleSchema / generateBreadcrumbSchema). Allt SEO på ett ställe.
• Blogg och portfolio – samma sidlayout: breadcrumb, h1, meta, artikel. Innehåll ligger i TSX-filer, versionshanterat i Git.
• PageHero – inre sidor (pilotprojekt, locations, integritet m.fl.) använder samma hero som startsidan: samma bakgrundsbild (avif/webp), gradient, grid, orbs och hero-fade-bottom för mjuk övergång till nästa sektion.

Mer om projektet i portfoliot.

Problem jag löste (och hur)

Under bygget stötte jag på några konkreta prestanda- och UX-problem som jag löste direkt i koden:

• CLS (Cumulative Layout Shift): Startsidans sektioner Services, About och Testimonials laddas lazy med requestIdleCallback så att first paint blir snabb. När de väl mountade flyttade de pilotsektionen nedåt och gav stor layout shift. Lösningen: en wrapper med min-h-[1400px] sm:min-h-[1600px] runt de lazy-sektionerna så att plats reserveras redan vid first paint. Pilotsektionen ligger då stabilt och CLS sjunker.
• FCP/LCP: Huvud-CSS:en blockerade rendering. Jag lade till en Vite-plugin (cssAsyncLoad) som i build byter stylesheet-länken till media="print" onload="this.media='all'" plus noscript-fallback, så att CSS inte blockerar first paint.
• Main thread / TBT: Analytics och CookieBanner mountas inte direkt. I App.tsx väntar jag på requestIdleCallback (med timeout 2000 ms, annars 500 ms) innan jag sätter deferredReady och renderar dem. Under-the-fold-sektioner har content-visibility: auto så att webbläsaren kan hoppa över layout för det som inte syns.
• Enhetlig hero: Inre sidor hade egna gradient-hero-block som såg annorlunda ut. Jag introducerade PageHero med samma bakgrund, grid och glow som hem-Hero, och lade till section-blend-after-hero i CSS så att första innehållssektionen får en mjuk gradientövergång istället för en hård linje.

SEO och prestanda i praktiken

SEO hanteras helt i SEOHead: canonical, hreflang (EN/SV + x-default), Open Graph, Twitter Cards och ett enda script type="application/ld+json" som uppdateras vid navigering. Blogginlägg använder generateArticleSchema och generateBreadcrumbSchema så att både artikel och brödsmulor får strukturerad data. Sitemap och redirects för gamla URL:er gör att indexeringen håller sig ren. Bygget är snabbt och Core Web Vitals (LCP, CLS, INP) håller sig bra – viktigt både för användare och ranking.

Fler tekniska detaljer: lastbalansering med Nginx och mina tjänster för webb och automatisering.

Publiceringsflöde

Artiklar och portfolio-objekt är TypeScript-filer med samma komponentlayout. Innehållet ligger nära koden, versionshanteras i Git och jag kan iterera snabbt. Ingen CMS – bara kod och innehåll i samma repo.

Hosting

Sajten körs på Vercel: förhandsgranskningar per branch och raka produktiondeploys. Bygget är snabbt och jag behöver inte hantera server själv.

Nästa steg

Jag funderar på ett lätt CMS-stöd för utkast och schemalagda inlägg, men code-first tänket behåller jag. Vill du bygga något liknande med snabb webbplats, bra SEO och tydlig struktur kan du kontakta mig eller ansöka om ett gratis pilotprojekt.