Fast by default: performance and SEO that survive a crawlerFast by default: performance and SEO that survive a crawlerFast by default: performance and SEO that survive a crawler

Speed and search ranking are not features you bolt on at the end. They are architecture decisions you make on day one. Here is how this site stays fast and findable, and how I verify both instead of guessing.

Render it once, serve it forever

The fastest response is a static file. Every page here is pre-rendered at build time, one HTML document per route per language. There is no server work per request, no database round trip, and no client-side fetching before the first paint. A CDN serves it from the edge and the browser starts rendering immediately.

This is also why the site works with JavaScript switched off. The content lives in the HTML, not assembled in the browser, so crawlers, screen readers, and slow connections get the whole page. The animations are a layer on top, never a requirement.

export function generateStaticParams() {
  return routing.locales.map((locale) => ({locale}));
}

export default async function Page({params}) {
  const {locale} = await params;
  setRequestLocale(locale); // enables fully static rendering
  return <Sections />;
}

Images are where speed goes to die

The most common performance mistake is shipping heavy images. My project diagrams started life as 1.7 MB PNG files, almost 12 MB in total. Converting them to WebP brought that down to 0.76 MB with no visible difference. Then every image renders through next/image, which hands the browser AVIF or WebP at the exact size the layout asks for.

• AVIF or WebP automatically, never the original heavyweight file.
• An explicit sizes hint, so there is one right-sized variant per breakpoint.
• Lazy loading below the fold, and priority only on the hero for a fast LCP.
• Reserved dimensions, so the layout never shifts while images arrive.

import Image from "next/image";

// Below the fold: lazy, sized, served as AVIF/WebP at the right width.
<Image
  src="/renders/rn-04.webp"
  alt="Polysong, system diagram"
  fill
  sizes="(max-width: 640px) 100vw, 50vw"
  className="object-cover"
/>

SEO is plumbing, not magic

Search is mostly hygiene done consistently. Each page declares its own canonical URL and hreflang alternates for all four languages, so Google indexes the correct page per locale instead of merging them. A sitemap lists every route in every language, structured data describes who I am and where I work, and every page carries a localized title, description, and Open Graph image.

The bug worth naming: a single canonical inherited from the layout made every blog post point back at the homepage. One shared canonical is worse than none, because it actively tells Google to drop the page.

export async function generateMetadata({params}) {
  const {locale, slug} = await params;
  const path = "/blog/" + slug;
  return {
    title: post.title,
    description: post.excerpt,
    alternates: {
      canonical: localeUrl(locale, path),
      languages: {
        en: localeUrl("en", path),
        it: localeUrl("it", path),
        de: localeUrl("de", path),
        ro: localeUrl("ro", path)
      }
    },
    openGraph: { type: "article", images: [path + "/01.webp"] }
  };
}

Give the agent a checklist it remembers

When an AI agent works on this codebase, it should not rediscover the performance and SEO rules every session. I keep them in a markdown memory file it reads first, so the conventions persist across sessions and the agent acts on them instead of guessing.

# PERFORMANCE.md  (read me before touching the UI)

## Images
- Convert source art to WebP before commit, target under 200 KB.
- Always render through next/image with an explicit sizes attribute.
- Use priority only on the LCP image (the hero); everything else stays lazy.

## Rendering
- Pages must stay static: generateStaticParams + setRequestLocale.
- No client-side data fetching above the fold.

## SEO
- Every page sets its own canonical and hreflang for en, it, de, ro.
- Update the sitemap and JSON-LD whenever routes change.

Fast and findable turn out to be the same discipline: do the boring work at the architecture layer, keep the payload small, and let the platform serve static files. The remarkable part is that there is nothing remarkable about it.