Website 100 เต็มเกือบทุก Metric ด้วย Claude Code — แต่ไม่ใช่แค่สั่ง 2-3 ครั้งแล้วสำเร็จ

นี่คือผลจาก PageSpeed Insights ของ muze.co.th บน production — วันที่ 29 พฤษภาคม 2026

และ website นี้ถูกสร้างทั้งหมดด้วย Claude Code — ไม่มี developer ที่นั่งเขียน code ด้วยมือ

แต่นี่ไม่ใช่เรื่องของการกด prompt 2-3 ครั้งแล้วได้ผลลัพธ์ที่สมบูรณ์

เบื้องหลังคะแนน 100 เต็มมีสิ่งที่คนส่วนใหญ่ไม่ได้พูดถึงเวลาพูดเรื่อง “vibe coding”: measurement framework, iterative fine-tuning, และ human judgment ที่ถูกจุด

1. เริ่มจาก KPI ก่อน ไม่ใช่ Prompt

สิ่งแรกที่ต้องทำก่อนเริ่ม build คือตอบให้ได้ว่า “done” หน้าตาเป็นยังไง

สำหรับ muze.co.th เรากำหนด KPI ไว้ 3 ระดับ:

Performance KPI

• Lighthouse Desktop: 90+ (ได้ 100)
• LCP ≤ 1.2s (ได้ 0.6s)
• CLS = 0 (ได้ 0)
• TBT ≤ 50ms (ได้ 20ms)

AI Search KPI

• ถูก discover ได้จาก 10+ buyer queries ที่ potential client ใช้จริง
• มี structured data ที่ AI parser อ่านแล้วเข้าใจว่า Muze ทำอะไรได้บ้าง

Content KPI

• TechCut scoring ≥ 8.0 ก่อน publish
• บทความแต่ละชิ้นต้องตอบ “ใครจะ search เจอ และด้วย query อะไร”

เมื่อมี KPI ชัด Claude Code รู้ว่าต้องทำอะไร และเราก็รู้ว่าจะวัดอะไร

2. Architecture ที่ถูกต้องตั้งแต่ต้น — Hugo Static Site

ก่อนจะ fine-tune metric ใดๆ ได้ ต้องเลือก architecture ที่ถูกก่อน

เลือก Hugo เพราะ:

• Generate HTML ที่ static อยู่แล้ว — ไม่มี JavaScript hydration overhead
• Page weight ของ muze.co.th: 66 KB vs คู่แข่งบางรายที่ใช้ WordPress/Wix: 174–1,610 KB
• Hugo handle multilingual (TH/EN) ด้วย i18n system ในตัว ไม่ต้องเพิ่ม JS

Claude Code ช่วยสร้าง directory structure, layouts, partials, shortcodes, i18n files และ content organization ทั้งหมด — แต่ การตัดสินใจเลือก Hugo เป็น human decision ที่ต้องทำก่อนจะเริ่ม prompt ใดๆ

3. LCP Engineering — ไม่ใช่แค่ “ใส่รูปให้สวย”

LCP (Largest Contentful Paint) คือ metric ที่บอกว่า element ที่ใหญ่ที่สุดใน viewport โหลดเร็วแค่ไหน สำหรับ muze.co.th คือ hero image

การได้ LCP 0.6s ผ่านการ iterate หลายรอบ:

รอบที่ 1: ใช้ <picture><source> + srcset — แต่ browser อาจ discover image ช้าเพราะต้องอ่าน HTML ก่อน

รอบที่ 2: เพิ่ม <link rel="preload"> สำหรับ hero image — แต่ DPR (device pixel ratio) ไม่ตรงกับ srcset จริง ทำให้ preload ไม่ match

รอบที่ 3: แก้ preload ให้ระบุ imagesrcset และ imagesizes ให้ตรงกับ media queries จริง — LCP ลดลงชัดเจน

รอบที่ 4 (revert): ทดลองเปลี่ยนจาก <picture> เป็น <img srcset> เพื่อให้ browser discover ได้เร็วกว่า — แต่ LCP ไม่ดีขึ้น จึง revert กลับ

แต่ละ iteration Claude Code เป็นคนเขียน code การตัดสินใจว่า “ลอง approach ไหน” และ “เมื่อไหร่ควร revert” เป็น human judgment

4. Mobile Performance — คนละโจทย์จาก Desktop

Desktop 100 ไม่ได้หมายความว่า Mobile 100 โดยอัตโนมัติ

สิ่งที่ต้องทำเพิ่มสำหรับ mobile:

Fonts: เปลี่ยนจาก synchronous loading เป็น async — ใส่ font-display: swap และ preload ด้วย <link rel="preload" as="font">

Animations: Animation หนักๆ บน mobile ทำให้ scroll janky — เพิ่ม logic ตรวจ prefers-reduced-motion และ skip animation บน touch device

Orb blur: Background blur effect ที่สวยบน desktop กลายเป็นปัญหาบน mobile เพราะ backdrop-filter: blur() cost scale ตาม radius² บน GPU เก่า — ลด blur จาก 80px → 30px ช่วยได้บน iPhone รุ่นใหม่ แต่บน A11/A12 ยังมีผล แนวทางที่ถูกคือ @media (hover: none) disable blur ทั้งหมดบน touch device

5. SEO Structured Data — สิ่งที่คู่แข่งไม่มี

เมื่อ audit muze.co.th เทียบกับ Thai enterprise software companies รายอื่น พบว่า Muze เป็นคนเดียวที่มี:

FAQPage schema พร้อม 10 Q&As ที่ตอบคำถาม enterprise buyer จริง เช่น “Muze ต่างจาก Software House ยังไง?” และ “Muze รับทำ Revenue Sharing ได้ไหม?” — AI search อ่านได้โดยตรงและใช้ตอบ conversational queries

ProfessionalService schema พร้อม serviceType array 13 รายการ — ระบุชัดเจนว่า Muze ทำอะไร เช่น “Streaming & OTT Platform Development”, “FinTech & Trading Platform”, “E-Commerce & Omnichannel” — AI parser สร้าง entity association ได้โดยไม่ต้องอนุมานจาก prose

meta robots ที่ explicit อนุญาต rich snippets: max-image-preview:large, max-snippet:-1, max-video-preview:-1 — คนเดียวในกลุ่มที่ทำ

คู่แข่ง:

• Seven Peaks (อันดับ 2): ไม่มี JSON-LD เลย — ดี content แต่ AI parser ต้องอนุมานทุกอย่างจาก prose
• Appman: มี schema แบบ default จาก Yoast เท่านั้น
• Sertis: มีแค่ WebSite schema — minimum ที่สุดในกลุ่ม

6. AI Search Gap Analysis — Methodology ที่สร้างขึ้นจาก 0

หนึ่งในงานที่ Claude Code ช่วยได้มากที่สุดคือ systematic analysis ว่า website ปัจจุบัน cover buyer queries ได้แค่ไหน

กระบวนการ:

Step 1: รวบรวม 12 buyer queries จริงที่ potential client ใช้ค้นหา enterprise tech partner ในไทย

Step 2: Map แต่ละ query กับ content ที่มีอยู่ — ระบุว่า query ไหนถูก cover, ไหนบาง, ไหนไม่มีเลย

Step 3: พบว่าปัญหาหลักคือ content จัดตาม client name แต่ buyer ค้นหาตาม capability — “OTT platform development Thailand” ไม่ match กับ “CH3+” ใน HTML

Step 4: แก้ที่ i18n strings ก่อน — เปลี่ยน label ของ Success Stories groups ให้ใช้ buyer language ที่ถูก เช่น “Enterprise Custom Tech” → “Enterprise Custom Software Development” และเพิ่ม vertical keywords ใน card descriptions

Step 5: วาง roadmap TechCut articles ที่ยังขาด — FinTech cross-story, Enterprise Custom Software, Strategic Tech Partner positioning

งานทั้งหมดนี้ Claude Code ทำ analysis, เสนอ solution, และ execute code changes ส่วน การตัดสินใจว่า query ไหนสำคัญและ framing ไหนถูกต้อง เป็น human

7. Human เป็น Source of Truth — เสมอ

ระหว่าง build มีจุดหนึ่งที่ Claude Code เขียน content อ้างว่า Muze สร้าง recommendation engine ให้ CH3+ โดยใช้ collaborative filtering

ข้อมูลนั้นไม่ถูกต้อง

ทีม Muze แก้ไขทันทีเพราะรู้ข้อเท็จจริงของโปรเจกต์ดีกว่า AI — นี่คือตัวอย่างชัดที่สุดว่าทำไม human judgment ถึงสำคัญ AI สร้าง narrative ที่ฟังดูสมเหตุสมผลได้เสมอ แต่ความถูกต้องของข้อมูลมาจาก คนที่เคยทำโปรเจกต์นั้นจริงๆ

สูตรจริงของ “Website ด้วย AI ที่ได้ 100”

Human:  KPI + Architecture decision + Quality gate
AI:     Execution + Iteration + Analysis

ไม่ใช่: สั่ง AI แล้วรอ แต่คือ: Human กำหนดว่าอะไรดี → AI build → measure → Human ตัดสิน → AI แก้ → วนซ้ำ

ความเร็วจาก AI มาจากการ execute iteration เร็ว ไม่ใช่จากการกำจัด human ออกจาก loop

ผลลัพธ์ที่วัดได้

• Lighthouse Desktop: Performance 100 / Accessibility 95 / Best Practices 100 / SEO 100
• LCP: 0.6s (benchmark ดีมาก คือ ≤ 1.2s)
• Page weight: 66KB (คู่แข่ง: 174KB–1.6MB)
• Structured data: 11 schema types รวม FAQPage + ProfessionalService — นำหน้าคู่แข่งทุกราย
• AI Search Coverage: 9/12 buyer queries ที่กำหนดไว้

ดู case studies ของ Muze →

คุยกับทีม Muze →

บทความนี้ถอดจากกระบวนการ build จริงของ muze.co.th — ทุก insight มาจาก iteration จริง ไม่ใช่ทฤษฎี