Optimizing Core Web Vitals for Nepal's Mobile Networks: WebP, Font Subsetting & LCP Fixes

While developers in Kathmandu often test websites on high-speed fiber internet (WorldLink, Vianet, Subisu with 100+ Mbps), **over 70% of real Nepali website visitors browse on mobile devices using NTC or Ncell 4G data packs**. In real-world conditions outside Kathmandu valley—or even indoors in concrete buildings in Baneshwor or Lalitpur—mobile latency frequently spikes above **300ms**, and bandwidth drops to **1.5–3.0 Mbps**. When your website loads 4MB unoptimized PNG hero banners and un-subsetted Google fonts, pages take **8 to 12 seconds to load**, causing 60%+ bounce rates. ### Core Web Vitals Targets: - **LCP (Largest Contentful Paint):** $\le 2.5\text{s}$ (Time until main content renders). - **INP (Interaction to Next Paint):** $\le 200\text{ms}$ (Smooth response to clicks and taps). - **CLS (Cumulative Layout Shift):** $\le 0.1$ (Zero jarring screen jumps).

The hero banner is almost always the LCP element. In Next.js, follow these rules: 1. Use `priority` on the above-the-fold hero image. 2. Specify modern format conversions (AVIF / WebP) in `next.config.js`. 3. Provide accurate `sizes` attributes so mobile browsers never download 4K desktop assets.

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'],
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    minimumCacheTTL: 60 * 60 * 24 * 30, // 30 days cache for CDN edge
  },
};

module.exports = nextConfig;

Loading full multi-weight Google fonts like Mukta, Poppins, or Roboto can add 300KB+ of render-blocking CSS and font files. Use `next/font/google` with explicit **subsetting** and `display: 'swap'`:

import { Inter, Mukta } from "next/font/google";

// Latin typography for code and English headings
export const inter = Inter({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-inter",
});

// Devanagari typography for Nepali text
export const mukta = Mukta({
  weight: ["400", "600", "700"],
  subsets: ["devanagari", "latin"],
  display: "swap",
  variable: "--font-mukta",
});