Rendering, Performance & UX

เร็วตั้งแต่ default ลื่นเมื่อเราเลือก

Astro ให้เราเริ่มที่ baseline ที่เร็วอยู่แล้ว: static HTML, zero JavaScript, หน้าเล็ก โมดูลนี้ว่าด้วยการรักษา baseline นั้นไว้ตอนที่เราเพิ่มความ polish — navigation แบบ client-side ที่ลื่น, image ที่ optimize และ caching — โดยไม่แอบเอาความอืดที่ Astro ตั้งใจหลีกเลี่ยงกลับเข้ามา

ธีมตลอดโมดูล: ทุกการเพิ่ม feature ควรใช้ JavaScript และ bytes ให้น้อยที่สุด view transition, image, cached response — แต่ละอย่างมี “วิธีที่ถูก” ที่รักษา baseline ที่เร็วไว้ และโมดูลนี้จะสอนวิธีเหล่านั้น

โมดูลนี้ครอบคลุมอะไร

บทเรียน	สิ่งที่จะได้เรียน
View transitions	`<ClientRouter />` สำหรับ navigation แบบ SPA ที่มี animation
Images & assets	component `<Image />` และ `<Picture />` กับ `astro:assets`
Performance & zero-JS	เลือก directive และ prefetch เพื่อส่ง JavaScript ให้น้อยลง
Caching & edge	Cache-Control, edge caching และ shell ที่ cache ได้

Mental model เรื่อง performance

flowchart TB
  base["Baseline: static HTML, zero JS"] --> nav["Add smooth nav: ClientRouter (small JS)"]
  base --> img["Add images: astro:assets (optimized, lazy)"]
  base --> cache["Add caching: Cache-Control at the edge"]
  nav --> fast["Still fast: minimal JS, cacheable"]
  img --> fast
  cache --> fast

รักษา baseline ที่เร็วไว้ตอนเพิ่ม feature

Navigation รู้สึกเหมือนทันทีได้ด้วย <ClientRouter /> และ prefetch — ด้วยไม่กี่กิโลไบต์ ไม่ใช่ทั้ง SPA framework
Images มักเป็นสิ่งที่หนักที่สุดในหน้า astro:assets optimize ให้อัตโนมัติ
Caching เปลี่ยน render ให้เป็นการ lookup — response ที่เร็วที่สุดคืออันที่เราไม่ต้องคำนวณ

ธีมหลักของโมดูลนี้คืออะไร? เพิ่ม feature ให้มากที่สุดเท่าที่ทำได้ เพิ่มความ polish ด้าน UX โดยรักษา baseline ที่เร็วไว้ — ใช้ JavaScript และ bytes น้อยที่สุดในแต่ละการเพิ่ม ใช้ server-side rendering เสมอ หลีกเลี่ยง image ทั้งหมด

ในหน้าเว็บทั่วไป อะไรมักเป็นสิ่งที่หนักที่สุดที่ต้องโหลด? HTML Images CSS reset favicon