การมองเห็นปัญหาหลัก
- AI Agent ต่างจากมนุษย์ตรงที่ ไม่ต้องการ CSS, client-side JS, รูปภาพ เลย
- องค์ประกอบเหล่านี้มีแต่ทำให้เปลืองโทเค็น และแทบไม่ได้ให้ข้อมูลที่มีประโยชน์จริง
- สิ่งที่เอเจนต์ต้องการมีเพียง ข้อความที่สะอาดและมีโครงสร้าง
แนวทางแก้ของ Vercel
- ใช้กลไก HTTP สำหรับการเจรจาเนื้อหา (Content Negotiation)
- ที่ URL เดียวกัน สามารถส่งคืนฟอร์แมตต่างกันตามคำขอของไคลเอนต์
- มนุษย์ (เบราว์เซอร์) → ประสบการณ์แบบ HTML + CSS + JS แบบครบถ้วน
- AI Agent → ส่งเป็น Markdown
- ทำได้โดยไม่ต้องแยกเว็บไซต์หรือทำเนื้อหาซ้ำ
วิธีการทำงาน (อิงจาก Accept header)
- ตัวอย่าง header ที่เอเจนต์ส่งมา
Accept: text/markdown, text/html, */*- → ระบุชัดว่าให้ความสำคัญกับ markdown เป็นอันดับแรก
- มิดเดิลแวร์ของ Vercel ตรวจสอบ Accept header
- หากต้องการ markdown → ส่งต่อไปยัง Next.js route handler
- แปลงคอนเทนต์ rich-text ของ Contentful เป็น markdown แล้วตอบกลับ
- โค้ดบล็อก: คงตัวทำเครื่องหมาย syntax highlighting ไว้
- หัวข้อ: รักษาโครงสร้างลำดับชั้นไว้
- ลิงก์: คงไว้เหมือนเดิม
ผลลัพธ์และตัวเลข
- บล็อกโพสต์ทั่วไป
- เวอร์ชัน HTML: ประมาณ 500KB
- เวอร์ชัน Markdown: ประมาณ 2KB
- อัตราการลดขนาด: 99.6%
- ข้อดี
- เพิ่มประสิทธิภาพงบประมาณโทเค็นสูงสุด → โฟกัสที่ข้อมูลจริงแทน markup
- ประมวลผลคอนเทนต์ต่อคำขอได้มากขึ้น
- ทำงานได้เร็วขึ้น + ชนขีดจำกัดโทเค็นน้อยลง
การบำรุงรักษาทางเทคนิค
- ใช้ remote cache ของ Next.js 16 + slug ที่แชร์ร่วมกัน
- เมื่อคอนเทนต์ใน Contentful อัปเดต เวอร์ชัน HTML และ markdown จะถูกรีเฟรช พร้อมกัน → คงการซิงก์ไว้
การสนับสนุนการสำรวจของเอเจนต์
- มี sitemap เฉพาะในรูปแบบ markdown
- ข้อมูลที่รวมไว้: วันที่เผยแพร่, ประเภทคอนเทนต์, ลิงก์ตรงของแต่ละเวอร์ชัน HTML/Markdown เป็นต้น
- ช่วยให้เอเจนต์มองเห็นแผนที่ของคอนเทนต์ทั้งหมดที่ใช้งานได้ → เลือกรูปแบบที่เหมาะสมที่สุดได้ง่าย
ความหมายในภาพรวม
- ยอมรับว่ารูปแบบการเสพเว็บของมนุษย์และ AI นั้นแตกต่างกันโดยพื้นฐาน
- เป็นกรณีตัวอย่างเชิงปฏิบัติของการมอบประสบการณ์ที่เหมาะกับแต่ละไคลเอนต์
- เป็นจุดเริ่มต้นสำคัญของ เว็บสำหรับทั้งมนุษย์และ AI
2 ความคิดเห็น
เรื่องแบบนี้น่าจะลองทำตามดูได้ครับ
ดูเหมือนว่าเว็บในอนาคตอาจจะอยู่ในรูปแบบที่ไม่มี UI/UX ก็ได้..