Speculation Rules API คืออะไร? โหลดเร็ว + วิธีตั้งค่า

Speculation Rules API คือกฎที่สั่งให้เบราว์เซอร์คาดเดาหน้าถัดไปแล้วทำ prefetch หรือ prerender ล่วงหน้า พอผู้ใช้คลิกจริง หน้าเป้าหมายจึงเปิดแทบจะทันที เหมาะกับลิงก์ Intent สูง คุมด้วยเงื่อนไขเครือข่าย และวัดผล LCP/INP ผ่าน DevTools

Speculation Rules API คืออะไร

เป็นไฟล์/บล็อก JSON ที่วางในหน้าเพื่อสั่งงานเบราว์เซอร์ให้ prefetch (โหลดล่วงหน้าแต่ไม่รัน JS) หรือ prerender (เรนเดอร์หน้าเงาพร้อมสลับทันที) สำหรับ URL เป้าหมาย ช่วยให้การนำทางรู้สึก “โหลดทันที” เมื่อคลิก

โค้ดตัวอย่างเริ่มต้น

<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        {"href_matches": "^/(pricing|contact)$"},
        {"selector_matches": "a.cta-primary"}
      ]
    },
    "eagerness": "eager"
  }],
  "prefetch": [{
    "where": {"selector_matches": "article a.internal"},
    "eagerness": "moderate"
  }]
}
</script>

ทางเลือกผ่าน Header (จัดกฎไว้ไฟล์เดียว):

Speculation-Rules: <https://yourdomain.com/speculation.json>

เลือกใช้เมื่อไร (prefetch vs prerender)

How-to: ตั้งค่าแบบทีละขั้น

1. ระบุเส้นทาง Intent สูง (เช่น /pricing, /contact)
2. กำหนดกฎในสคริปต์หรือไฟล์ JSON กลาง
3. เพิ่มเงื่อนไขปรับโหมดตามเครือข่าย/แบตเตอรี่เพื่อความคุ้มค่า
4. ทดสอบใน DevTools → Application → Speculative loads
5. วัดผล LCP/INP และ Conversion ก่อน-หลังใช้งาน

ดีบักและวัดผล

• ใช้ DevTools ตรวจว่าลิงก์ใดถูก prefetch/prerender จริง
• เปรียบเทียบ LCP/INP เมื่อเปิดใช้งานกับเวอร์ชันเดิม

Best practices ปี 2025

• จำกัด prerender เฉพาะลิงก์ Intent สูง และสลับเป็น prefetch บนเครือข่ายช้า/โหมดประหยัดพลังงาน
• รองรับแบบ progressive enhancement ทดสอบหลายเบราว์เซอร์
• ทำงานคู่กับ Edge SEO และ Island Architecture เพื่อ UX/SEO สูงสุด

FAQ (People Also Ask)

Speculation Rules API ทำให้เว็บเร็วขึ้นยังไง?
โหลด/เรนเดอร์หน้าถัดไปล่วงหน้า จึงลดเวลานำทางเมื่อผู้ใช้คลิกจริง

ควรใช้ prerender กับหน้าไหน?
หน้า Intent สูง เช่น Pricing, Contact, ปุ่ม CTA หลัก

จะกระทบ Analytics/SEO ไหม?
โดยทั่วไปไม่ หากตั้งค่าไม่ให้นับ pageview เกินจริง และทดสอบผลต่อการติดตามแคมเปญ

แหล่งอ้างอิง

• Chrome Developers — Speculation Rules
• web.dev — Prerender pages
• MDN — Speculation-Rules header

อัปเดตล่าสุด: 08 Aug 2025

เกี่ยวกับผู้เขียน

Vision X Brain Team — ทีมผู้เชี่ยวชาญ Performance/SEO สำหรับเว็บความเร็วสูงและอีคอมเมิร์ซ ผ่านประสบการณ์ออกแบบ Speculation Rules ในโปรเจกต์จริง วัดผล LCP/INP และดีบักด้วย DevTools ดูผลงาน/ติดต่อ

ต้องการทีมมืออาชีพช่วยออกแบบ Speculation Rules?

เราช่วยวางกฎให้เหมาะกับ Funnel ของคุณ ปรับใช้แบบ progressive วัดผลจริง และดูแลไม่ให้กระทบ Analytics/SEO ติดต่อเรา