Personal Portfolio Architecture: Technical SEO, Core Web Vitals & AI Search Discovery

1. Project Overview & Architectural Philosophy

When I set out to build my personal portfolio at rishabhdebnath.com, I had a specific standard in mind: as an SEO and Generative Engine Optimization practitioner, my own website had to embody the exact technical principles I recommend to clients. It could not simply look polished; it needed to be demonstrably fast, completely crawlable, structurally sound, and easy for both Google's web crawler and generative AI engines to read and cite.

Many modern developer portfolios are built with heavy JavaScript frameworks (Next.js, Remix, Gatsby, or heavy React templates). While these tools offer developer conveniences, they frequently bundle hundreds of kilobytes of runtime JavaScript, resulting in CPU hydration lag, elevated Total Blocking Time (TBT), and complex client-side rendering pipelines that complicate search indexation.

I chose the opposite route: pure semantic HTML5, modular Vanilla CSS tokens, and lightweight vanilla JavaScript. By eliminating third-party UI libraries and frontend build overhead, the browser receives lightweight markup that renders immediately, requires zero JavaScript to display content, and leaves the main thread completely unblocked.

2. Search Performance & Google Search Console Evidence

A technically sound architecture only matters if it earns real-world search visibility. To measure how Google Search discovered, indexed, and ranked the site, I tracked performance via Google Search Console across the 20 May 2026 to 30 August 2026 reporting window.

As illustrated in the Search Console performance report below, organic traffic showed consistent upward momentum. Starting from 2–5 clicks per day in late May, daily clicks rose steadily to between 15 and 20+ clicks per day by August, accompanied by impressions scaling from ~50 daily views to over 500 daily impressions.

Notably, the Search Console report highlighted an active notification: "Get more details on your site's performance in generative AI features on Google Search", indicating that site content was actively being surfaced within Google's generative search experiences and AI Overviews. This growth directly reflects the intent mapping and topic cluster strategy detailed in my guide on Keyword Research in the Age of AI.

3. Core Web Vitals & Real-World Speed Diagnostics

Site speed is not an afterthought; it directly influences crawl budget, user retention, and organic ranking signals. To rigorously validate speed and Core Web Vitals, I ran both independent lab audits and synthetic network tests using GTmetrix and Google PageSpeed Insights.

GTmetrix Performance Audit: Grade A

Testing the live production site on GTmetrix from a Seattle, USA test server on Chrome 142 yielded exceptional results:

• GTmetrix Grade: A (96% Performance, 99% Structure)
• Largest Contentful Paint (LCP): 1.2 seconds (well below Google's 2.5s "Good" threshold)
• Total Blocking Time (TBT): 0 milliseconds (zero main-thread blockage)
• Cumulative Layout Shift (CLS): 0.03 (virtually zero unexpected visual movement)
• Time to First Byte (TTFB): 422 milliseconds across international routing
• Fully Loaded Time: 1.2 seconds total

PageSpeed Insights Desktop: 98 / 100

Google PageSpeed Insights on desktop confirmed the clean architectural choices, delivering near-flawless ratings across every evaluation category:

• Performance: 98 / 100 (First Contentful Paint 0.8s, Largest Contentful Paint 1.0s, Speed Index 0.9s)
• Total Blocking Time: 0 ms
• Cumulative Layout Shift: 0 (flawless visual stability)
• Accessibility: 93 / 100
• Best Practices: 100 / 100
• SEO: 100 / 100
• Agentic Browsing: 2 / 2

PageSpeed Insights Mobile Diagnostic & Engineering Response

Honest technical SEO requires looking at real bottlenecks rather than hiding behind desktop scores. When running PageSpeed Insights under simulated mobile conditions (emulated Moto G Power on throttled slow 4G network with 150ms round-trip latency), the results told an instructive story:

• Performance Score: 76 / 100
• First Contentful Paint (FCP): 3.6 seconds
• Largest Contentful Paint (LCP): 4.5 seconds
• Total Blocking Time (TBT): 30 ms (virtually unblocked main thread)
• Cumulative Layout Shift (CLS): 0 (zero visual shift)
• Best Practices & SEO: 100 / 100

Notice what this diagnostic reveals: while TBT remained stellar at 30ms and CLS was 0, the high simulated network latency of Lighthouse mobile throttling caused the hero portrait image download to delay the LCP paint.

Rather than ignoring the diagnostic, I implemented four concrete engineering enhancements:

1. Responsive 320w WebP Hero Asset: Generated a compressed 320px WebP hero variant for mobile screens, reducing the mobile asset payload from over 120KB down to just 18KB.
2. Scoped Preloading: Added a scoped media="(min-width: 769px)" preload tag so high-resolution hero images are only preloaded on desktop, preventing mobile network congestion.
3. Non-Blocking Typography: Added font-display: swap across all Google Font declarations (Sora, Inter, IBM Plex Mono) to ensure zero invisible text (FOIT) during font fetch.
4. Aggressive Browser Caching via .htaccess: Configured Apache mod_expires rules setting 1-year cache headers for WebP images, SVG vectors, and fonts, and 1-month cache headers for CSS and JS assets.

This methodology aligns directly with the testing workflow I outline in How I Approach a Technical SEO Audit.

4. Schema.org Knowledge Graph & Entity Architecture

In traditional SEO, structured data was often treated as a plugin setting to earn star ratings or breadcrumbs. In the era of Generative Engine Optimization (GEO), structured data serves a fundamentally different purpose: it disambiguates entities and builds an interconnected Knowledge Graph that AI answer engines can parse without semantic confusion.

Instead of scattering disconnected snippets, I hand-coded a unified @graph JSON-LD architecture directly into the document <head>:

• Primary Person Entity (#person): Defines my identity as an SEO and GEO Specialist, my canonical URL, brand avatar, and verified GitHub profile URL.
• WebSite Entity (#website): Connects the domain root, official portfolio name, and explicitly references #person as the publisher.
• BreadcrumbList (#breadcrumb): Provides precise hierarchical navigation trails from Home to Section to Document.
• TechArticle / BlogPosting (#article): Links the specific case study or article back to #website via isPartOf and anchors the author back to #person.

This graph structure ensures that when ChatGPT Search, Perplexity, or Google AI Overviews crawl the site, they immediately understand that the author, the publisher, the articles, and the case studies belong to the exact same recognized entity. For a deep dive into the technical mechanics behind this, read my analysis on How Schema Markup Helps AI Search Engines and What Is Entity-Based SEO.

5. Content Strategy & Information Gain for AI Search

In 2026, search algorithms and Large Language Models heavily penalize commodity content that simply regurgitates existing search results. Google's Information Gain patent specifically rewards documents that introduce new facts, firsthand data, and original perspectives.

Across rishabhdebnath.com, every article and case study is structured around three information gain criteria:

• Firsthand Technical Evidence: Real terminal commands, reproducible PowerShell audit scripts, actual Search Console metrics, and real Lighthouse audits.
• Passage-Level Extraction Architecture: High-density takeaway cards and direct, unambiguous definitions placed at the beginning of each major section to allow RAG (Retrieval-Augmented Generation) scrapers to cleanly extract and cite passages.
• Zero Content Duplication: Eliminating AI buzzwords and generic filler in favor of transparent practitioner reasoning.

This content framework is explored in detail in my article on Information Gain in SEO: How to Create Content AI Cannot Duplicate, as well as my comparative guide on SEO vs GEO: What Actually Changes in AI Search.

6. Technical SEO Audit Checklist Applied to the Portfolio

To ensure long-term stability and indexability, I apply a strict automated QA pipeline across every page before deployment. Using custom PowerShell test runners (How to Rank on Google and AI Search), the site is audited for:

• Title & Meta Description Governance: Every title tag is strictly enforced between 40 and 60 characters; every meta description is maintained between 120 and 160 characters to eliminate SERP truncation across desktop and mobile.
• Canonical URL Hygiene: 100% self-referencing absolute canonical tags with trailing slashes, eliminating duplicate indexation pathways.
• Heading Hierarchy: Exactly one semantic <h1> per document, followed by clean non-skipping <h2> and <h3> hierarchies.
• Zero Horizontal Overflow: Automated viewport testing across 11 device viewports (from 320px mobile to 1920px widescreen), guaranteeing zero layout breaking or horizontal scrolling.
• Sitemap Synchronization: Real-time indexing priority and date synchronization in sitemap.xml.

7. Tools Used in This Case Study

• Google Search Console: Verified organic search performance, tracking 1,248 clicks, 24,960 impressions, CTR, and indexing coverage across 20 May–30 Aug 2026.
• Google PageSpeed Insights: Measured laboratory Core Web Vitals, scoring 98 on desktop and identifying throttled mobile network bottlenecks.
• GTmetrix: Evaluated global page delivery from North American testing nodes, validating Grade A (96%), 1.2s LCP, and 0ms TBT.
• Schema.org Validator: Validated multi-entity JSON-LD graphs for syntax compliance, type nesting, and @id resolution.
• Screaming Frog: Crawled the entire site to verify response codes (200 OK), heading integrity, and internal link graph depth.
• Perplexity & ChatGPT Search: Conducted retrieval prompt testing to confirm accurate factual synthesis and citation generation.

8. Key Learnings & Ongoing Experiments

Engineering and ranking my own portfolio highlighted several practical takeaways for modern search:

• Static Simplicity Outperforms Bloated Stacks: Serving clean, hand-crafted HTML and CSS eliminated the need for complex hydration optimizations, keeping Total Blocking Time at 0ms and ensuring instant indexing by search engine spiders.
• Mobile Web Vitals Require Asset Precision: Desktop scores can easily mask mobile asset weight. Tailoring responsive WebP images and scoping preloads is vital for fast mobile paints on throttled connections.
• Structured Data Unlocks AI Answer Engines: LLMs do not guess; they seek high-confidence structured evidence. Handcrafted Knowledge Graphs provide the structural backbone for AI citations.
• Ongoing Experiment: Monitoring Google's new generative AI search features in Search Console to track the exact queries driving AI-synthesized impressions and testing how deeper entity linking impacts citation frequency.