Category: reference
Web Performance Checklist — ตรวจสอบก่อน Ship
Checklist สำหรับ frontend performance ที่ครอบคลุม Core Web Vitals, images, fonts, JavaScript, และ network — ใช้ก่อน deploy ทุกครั้ง
สารบัญ
Core Web Vitals เป้าหมาย
| Metric | ดี | ต้องแก้ | แย่ |
|---|---|---|---|
| LCP (Largest Contentful Paint) | < 2.5s | 2.5–4s | > 4s |
| INP (Interaction to Next Paint) | < 200ms | 200–500ms | > 500ms |
| CLS (Cumulative Layout Shift) | < 0.1 | 0.1–0.25 | > 0.25 |
วัดด้วย: Lighthouse, PageSpeed Insights, Chrome DevTools Performance tab
Images
- ใช้ format สมัยใหม่: WebP หรือ AVIF
- กำหนด
widthและheightทุกรูป (ป้องกัน CLS) - ใส่
loading="lazy"กับรูปใต้ fold - ใส่
fetchpriority="high"กับ hero image - ใช้
srcset/sizesสำหรับ responsive images - compress รูปก่อน deploy (Squoosh, ImageOptim)
<!-- ✓ แบบถูกต้อง -->
<img
src="hero.webp"
width="1200" height="630"
alt="Hero image"
fetchpriority="high"
decoding="async"
/>Fonts
-
preconnectกับ font server - ใช้
font-display: swapเสมอ - โหลดเฉพาะ weights ที่ใช้จริง
- พิจารณา self-host แทน Google Fonts เพื่อลด RTT
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />@font-face {
font-family: 'Inter';
font-display: swap; /* ✓ สำคัญ */
src: url('/fonts/inter.woff2') format('woff2');
}JavaScript
- Bundle size < 150KB initial JS (compressed)
- ไม่มี render-blocking scripts ใน
<head>(ใช้deferหรือtype="module") - Code-split ตาม route — ไม่ load ทุก JS ในหน้าเดียว
- Remove unused dependencies (
npm run build -- --analyze) - Tree-shake ตรวจสอบว่า import เฉพาะที่ใช้
<!-- ✓ non-blocking -->
<script src="app.js" defer></script>
<script type="module" src="app.js"></script>
<!-- ❌ blocking -->
<script src="app.js"></script>CSS
- ไม่มี CSS ที่ block rendering ใน
<head>มากเกินไป - Critical CSS inline ใน
<style>หรือ preload - Unused CSS ถูก purge แล้ว
Network & Caching
- Enable HTTP/2 หรือ HTTP/3 บน server
- Static assets มี
Cache-Control: max-age=31536000, immutable - HTML มี
Cache-Control: no-cacheหรือสั้น - Gzip หรือ Brotli compression เปิดอยู่
Cache-Control: max-age=31536000, immutable # สำหรับ /assets/bundle-abc123.js
Cache-Control: no-cache # สำหรับ index.htmlResource Hints
<!-- preload: สิ่งที่ต้องใช้เร็วมากในหน้านี้ -->
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin />
<link rel="preload" href="/hero.webp" as="image" />
<!-- prefetch: หน้าที่ user น่าจะไปต่อ -->
<link rel="prefetch" href="/about" />
<!-- preconnect: domain ที่จะ fetch ข้อมูล -->
<link rel="preconnect" href="https://api.example.com" />Rendering Strategy
| หน้า | Strategy | เหตุผล |
|---|---|---|
| Blog, Docs | Static (SSG) | เนื้อหาไม่เปลี่ยนบ่อย |
| Dashboard | SSR | ข้อมูล user-specific |
| E-commerce listing | ISR/SSG + revalidate | เนื้อหาเปลี่ยนบ้าง |
| Real-time | Client-side fetch | data เปลี่ยนทุกวินาที |
เครื่องมือตรวจสอบ
# Lighthouse CLI
npx lighthouse https://panupongws.com --view
# Bundle analyzer (Vite/Astro)
npx vite-bundle-analyzer- PageSpeed Insights — วัด real-world performance จาก Chrome UX Report
- WebPageTest — เทสต์จาก location ต่างๆ ทั่วโลก
- Bundlephobia — ตรวจ npm package size ก่อน install
Quick Wins ที่ impact สูงสุด
- Compress images → ลด LCP ได้มากที่สุด
- Remove unused JS → ลด INP และ initial load
- Add
width/heightto images → ป้องกัน CLS - Enable compression (Brotli) → ลด transfer size ~20-30%
- Preconnect to critical domains → ลด DNS+TLS time