ใครที่ทำเว็บด้วย
React หรือ Next.js หรือ JS เฟรมเวิร์คแล้วปวดหัวเรื่อง Performance...
แก้ยังไงคะแนนก็ไม่แตะ 100 สักที หรือใครที่เบื่อ WordPress
ที่บวมจนเว็บอืด
นี่เลยครับ Astro พระเอกของสาย Content-Driven Website
ก่อนอื่นต้องขอออกตัวว่า เว็บในภาพไม่ใช่เว็บผมนะครับ (คือของหน้า official web ของ Astro)
Astro Islands Architecture
ความลับที่ทำให้ Astro เร็ว แรง ทะลุนรกอยู่ที่สถาปัตยกรรมที่เรียกว่า Islands Architecture และแนวคิด Zero JavaScript By Default
เว็บทั่วไป (SPA) โหลด JavaScript มาทั้งก้อน ทั้งที่ User ยังไม่ได้กดอะไร (เหมือนสั่งข้าวจานเดียว แต่เสิร์ฟมาทั้งบุฟเฟต์)
แต่ในส่วนของ
Astro นั้นส่งมาแค่ HTML/CSS เพียว ๆ ที่เบาหวิว ส่วนไหนต้องใช้ JS (เช่น
ปุ่มกด, สไลเดอร์) ค่อยโหลดเฉพาะตรงนั้น ทำให้เว็บคลีนจัด ๆ
ฟังดูเหมือนจะคล้าย Lazy Loading แต่เป็นเวอร์ชันที่เอาไว้ใช้กับ JS code โดยเฉพาะครับ (ทางเทคนิคเรียกว่า Lazy Hydration)
อธิบายให้เห็นภาพชัด ๆ
ปกติ (Next.js/React ทั่วไป) พอเปิดเว็บปุ๊บ บราวเซอร์จะรีบโหลด JS ของ
ทุก Component มารอไว้ทันที (แม้ว่า Component นั้นจะอยู่ตรง Footer ที่
User ยังเลื่อนไปไม่ถึงก็ตาม)
ผลเสียทำให้เว็บโหลดช้า (Blocking Time สูง) เพราะต้องรัน JS ที่ยังไม่ได้ใช้
แต่ใน Astro ในช่วงแรก (Initial Rendering) จะส่งมาแค่ HTML นิ่ง ๆ (เหมือนรูปภาพ) ให้ User เห็นก่อนทันที (เร็วมาก)
ทีนี้พอ User เลื่อนหน้าจอลงมาจนเกือบจะถึง Component นั้น Astro ถึงจะค่อยไปเรียก JavaScript ของก้อนนั้นมาทำงานครับ
ผลลัพธ์คือ...
เว็บโหลดไววัวตายควายล้ม คะแนน Core Web Vitals ผ่านและเมตทริกซ์ของ Page Speed ตัวต่าง ๆ เต็ม 100 ได้ไม่ยาก เพราะไม่ต้องแบก JS ส่วนเกินครับ
ซึ่ง Google Bot ชอบเว็บเบา ๆ แบบนี้มาก Index ไว อันดับพุ่ง ดังนั้นดีต่อ SEO ในระดับ 1st tier เลย
แถมยังเขียนง่าย ใครเขียน HTML/CSS เป็น หรือเคยเขียน React/Vue มา ก็เขียน Astro ได้เลย (อาจจะเหมาะกับสาย technical นิดนึงครับ)
// ตัวอย่างไฟล์ src/pages/index.astro
---
// 1. Server Script (รันตอน Build ไม่หลุดไปหน้าเว็บ)
const pageTitle = "Web Mastery 2026";
import NewsletterForm from '../components/ReactForm.jsx';
---
<!-- 2. HTML Template (ผสม HTML ปกติได้เลย) -->
<html>
<head><title>{pageTitle}</title></head>
<body>
<h1>สวัสดีครับ ผมใช้ {pageTitle}</h1>
<!-- 🔥 ทีเด็ด: สั่งให้โหลด JS เฉพาะก้อนนี้ เมื่อ User เลื่อนมาเจอ -->
<NewsletterForm client:visible />
</body>
</html>
และ Astro นั้นค่อนข้างเหมาะกับเว็บจำพวก
- Blog / News Site
- Portfolio
- Documentation
- Corporate Website / Marketing Page
มี templates ให้เลือกเพียบเลยครับ
ในส่วนของโครงสร้างก็เรียบง่าย
แต่ Astro เนี่ยะไม่เหมาะกับแนว Web App ที่ซับซ้อนมาก ๆ เช่น Dashboard หลังบ้าน (อันนั้นไปใช้ Next.js/React เหมือนเดิมดีแล้วครับ)
เพื่อน ๆ ที่ยังทำเว็บ Blog ด้วยเครื่องมือหนัก ๆ ลองมาใช้ Astro
ดูครับ แล้วจะได้สัมผัสกับความเร็ว แรง...ของแทร่
