SEO & Performance Optimization for a React Site

Context

This website (al-si.com) is my personal portfolio. It was initially built as a simple showcase site with React, a custom CSS file and basic animations. The site was functional, but had never been optimized for SEO or performance.

The goal of this case study is to document the full optimization process, from the initial audit to measurable results, including every technical decision made along the way.

Methodology

The optimization followed a five-step process, designed to be reproducible on any similar project.

1. Initial audit — Establish a measurable baseline: Google rankings (via SerpAPI), automated technical audit (meta tags, JSON-LD, sitemap, OG image), and build analysis (bundle size, modules).
2. Stack modernization — Update dependencies and architecture: CSS migration to Tailwind v4, animation library replacement, component refactoring, semantic HTML.
3. Technical SEO optimization — Fix every issue found in the audit: JSON-LD, meta tags, sitemap, OG image. Then re-run the technical audit to validate all checks pass before deploying. If issues remain, fix and re-test until achieving a perfect score.
4. Deployment and indexing — Deploy to production, purge the CDN cache, submit the sitemap to Google Search Console and request indexing of the main page.
5. Results measurement — After a 2 to 3 week indexing period, re-run ranking measurements, capture Lighthouse scores and analyze Search Console data (impressions, clicks, coverage).

Initial state

Before making any changes, I ran a complete audit to establish a measurable baseline.

Google rankings

Summary: 3 out of 7 keywords found in the top 100. Position #1 on name + profession queries, but absent on name alone and geolocated terms. Final positions will be measured 2 to 3 weeks after deployment.

Technical audit

Score: 6/8 checks passed.

Performance (build)

Issues identified

1. Broken JSON-LD: syntax error preventing Google from reading structured data
2. Missing OG image: social media sharing without a preview image
3. Sitemap with hash anchors: non-crawlable URLs for search engines
4. Orphaned CSS: styles for elements that no longer exist
5. No main tag: non-semantic HTML structure
6. react-transition-group: heavy dependency (~15 KB) for a single animation

Work completed and results

Stack modernization

• Migration from custom CSS to Tailwind CSS v4
• Replaced react-transition-group with Framer Motion
• Created reusable components (Button, SectionHeader, ScrollReveal)
• Separated navigation from the footer into its own component
• Complete component structure refactoring

Visual redesign

• Fixed navigation with hide/show on scroll and backdrop blur
• Scroll reveal animations on all sections
• Added sections: Projects, Articles
• Personal photo in the hero with optimized cropping
• Refined dark theme with consistent color system

Technical SEO optimization

• Fixed JSON-LD (syntax + enriched data)
• Created OG image (share-card.png)
• Cleaned up sitemap (removed hash anchors, added lastmod)
• Added <main> for HTML semantics
• Enriched meta description with target keywords
• Added og:locale, meta robots, and absolute OG URLs
• Enriched JSON-LD: address (QC/CA), LinkedIn, languages, skills

Content repositioning

• Repositioned the site toward web applications, SaaS and automation
• Rewrote all sections to reflect the new positioning
• Added recent experience (construction SaaS platform) in a separate visual block
• Realigned meta tags, OG and JSON-LD with the new positioning

Measured impact

The JS bundle went from 209 KB to 371 KB (66 → 116 KB gzip), and CSS from 4.6 KB to 33 KB (1.6 → 6.3 KB gzip). This increase reflects the addition of Framer Motion, Tailwind CSS v4, new sections (Projects, Articles), a full navigation system, scroll animations on every section and an in-depth article. Despite everything that was added, the site remains lightweight — a direct result of the optimization work done in parallel: removing unused dependencies, refactoring components and cleaning up orphaned CSS.

Interim conclusion

This case study documents an ongoing project. The biggest gains often come from simple fixes: valid JSON-LD, an OG image that exists, a clean sitemap. Modernizing the stack wasn't strictly necessary for SEO, but it improves maintainability and user experience.

What remains is the official relaunch and tracking SEO results over several weeks. This article will be updated with final data once the indexing period has passed.

The best time to optimize a site's SEO is before launch. The second best time is now.