Scaling Next.js SEO, Core Web Vitals, and PageSpeed to Perfection at Livora

1. Centralized Domain Infrastructure

Established a single source of truth for canonical URL resolution across SSR, metadata, sitemaps, and robots.

export const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? "https://livora4u.com";

2. Configured metadataBase & Googlebot Directives

Injected metadataBase and granular Googlebot directives into Next.js App Router root layout to maximize rich snippet display allowances.

export const metadata: Metadata = {
  metadataBase: new URL(SITE_URL),
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
};

3. Resilient Dynamic XML Sitemap

Refactored sitemap generation with isolated try/catch error boundaries to guarantee that single upstream API anomalies will never break the XML feed.

• Added dynamic category and product URL generators with priority weighting.
• Added lastModified timestamps based on CMS change records.

4. Rich Schema.org Product & Breadcrumb JSON-LD

Injected Schema.org Product (BDT currency, availability, pricing, brand) and BreadcrumbList schemas into product detail pages for Google rich snippet qualification.

5. Agentic & AI Search Crawler Optimization

Published public/llms.txt and tailored crawler directives for modern AI search engines including ChatGPT, Perplexity, and ClaudeBot.

1. Non-Blocking Analytics with requestIdleCallback

Deferred user activity tracking (ActivityTracker.tsx) and session restoration (AppContext.tsx) to idle periods, freeing the CPU during hydration.

2. Streamlined State & Styling Providers

Purged Redux logging overhead in production, resolved double-mounting cycles in ThemeProvider.tsx, and added display: swap to font imports to prevent FOIT.

3. Compiler Tree-Shaking & Next.js Image Caching

Configured optimizePackageImports in next.config.ts to tree-shake heavy UI packages and enabled 1-year immutable caching for modern AVIF/WebP image formats.

experimental: {
  optimizePackageImports: ["antd", "@reduxjs/toolkit", "@apollo/client"],
},
images: {
  formats: ["image/avif", "image/webp"],
  minimumCacheTTL: 31536000, // 1-year immutable cache
}

1. Dynamic Imports with Conditional Mounting

Drawers and off-canvas components previously mounted hidden in the DOM were converted to dynamic imports and mounted strictly when opened by the user.

• Shed hundreds of kilobytes of unexecuted JavaScript from initial critical render path.
• Prevented Ant Design CSS-in-JS style injection during first paint.

// Dynamic import with SSR disabled for heavy off-canvas components
const DynamicDrawer = dynamic(
  () => import("antd/es/drawer"),
  { ssr: false }
);

// Only renders and registers DOM nodes when explicitly opened
{open && (
  <DynamicDrawer open={open} onClose={onClose}>
    {/* Navigation / Cart Content */}
  </DynamicDrawer>
)}

1. SSR Category Product Delivery

Pre-fetched the initial category product catalog on the server in LandingPageComponent, enabling instantaneous visual display with zero layout shift (CLS = 0).

2. GPU Hardware Compositing

Applied will-change: transform and transform: translateZ(0) to hero containers with Gaussian gradient blurs, offloading intensive rasterization from mobile CPU to GPU hardware layers.

3. Accessibility Boost (82 → 100)

Audited every interactive element, adding descriptive aria-labels to hamburger triggers, cart buttons, and dynamic image alt tags with fallback formatting.

4. Product Variant UI Polish

Refactored CartProductVariants.tsx with sleek interactive thumbnail pill selectors featuring distinct active selection rings (ring-2 ring-primary/30).