Frontend Performance & Modern Frameworks — เพิ่มความเร็วและเลือก Framework ที่ใช่ ⚡Frontend Performance & Modern Frameworks — Get Faster and Pick the Framework That Fits ⚡

// ═══════════════════════════════
// SSG — Static at build time
// ═══════════════════════════════
// app/blog/[slug]/page.tsx

export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map(post => ({ slug: post.slug }));
}

export default async function BlogPost({ params }) {
  const post = await fetchPost(params.slug);  // Runs at BUILD time
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

// ═══════════════════════════════
// ISR — Static + Revalidate
// ═══════════════════════════════
// app/products/[id]/page.tsx

export const revalidate = 60;  // Regenerate every 60 seconds

export default async function ProductPage({ params }) {
  const product = await fetchProduct(params.id);  // Cached, revalidated
  return (
    <div>
      <h1>{product.name}</h1>
      <p>฿{product.price}</p>
    </div>
  );
}

// ═══════════════════════════════
// SSR — Fresh on every request
// ═══════════════════════════════
// app/dashboard/page.tsx

export const dynamic = 'force-dynamic';  // No caching

export default async function Dashboard() {
  const stats = await fetchStats();  // Runs on EVERY request
  return (
    <div>
      <h1>Dashboard</h1>
      <p>Active users: {stats.activeUsers}</p>
    </div>
  );
}

// ═══════════════════════════════
// CSR — Client component
// ═══════════════════════════════
// app/chat/ChatWindow.tsx
'use client';  // ← This makes it CSR

import { useState, useEffect } from 'react';

export default function ChatWindow() {
  const [messages, setMessages] = useState([]);
  
  useEffect(() => {
    const ws = new WebSocket('wss://api.myapp.com/chat');
    ws.onmessage = (e) => setMessages(prev => [...prev, JSON.parse(e.data)]);
    return () => ws.close();
  }, []);

  return <div>{messages.map(m => <p key={m.id}>{m.text}</p>)}</div>;
}

// ═══════════════════════════════
// React — Counter Component
// ═══════════════════════════════
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
    </div>
  );
}

<!-- ═══════════════════════════════ -->
<!-- Vue — Counter Component        -->
<!-- ═══════════════════════════════ -->
<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">+1</button>
    <button @click="count--">-1</button>
  </div>
</template>

<!-- ═══════════════════════════════ -->
<!-- Svelte — Counter Component     -->
<!-- ═══════════════════════════════ -->
<script>
  let count = 0;
</script>

<div>
  <p>Count: {count}</p>
  <button on:click={() => count++}>+1</button>
  <button on:click={() => count--}>-1</button>
</div>

<!-- ✨ ง่ายที่สุด! No imports, no hooks, no ref() -->

# ═══════════════════════════════
# Tools for Measuring
# ═══════════════════════════════

# 1. Google PageSpeed Insights (online)
# → https://pagespeed.web.dev/

# 2. Lighthouse (Chrome DevTools)
# → DevTools → Lighthouse tab → Analyze

# 3. Web Vitals JavaScript library
npm install web-vitals

# 4. Chrome DevTools → Performance tab
# → Record → Interact → Stop → Analyze flamechart

// ═══════════════════════════════
// Track Core Web Vitals in your app
// ═══════════════════════════════
import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics(metric) {
  const body = {
    name: metric.name,      // "LCP", "INP", "CLS"
    value: metric.value,    // 2500, 150, 0.05
    rating: metric.rating,  // "good", "needs-improvement", "poor"
    delta: metric.delta,
    id: metric.id,
    page: window.location.pathname,
  };

  // Send to your analytics
  navigator.sendBeacon('/api/analytics/vitals', JSON.stringify(body));
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

// ═══════════════════════════════
// React — Lazy Loading Components
// ═══════════════════════════════
import { lazy, Suspense } from 'react';

// ❌ Static import (included in main bundle)
// import Dashboard from './Dashboard';
// import AdminPanel from './AdminPanel';
// import ChartLibrary from './ChartLibrary';

// ✅ Dynamic import (separate chunks)
const Dashboard = lazy(() => import('./Dashboard'));
const AdminPanel = lazy(() => import('./AdminPanel'));
const ChartLibrary = lazy(() => import('./ChartLibrary'));

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />  {/* Always loaded */}
      
      <Route
        path="/dashboard"
        element={
          <Suspense fallback={<LoadingSpinner />}>
            <Dashboard />    {/* Loaded on navigate */}
          </Suspense>
        }
      />
      
      <Route
        path="/admin"
        element={
          <Suspense fallback={<LoadingSpinner />}>
            <AdminPanel />   {/* Loaded on navigate */}
          </Suspense>
        }
      />
    </Routes>
  );
}

// ═══════════════════════════════
// Next.js — Dynamic Import
// ═══════════════════════════════
import dynamic from 'next/dynamic';

// Heavy component loaded only when needed
const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
  loading: () => <p>Loading chart...</p>,
  ssr: false,  // Don't render on server (client-only)
});

// Conditional loading
const AdminTools = dynamic(() => import('@/components/AdminTools'), {
  loading: () => null,
});

export default function Dashboard({ user }) {
  return (
    <div>
      <h1>Dashboard</h1>
      <HeavyChart data={chartData} />
      {user.role === 'admin' && <AdminTools />}
    </div>
  );
}

// ═══════════════════════════════
// Tree Shaking — Dead code elimination
// ═══════════════════════════════

// ❌ Import ทั้ง library
import _ from 'lodash';  // 71 KB ทั้งหมด!
_.debounce(fn, 300);      // ใช้แค่ 1 function

// ✅ Import เฉพาะที่ใช้
import debounce from 'lodash/debounce';  // 1.5 KB!
// หรือ
import { debounce } from 'lodash-es';   // ESM tree-shakeable

// ❌ Import entire icon library
import { icons } from 'lucide-react';   // 500+ icons loaded!

// ✅ Import specific icons
import { Search, Menu, X } from 'lucide-react';  // Only 3 icons

// ═══════════════════════════════
// Check bundle size
// ═══════════════════════════════

// 1. bundlephobia.com — check BEFORE installing
// "lodash" = 71.5 KB (minified + gzipped: 25.2 KB)
// "lodash-es" = tree-shakeable!
// "date-fns" (2 KB per function) vs "moment" (72 KB total)

// 2. Webpack Bundle Analyzer
// npm install --save-dev webpack-bundle-analyzer
// → Visual treemap of your bundle

// 3. Next.js built-in
// next build → shows route sizes automatically

// ═══════════════════════════════
// Next.js — Built-in Caching
// ═══════════════════════════════

// 1. fetch() caching (Server Components)
async function getProducts() {
  // Cached by default (static)
  const res = await fetch('https://api.example.com/products');
  return res.json();
}

async function getUser(id: string) {
  // Revalidate every 60 seconds
  const res = await fetch(`https://api.example.com/users/${id}`, {
    next: { revalidate: 60 },
  });
  return res.json();
}

async function getNotifications() {
  // No cache (always fresh)
  const res = await fetch('https://api.example.com/notifications', {
    cache: 'no-store',
  });
  return res.json();
}

// 2. Route segment caching
// app/products/page.tsx
export const revalidate = 3600;  // Revalidate every hour
export const dynamic = 'force-static';  // Force SSG

// 3. On-demand revalidation (webhook)
// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(request: Request) {
  const { path, tag } = await request.json();
  
  if (path) revalidatePath(path);         // Revalidate specific page
  if (tag) revalidateTag(tag);            // Revalidate by tag
  
  return Response.json({ revalidated: true });
}

// manifest.json — PWA metadata
{
  "name": "My Awesome App",
  "short_name": "MyApp",
  "description": "A progressive web application",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0D1229",
  "theme_color": "#2196F3",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

// ═══════════════════════════════
// Service Worker — Caching Strategy
// ═══════════════════════════════
// sw.js

const CACHE_NAME = 'myapp-v1';
const STATIC_ASSETS = [
  '/',
  '/offline.html',
  '/css/app.css',
  '/js/app.js',
  '/icons/icon-192.png',
];

// Install — cache static assets
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(STATIC_ASSETS))
  );
});

// Fetch — Stale While Revalidate
self.addEventListener('fetch', event => {
  // Skip non-GET requests
  if (event.request.method !== 'GET') return;

  event.respondWith(
    caches.match(event.request).then(cached => {
      // Return cached + fetch fresh in background
      const fetchPromise = fetch(event.request).then(response => {
        const cache = caches.open(CACHE_NAME);
        cache.then(c => c.put(event.request, response.clone()));
        return response;
      }).catch(() => {
        // Offline — return offline page
        if (event.request.destination === 'document') {
          return caches.match('/offline.html');
        }
      });

      return cached || fetchPromise;
    })
  );
});

// Activate — clean old caches
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys
          .filter(key => key !== CACHE_NAME)
          .map(key => caches.delete(key))
      )
    )
  );
});

<!-- ═══════════════════════════════ -->
<!-- Critical CSS — Inline above-fold styles -->
<!-- ═══════════════════════════════ -->

<head>
  <!-- ✅ Critical CSS inlined (above-fold styles) -->
  <style>
    /* Only styles needed for first viewport */
    body { margin: 0; font-family: system-ui; }
    .hero { height: 100vh; display: flex; align-items: center; }
    .nav { position: fixed; top: 0; width: 100%; }
  </style>

  <!-- ✅ Non-critical CSS loaded async -->
  <link rel="preload" href="/css/app.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/css/app.css"></noscript>
</head>

/* ═══════════════════════════════ */
/* Font Loading — Prevent CLS     */
/* ═══════════════════════════════ */

/* ❌ Bad: Flash of Unstyled Text (FOUT) / Flash of Invisible Text (FOIT) */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  /* No font-display → browser default (usually FOIT = invisible text!) */
}

/* ✅ Good: font-display: swap */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;     /* Show fallback → swap when loaded */
}

/* ✅ Better: font-display: optional */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: optional;  /* Use if cached, skip if not */
}

<!-- Preload critical fonts -->
<link rel="preload" href="/fonts/inter-var.woff2" 
      as="font" type="font/woff2" crossorigin>

// ═══════════════════════════════
// Next.js — Automatic font optimization
// ═══════════════════════════════
import { Inter, Noto_Sans_Thai } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

const notoThai = Noto_Sans_Thai({
  subsets: ['thai'],
  display: 'swap',
  variable: '--font-thai',
});

// Next.js automatically:
// ├── Self-hosts fonts (no Google Fonts request!)
// ├── Preloads critical fonts
// ├── Generates optimal @font-face
// └── Prevents layout shift

// tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',  // Only scan used files
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  // Tailwind v3+ automatically removes unused CSS (PurgeCSS built-in)
  // Result: 3-10 KB CSS instead of 3 MB!
};

┌──────────────────────────────────────────────────────┐
│        Frontend Performance Checklist                 │
│                                                        │
│  🖼️ Images:                                           │
│  ├── [x] Use WebP/AVIF format                         │
│  ├── [x] Responsive sizes (srcset)                    │
│  ├── [x] Lazy load below-fold images                  │
│  ├── [x] Set width/height (prevent CLS)               │
│  ├── [x] Priority hint for LCP image                  │
│  └── [x] Use next/image or similar auto-optimization  │
│                                                        │
│  📦 JavaScript:                                       │
│  ├── [x] Code splitting (route-based)                 │
│  ├── [x] Lazy load heavy components                   │
│  ├── [x] Tree shake unused imports                    │
│  ├── [x] Avoid large libraries (lodash → lodash-es)   │
│  ├── [x] Bundle budget < 100 KB initial               │
│  └── [x] Analyze bundle with webpack-bundle-analyzer  │
│                                                        │
│  🎨 CSS:                                              │
│  ├── [x] Inline critical CSS                          │
│  ├── [x] Async load non-critical CSS                  │
│  ├── [x] Remove unused CSS (PurgeCSS/Tailwind)        │
│  └── [x] Minimize CSS-in-JS (prefer Tailwind/CSS)     │
│                                                        │
│  🔤 Fonts:                                            │
│  ├── [x] Self-host fonts (no external requests)        │
│  ├── [x] Use font-display: swap/optional               │
│  ├── [x] Preload critical fonts                        │
│  ├── [x] Subset fonts (latin only if no Thai)          │
│  └── [x] Max 2 font families                          │
│                                                        │
│  🌐 Network:                                          │
│  ├── [x] CDN for static assets                        │
│  ├── [x] HTTP/2 or HTTP/3                             │
│  ├── [x] Gzip/Brotli compression                      │
│  ├── [x] Cache headers (immutable for hashed assets)   │
│  ├── [x] Preconnect to external origins               │
│  └── [x] DNS prefetch for third-party domains         │
│                                                        │
│  ⚡ Rendering:                                        │
│  ├── [x] SSR/SSG for content pages (SEO + LCP)        │
│  ├── [x] CSR only for interactive-heavy features      │
│  ├── [x] ISR for dynamic-but-cacheable content        │
│  ├── [x] Streaming SSR for large pages                │
│  └── [x] React Server Components (reduce JS sent)     │
│                                                        │
│  📊 Monitoring:                                       │
│  ├── [x] Track Core Web Vitals (web-vitals lib)       │
│  ├── [x] Lighthouse CI in GitHub Actions               │
│  ├── [x] Real User Monitoring (RUM)                   │
│  └── [x] Performance budget alerts                    │
│                                                        │
└──────────────────────────────────────────────────────┘

---

🐕 Why Does Frontend Performance Matter?

In a world where everyone reaches the web from a phone, the speed of a site is not merely "nice to have" — it feeds straight into revenue, into your bounce rate and into your SEO ranking. Google uses Core Web Vitals as a ranking factor, which means a slow site is demoted in the search results automatically.

Look at the real numbers Google and the leading companies report — you will see that even 100ms carries an enormous consequence:

---

🖥️ Rendering Strategies — CSR vs SSR vs SSG vs ISR

The Big Picture

Comparison Table

All four strategies side by side — an easy read of where each one is strong, and which use case it suits:

Next.js — All Strategies in One Framework

Next.js is the framework that gathers every rendering strategy in one place — you can use SSG, ISR, SSR and CSR in the same project, choosing a strategy page by page. Here is what that looks like in real code:

// ═══════════════════════════════
// SSG — Static at build time
// ═══════════════════════════════
// app/blog/[slug]/page.tsx

export async function generateStaticParams() {
  const posts = await fetchAllPosts();
  return posts.map(post => ({ slug: post.slug }));
}

export default async function BlogPost({ params }) {
  const post = await fetchPost(params.slug);  // Runs at BUILD time
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

// ═══════════════════════════════
// ISR — Static + Revalidate
// ═══════════════════════════════
// app/products/[id]/page.tsx

export const revalidate = 60;  // Regenerate every 60 seconds

export default async function ProductPage({ params }) {
  const product = await fetchProduct(params.id);  // Cached, revalidated
  return (
    <div>
      <h1>{product.name}</h1>
      <p>${product.price}</p>
    </div>
  );
}

// ═══════════════════════════════
// SSR — Fresh on every request
// ═══════════════════════════════
// app/dashboard/page.tsx

export const dynamic = 'force-dynamic';  // No caching

export default async function Dashboard() {
  const stats = await fetchStats();  // Runs on EVERY request
  return (
    <div>
      <h1>Dashboard</h1>
      <p>Active users: {stats.activeUsers}</p>
    </div>
  );
}

// ═══════════════════════════════
// CSR — Client component
// ═══════════════════════════════
// app/chat/ChatWindow.tsx
'use client';  // ← This makes it CSR

import { useState, useEffect } from 'react';

export default function ChatWindow() {
  const [messages, setMessages] = useState([]);
  
  useEffect(() => {
    const ws = new WebSocket('wss://api.myapp.com/chat');
    ws.onmessage = (e) => setMessages(prev => [...prev, JSON.parse(e.data)]);
    return () => ws.close();
  }, []);

  return <div>{messages.map(m => <p key={m.id}>{m.text}</p>)}</div>;
}

---

⚛️ Modern Frameworks — React vs Vue vs Svelte

Framework Comparison

Same Component in Each Framework

The best way to compare frameworks is to read the same component written in each one — a plain Counter with an increment and a decrement button. Svelte is visibly the shortest of the three: it imports nothing at all:

// ═══════════════════════════════
// React — Counter Component
// ═══════════════════════════════
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={() => setCount(count - 1)}>-1</button>
    </div>
  );
}

<!-- ═══════════════════════════════ -->
<!-- Vue — Counter Component        -->
<!-- ═══════════════════════════════ -->
<script setup>
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">+1</button>
    <button @click="count--">-1</button>
  </div>
</template>

<!-- ═══════════════════════════════ -->
<!-- Svelte — Counter Component     -->
<!-- ═══════════════════════════════ -->
<script>
  let count = 0;
</script>

<div>
  <p>Count: {count}</p>
  <button on:click={() => count++}>+1</button>
  <button on:click={() => count--}>-1</button>
</div>

<!-- ✨ The simplest of the three! No imports, no hooks, no ref() -->

Meta-Frameworks — Full-Stack Capabilities

A meta-framework is a framework built on top of a UI framework — it hands you full-stack capability out of the box: routing, SSR, API routes, deployment and a range of optimizations. If you are starting a real project in 2026, reach for a meta-framework rather than a bare UI framework:

---

⚡ Core Web Vitals — Google's Performance Metrics

The 3 Metrics That Matter

Measuring Performance

Measure before you optimize! Several tools report Core Web Vitals, both as lab testing (Lighthouse, PageSpeed Insights) and as field data from real users (CrUX, the web-vitals library). Use both, because lab testing does not always match real-world performance:

# ═══════════════════════════════
# Tools for Measuring
# ═══════════════════════════════

# 1. Google PageSpeed Insights (online)
# → https://pagespeed.web.dev/

# 2. Lighthouse (Chrome DevTools)
# → DevTools → Lighthouse tab → Analyze

# 3. Web Vitals JavaScript library
npm install web-vitals

# 4. Chrome DevTools → Performance tab
# → Record → Interact → Stop → Analyze flamechart

// ═══════════════════════════════
// Track Core Web Vitals in your app
// ═══════════════════════════════
import { onLCP, onINP, onCLS } from 'web-vitals';

function sendToAnalytics(metric) {
  const body = {
    name: metric.name,      // "LCP", "INP", "CLS"
    value: metric.value,    // 2500, 150, 0.05
    rating: metric.rating,  // "good", "needs-improvement", "poor"
    delta: metric.delta,
    id: metric.id,
    page: window.location.pathname,
  };

  // Send to your analytics
  navigator.sendBeacon('/api/analytics/vitals', JSON.stringify(body));
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

---

🖼️ Image Optimization — Performance Problem #1

Before vs After

Image Formats Comparison

Next.js Image Component

---

📦 Bundle Optimization — Ship Less JS

Code Splitting & Lazy Loading

// ═══════════════════════════════
// React — Lazy Loading Components
// ═══════════════════════════════
import { lazy, Suspense } from 'react';

// ❌ Static import (included in main bundle)
// import Dashboard from './Dashboard';
// import AdminPanel from './AdminPanel';
// import ChartLibrary from './ChartLibrary';

// ✅ Dynamic import (separate chunks)
const Dashboard = lazy(() => import('./Dashboard'));
const AdminPanel = lazy(() => import('./AdminPanel'));
const ChartLibrary = lazy(() => import('./ChartLibrary'));

export default function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />  {/* Always loaded */}
      
      <Route
        path="/dashboard"
        element={
          <Suspense fallback={<LoadingSpinner />}>
            <Dashboard />    {/* Loaded on navigate */}
          </Suspense>
        }
      />
      
      <Route
        path="/admin"
        element={
          <Suspense fallback={<LoadingSpinner />}>
            <AdminPanel />   {/* Loaded on navigate */}
          </Suspense>
        }
      />
    </Routes>
  );
}

// ═══════════════════════════════
// Next.js — Dynamic Import
// ═══════════════════════════════
import dynamic from 'next/dynamic';

// Heavy component loaded only when needed
const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
  loading: () => <p>Loading chart...</p>,
  ssr: false,  // Don't render on server (client-only)
});

// Conditional loading
const AdminTools = dynamic(() => import('@/components/AdminTools'), {
  loading: () => null,
});

export default function Dashboard({ user }) {
  return (
    <div>
      <h1>Dashboard</h1>
      <HeavyChart data={chartData} />
      {user.role === 'admin' && <AdminTools />}
    </div>
  );
}

In React, use lazy() + Suspense for component-level code splitting; in Next.js, use the dynamic() import, which supports SSR control as well. See the example above:

Tree Shaking — Remove the Code You Never Use

Tree shaking is the bundler (Webpack, Rollup, Vite) working out which of the code you imported is never actually used, and dropping it from the bundle automatically. It only works when you use named imports — not when you import the whole library:

// ═══════════════════════════════
// Tree Shaking — Dead code elimination
// ═══════════════════════════════

// ❌ Import the whole library
import _ from 'lodash';  // all 71 KB of it!
_.debounce(fn, 300);      // for just 1 function

// ✅ Import only what you use
import debounce from 'lodash/debounce';  // 1.5 KB!
// or
import { debounce } from 'lodash-es';   // ESM tree-shakeable

// ❌ Import entire icon library
import { icons } from 'lucide-react';   // 500+ icons loaded!

// ✅ Import specific icons
import { Search, Menu, X } from 'lucide-react';  // Only 3 icons

// ═══════════════════════════════
// Check bundle size
// ═══════════════════════════════

// 1. bundlephobia.com — check BEFORE installing
// "lodash" = 71.5 KB (minified + gzipped: 25.2 KB)
// "lodash-es" = tree-shakeable!
// "date-fns" (2 KB per function) vs "moment" (72 KB total)

// 2. Webpack Bundle Analyzer
// npm install --save-dev webpack-bundle-analyzer
// → Visual treemap of your bundle

// 3. Next.js built-in
// next build → shows route sizes automatically

Bundle Size Budget

Every project should carry a performance budget — the largest size you are willing to accept, and a CI/CD failure the moment you exceed it. It is what stops bundle size from creeping upward until it is beyond control (performance regression):

---

🚀 Caching Strategies

Browser Caching

Next.js Caching

Next.js ships a genuinely powerful built-in caching system — fetch() inside Server Components is cached by default. You can set a revalidation time, or a cache tag for on-demand revalidation through a webhook:

// ═══════════════════════════════
// Next.js — Built-in Caching
// ═══════════════════════════════

// 1. fetch() caching (Server Components)
async function getProducts() {
  // Cached by default (static)
  const res = await fetch('https://api.example.com/products');
  return res.json();
}

async function getUser(id: string) {
  // Revalidate every 60 seconds
  const res = await fetch(`https://api.example.com/users/${id}`, {
    next: { revalidate: 60 },
  });
  return res.json();
}

async function getNotifications() {
  // No cache (always fresh)
  const res = await fetch('https://api.example.com/notifications', {
    cache: 'no-store',
  });
  return res.json();
}

// 2. Route segment caching
// app/products/page.tsx
export const revalidate = 3600;  // Revalidate every hour
export const dynamic = 'force-static';  // Force SSG

// 3. On-demand revalidation (webhook)
// app/api/revalidate/route.ts
import { revalidatePath, revalidateTag } from 'next/cache';

export async function POST(request: Request) {
  const { path, tag } = await request.json();
  
  if (path) revalidatePath(path);         // Revalidate specific page
  if (tag) revalidateTag(tag);            // Revalidate by tag
  
  return Response.json({ revalidated: true });
}

---

📱 Progressive Web App (PWA)

A PWA is the set of technologies that lets the web behave like a native app — installable to the home screen, working offline, able to send push notifications, syncing data when the connection returns, and all of it without going anywhere near an App Store. Companies like Twitter, Pinterest and Starbucks adopted PWAs and saw remarkable results:

Building a PWA takes three main pieces: HTTPS, a Web App Manifest (the metadata that makes it installable) and a Service Worker (caching + offline). Start with manifest.json:

// manifest.json — PWA metadata
{
  "name": "My Awesome App",
  "short_name": "MyApp",
  "description": "A progressive web application",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#0D1229",
  "theme_color": "#2196F3",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

// ═══════════════════════════════
// Service Worker — Caching Strategy
// ═══════════════════════════════
// sw.js

const CACHE_NAME = 'myapp-v1';
const STATIC_ASSETS = [
  '/',
  '/offline.html',
  '/css/app.css',
  '/js/app.js',
  '/icons/icon-192.png',
];

// Install — cache static assets
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(STATIC_ASSETS))
  );
});

// Fetch — Stale While Revalidate
self.addEventListener('fetch', event => {
  // Skip non-GET requests
  if (event.request.method !== 'GET') return;

  event.respondWith(
    caches.match(event.request).then(cached => {
      // Return cached + fetch fresh in background
      const fetchPromise = fetch(event.request).then(response => {
        const cache = caches.open(CACHE_NAME);
        cache.then(c => c.put(event.request, response.clone()));
        return response;
      }).catch(() => {
        // Offline — return offline page
        if (event.request.destination === 'document') {
          return caches.match('/offline.html');
        }
      });

      return cached || fetchPromise;
    })
  );
});

// Activate — clean old caches
self.addEventListener('activate', event => {
  event.waitUntil(
    caches.keys().then(keys =>
      Promise.all(
        keys
          .filter(key => key !== CACHE_NAME)
          .map(key => caches.delete(key))
      )
    )
  );
});

---

🎨 CSS & Font Optimization

Critical CSS

<!-- ═══════════════════════════════ -->
<!-- Critical CSS — Inline above-fold styles -->
<!-- ═══════════════════════════════ -->

<head>
  <!-- ✅ Critical CSS inlined (above-fold styles) -->
  <style>
    /* Only styles needed for first viewport */
    body { margin: 0; font-family: system-ui; }
    .hero { height: 100vh; display: flex; align-items: center; }
    .nav { position: fixed; top: 0; width: 100%; }
  </style>

  <!-- ✅ Non-critical CSS loaded async -->
  <link rel="preload" href="/css/app.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="/css/app.css"></noscript>
</head>

Font Optimization

Custom fonts are the main cause of CLS (layout shift) — when the font finishes loading, the text re-renders at a size different from the fallback font and the layout jumps. Use the font-display property to control that behavior:

/* ═══════════════════════════════ */
/* Font Loading — Prevent CLS     */
/* ═══════════════════════════════ */

/* ❌ Bad: Flash of Unstyled Text (FOUT) / Flash of Invisible Text (FOIT) */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  /* No font-display → browser default (usually FOIT = invisible text!) */
}

/* ✅ Good: font-display: swap */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: swap;     /* Show fallback → swap when loaded */
}

/* ✅ Better: font-display: optional */
@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
  font-display: optional;  /* Use if cached, skip if not */
}

<!-- Preload critical fonts -->
<link rel="preload" href="/fonts/inter-var.woff2" 
      as="font" type="font/woff2" crossorigin>

// ═══════════════════════════════
// Next.js — Automatic font optimization
// ═══════════════════════════════
import { Inter, Noto_Sans_Thai } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
});

const notoThai = Noto_Sans_Thai({
  subsets: ['thai'],
  display: 'swap',
  variable: '--font-thai',
});

// Next.js automatically:
// ├── Self-hosts fonts (no Google Fonts request!)
// ├── Preloads critical fonts
// ├── Generates optimal @font-face
// └── Prevents layout shift

If you are on Next.js, next/font handles the whole of font optimization for you — self-hosted fonts, preloading, an optimal @font-face and no layout shift, all automatically:

Tailwind CSS — Performance Tips

Tailwind CSS v3+ ships PurgeCSS built in: it works out which classes you actually use and strips the ones you do not, taking the CSS from 3 MB down to just 3-10 KB:

// tailwind.config.js
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',  // Only scan used files
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  // Tailwind v3+ automatically removes unused CSS (PurgeCSS built-in)
  // Result: 3-10 KB CSS instead of 3 MB!
};

---

📋 Performance Optimization Checklist

┌──────────────────────────────────────────────────────┐
│        Frontend Performance Checklist                 │
│                                                        │
│  🖼️ Images:                                           │
│  ├── [x] Use WebP/AVIF format                         │
│  ├── [x] Responsive sizes (srcset)                    │
│  ├── [x] Lazy load below-fold images                  │
│  ├── [x] Set width/height (prevent CLS)               │
│  ├── [x] Priority hint for LCP image                  │
│  └── [x] Use next/image or similar auto-optimization  │
│                                                        │
│  📦 JavaScript:                                       │
│  ├── [x] Code splitting (route-based)                 │
│  ├── [x] Lazy load heavy components                   │
│  ├── [x] Tree shake unused imports                    │
│  ├── [x] Avoid large libraries (lodash → lodash-es)   │
│  ├── [x] Bundle budget < 100 KB initial               │
│  └── [x] Analyze bundle with webpack-bundle-analyzer  │
│                                                        │
│  🎨 CSS:                                              │
│  ├── [x] Inline critical CSS                          │
│  ├── [x] Async load non-critical CSS                  │
│  ├── [x] Remove unused CSS (PurgeCSS/Tailwind)        │
│  └── [x] Minimize CSS-in-JS (prefer Tailwind/CSS)     │
│                                                        │
│  🔤 Fonts:                                            │
│  ├── [x] Self-host fonts (no external requests)        │
│  ├── [x] Use font-display: swap/optional               │
│  ├── [x] Preload critical fonts                        │
│  ├── [x] Subset fonts (latin only if no Thai)          │
│  └── [x] Max 2 font families                          │
│                                                        │
│  🌐 Network:                                          │
│  ├── [x] CDN for static assets                        │
│  ├── [x] HTTP/2 or HTTP/3                             │
│  ├── [x] Gzip/Brotli compression                      │
│  ├── [x] Cache headers (immutable for hashed assets)   │
│  ├── [x] Preconnect to external origins               │
│  └── [x] DNS prefetch for third-party domains         │
│                                                        │
│  ⚡ Rendering:                                        │
│  ├── [x] SSR/SSG for content pages (SEO + LCP)        │
│  ├── [x] CSR only for interactive-heavy features      │
│  ├── [x] ISR for dynamic-but-cacheable content        │
│  ├── [x] Streaming SSR for large pages                │
│  └── [x] React Server Components (reduce JS sent)     │
│                                                        │
│  📊 Monitoring:                                       │
│  ├── [x] Track Core Web Vitals (web-vitals lib)       │
│  ├── [x] Lighthouse CI in GitHub Actions               │
│  ├── [x] Real User Monitoring (RUM)                   │
│  └── [x] Performance budget alerts                    │
│                                                        │
└──────────────────────────────────────────────────────┘

---

🔑 Key Takeaways

The most important things from the whole post — 10 points every frontend developer should keep:

1. SSR for SEO + LCP, CSR for interactivity → use Next.js/Nuxt/SvelteKit, which give you all of it
2. Core Web Vitals = Google ranking factor → LCP < 2.5s, INP < 200ms, CLS < 0.1
3. Images = problem #1 → WebP/AVIF, responsive sizes, lazy load, width/height attributes
4. Code splitting = a smaller initial load → Lazy import components, route-based splitting
5. Tree shaking = dead code removed → import { x } from 'lib' instead of import lib
6. Bundle budget < 100 KB → measure every library before you install it (bundlephobia.com)
7. CDN + Cache = 10x faster → Static assets cache 1 year, HTML no-cache
8. Font optimization = CLS prevented → Self-host, font-display: swap, max 2 fonts
9. PWA = native-like experience → Offline, installable, push notifications
10. Measure before you optimize → use Lighthouse, web-vitals, RUM — never guess!

---

*📚 The complete DevOps series:*

1. *Git Branching* | 2. *CI/CD Pipeline* | 3. *Docker vs VMs*
2. *API Lifecycle* | 5. *Kubernetes* | 6. *Networking*
3. *Infrastructure as Code* | 8. *Monitoring & Observability*
4. *Linux & Shell* | 10. *DevSecOps & Security*
5. *Testing Strategies* | 12. *GitOps & ArgoCD*
6. *Cloud Architecture* | 14. *SRE*
7. *GitHub Actions & GitHub Flow* | 16. *Automated Testing with GitHub*
8. *Database Design & SQL* | 18. *Authentication & Authorization*
9. *Web Architecture & Design Patterns*
10. *Frontend Performance & Modern Frameworks* ← 📍 you are here