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.

Kort sagt: Jag byggde om ivyydev.se med React, Vite, TypeScript och Tailwind, en enda SEOHead-komponent, enklare publicering i Git och konkreta fixar för CLS, FCP och TBT. Resultat: snabbare sidor, starkare SEO och enklare underhåll på Vercel.

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 (webbutveckling, 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 nästa sektion 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. Nästa sektion 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 begära en kostnadsfri prototyp. Går ni vidare gäller normala priser efter omfattning.

Vanliga frågor

Vilken stack använder ivyydev.se?

React, Vite, TypeScript och Tailwind, hostat på Vercel. SEO samlas i en SEOHead-komponent med canonical, hreflang, Open Graph och JSON-LD.

Varför bygga om istället för att lappa den gamla sajten?

Det gamla upplägget gjorde nya artiklar och portfolioposter långsamma, och SEO låg utspritt. En liten modern stack minskade friktion och gjorde Core Web Vitals enklare att hålla bra.

Hur hanteras SEO på sajten?

Varje sida skickar title, description, canonical, hreflang och schema till SEOHead. Blogginlägg använder artikel- och brödsmuleschema så strukturerad data hålls konsekvent.

Vilka prestandafixar gjorde mest skillnad?

Reserverad höjd för lazy-sektioner mot CLS, asynkron CSS-laddning för snabbare first paint, uppskjuten analytics och cookie-UI för lägre TBT, plus content-visibility för under-the-fold-sektioner.

Kan du bygga en liknande sida för ett småföretag?

Ja. Samma code-first-upplägg fungerar för småföretagssidor som behöver hastighet, tydlig SEO och ett underhållbart publiceringsflöde. Börja med kostnadsfri prototyp; går ni vidare gäller normala priser efter omfattning.