#performance 36

Image Optimizer CLI

Node.js CLI สำหรับ bulk compress รูปภาพ — แปลงเป็น WebP/AVIF, resize, และ strip metadata อัตโนมัติก่อน deploy

Astro Islands Architecture — JavaScript เฉพาะที่จำเป็น

เข้าใจ Islands Architecture ของ Astro ว่าทำงานอย่างไร ทำไมถึงส่ง zero JS by default และเมื่อไรควรใช้ client directives เพื่อ hydrate component

Astro Server Islands — Dynamic Content ใน Static Site

Server Islands คือ Astro 5 feature ที่ช่วยฝัง dynamic server-rendered component ลงใน static page โดยไม่ต้อง sacrifice performance ของหน้าอื่น

Browser Web APIs — ResizeObserver, Clipboard, Broadcast Channel, Web Workers

Web APIs ที่ใช้บ่อยและมักถูกมองข้าม: ResizeObserver, MutationObserver, Clipboard, Broadcast Channel, Web Workers

CSS Animations & Transitions — ทำ UI ให้มีชีวิตชีวา

รวม pattern CSS animation และ transition ที่ใช้จริงในการสร้าง UI ที่ smooth — hover effects, micro-interactions, page transitions และ reduced motion

CSS Scroll-Driven Animations

Animate elements ตาม scroll position โดยใช้ animation-timeline: scroll() และ view() — ไม่ต้องการ JavaScript หรือ ScrollTrigger

Fetch API Patterns — Data Fetching, AbortController, Retry

Patterns สำหรับ fetch ข้อมูล: timeout, retry, AbortController, error handling, caching headers, streaming response

HTTP Caching — Cache-Control, ETag, Stale-While-Revalidate

ทำความเข้าใจ HTTP caching headers ที่ถูกต้อง ลด server load และเร็วขึ้นสำหรับผู้ใช้กลับมา

Browser Storage — localStorage, sessionStorage, IndexedDB

เปรียบเทียบและใช้งาน browser storage: localStorage สำหรับ simple KV, IndexedDB สำหรับ structured data ขนาดใหญ่

Intersection Observer API — Lazy Load, Scroll Animations, Infinite Scroll

ใช้ IntersectionObserver ตรวจว่า element เข้า/ออก viewport โดยไม่ต้องใช้ scroll event

Node.js Streams — Readable, Writable, Transform, Pipeline

จัดการข้อมูลปริมาณมากด้วย Node.js Streams: pipe, pipeline, Transform streams, backpressure, และ async iteration

Progressive Web App (PWA) — Manifest, Service Worker, Offline

สร้าง PWA ตั้งแต่ web app manifest ถึง service worker caching strategy และ install prompt

Web Fonts Optimization — โหลด Font เร็วโดยไม่กระทบ UX

วิธี optimize font loading ให้ไม่เกิด FOUT/FOIT, ใช้ font-display อย่างถูกต้อง, preconnect, self-host fonts, variable fonts และ system font stack

Web Performance Checklist — ตรวจสอบก่อน Ship

Checklist สำหรับ frontend performance ที่ครอบคลุม Core Web Vitals, images, fonts, JavaScript, และ network — ใช้ก่อน deploy ทุกครั้ง

SEO Meta Tags — คู่มือครบสำหรับ Static Site

รวม meta tags ที่จำเป็น ตั้งแต่ title, description, Open Graph, Twitter Card ไปจนถึง JSON-LD structured data สำหรับ static site

Responsive Design Patterns — CSS ที่ใช้จริงบน Static Site

Pattern สำหรับ responsive layout บน CSS ล้วนๆ ที่ใช้ได้จริง ครอบคลุม fluid typography, container queries, intrinsic grid และ mobile-first approach

HTMX — HTML Attributes แทน JavaScript สำหรับ Dynamic UI

คู่มือ HTMX — ทำ AJAX, WebSocket และ SSE ด้วย HTML attributes โดยไม่เขียน JavaScript

Web Accessibility Checklist — สิ่งที่ต้องทำก่อน Deploy

รายการตรวจสอบ accessibility สำหรับ static site ครอบคลุม keyboard navigation, ARIA, color contrast และ screen reader

Bun Runtime — JavaScript runtime ที่เร็วกว่า Node

คู่มือ Bun — runtime ที่รวม bundler, test runner และ package manager ไว้ด้วยกัน ใช้แทน Node + npm ได้เลย

CSS Custom Properties — Pattern สำหรับ Theming และ Dark Mode

วิธีใช้ CSS custom properties (variables) อย่างเป็นระบบ สำหรับ theming, dark mode, และ design tokens บน static site

Web Storage — localStorage, sessionStorage และ IndexedDB

เปรียบเทียบ storage options ใน browser — localStorage, sessionStorage, IndexedDB และเมื่อไหร่ควรใช้อะไร

Astro View Transitions — เปลี่ยนหน้าแบบ Smooth ด้วย ClientRouter

วิธีใช้ View Transitions API ใน Astro ผ่าน ClientRouter, transition:name สำหรับ shared elements, และการ handle events ที่ถูกต้อง

Service Workers — Cache Strategy สำหรับ Static Site

คู่มือ Service Worker สำหรับ offline caching, stale-while-revalidate และ cache management บน static site

Pagefind — Full-text Search สำหรับ Static Site

Pagefind คือ library สำหรับเพิ่มระบบค้นหาให้กับ static site โดยไม่ต้องมี server หรือ external API ทำงานได้หลัง build เลย

Content Security Policy (CSP) — ป้องกัน XSS ด้วย HTTP Header

คู่มือตั้งค่า CSP header เพื่อป้องกัน Cross-Site Scripting (XSS) และ injection attacks บน static site

Astro Image Optimization — ใช้ astro:assets ให้ถูกต้อง

คู่มือใช้ <Image /> component และ getImage() ใน Astro สำหรับ WebP, lazy loading และ responsive images ที่ optimize แล้ว

pnpm — Package Manager ที่เร็วและประหยัด Disk

คู่มือใช้ pnpm แทน npm/yarn — content-addressable store, strict isolation และ workspace สำหรับ monorepo

Core Web Vitals — ทำ Static Site ให้ได้คะแนนสูง

แนวทางปรับ LCP, CLS, INP สำหรับ static site บน Astro ที่ทำได้จริงโดยไม่ต้องจ้างผู้เชี่ยวชาญ

HTML lazy loading — โหลด resource เมื่อใกล้จะเห็น

Event Delegation — ผูก listener ครั้งเดียวกับ parent

Performance API — วัด timing ใน browser อย่างแม่นยำ

Web Workers — รัน JS บน background thread

HTML <picture> — responsive image ที่ถูกวิธี

AbortController — ยกเลิก fetch ที่กำลังรอได้

WeakMap & WeakSet — reference ที่ไม่กัน GC