ช่วงทดลองใช้จากต้นทางสำหรับการนำทางแบบนุ่มนวลครั้งสุดท้ายจะเริ่มใน Chrome 147

Barry Pollard
Michal Mocny

เผยแพร่: 20 เมษายน 2026

Chrome วางแผนที่จะเปิดตัว Soft Navigations API ที่เราได้ทดลองใช้ก่อนหน้านี้ภายในปีนี้ เราจึงจะเสนอช่วงทดลองใช้จากต้นทางอีก 1 รายการโดยจะเริ่มใน Chrome 147 จนถึง Chrome 149 การทดลองนี้จะรวมความคิดเห็นจากการทดลองก่อนหน้าไว้ในรูปแบบสุดท้ายที่คาดการณ์ไว้ของ API เราขอแนะนำให้เจ้าของเว็บไซต์ที่สนใจฟีเจอร์นี้ทำการทดสอบขั้นสุดท้ายของ API ในรูปแบบสุดท้ายที่คาดไว้ก่อนที่จะเปิดตัว

การนำทางแบบนุ่มนวลคืออะไร

"การนำทางแบบเบา" คือเมื่อ JavaScript สกัดกั้นการนำทาง (เช่น การคลิกลิงก์) และอัปเดตเนื้อหาในหน้าที่มีอยู่แทนที่จะโหลดหน้าใหม่ ขณะที่ URL ยังคงอัปเดตในแถบที่อยู่ สำหรับผู้ใช้ การดำเนินการเหล่านี้จะดูเหมือนการไปยังส่วนต่างๆ แบบเดิม แต่ในมุมมองของเบราว์เซอร์ หน้าเว็บยังคงเป็นหน้าเว็บเดิม

ความจำเป็นของ Soft Navigation API

Soft Navigations API เป็น API ที่เสนอสำหรับการตรวจหาการนำทางแบบนุ่มที่เว็บไซต์แอปพลิเคชันหน้าเว็บเดียว (SPA) ใช้ เนื่องจากไม่มีการนำทางหน้าเว็บจริงสำหรับการไปยังแบบย่อย JavaScript จึงต้องจัดการการดำเนินการบางอย่างด้วยตนเอง ซึ่งปกติแล้วจะเกิดขึ้นสำหรับการไปยังส่วนต่างๆ การดำเนินการบางอย่าง เช่น การจัดการประวัติการนำทาง สามารถทำได้ด้วย API ปัจจุบัน อย่างไรก็ตาม การดำเนินการอื่นๆ เช่น การวัด Core Web Vitals จะทำไม่ได้สำหรับการไปยังส่วนต่างๆ เหล่านี้

Soft Navigation API ช่วยให้สังเกตการนำทางแบบนุ่มนวลได้ แม้ว่า JavaScript ที่เริ่มต้นการไปยังส่วนต่างๆ แบบนุ่มนวล (โดยปกติคือเฟรมเวิร์ก JavaScript) จะทราบว่าการไปยังส่วนต่างๆ เกิดขึ้นเมื่อใด แต่ JavaScript อื่นๆ ที่เว็บไซต์ใช้ (เช่น สคริปต์วิเคราะห์) และเบราว์เซอร์เองจะไม่ทราบ

Core Web Vitals และ SPA

หนึ่งในปัจจัยหลักที่ขับเคลื่อน Soft Navigation API คือการอนุญาตให้วัด Core Web Vitals สำหรับ SPA ทั้งเบราว์เซอร์ (เพื่อให้ปรากฏในเครื่องมือต่างๆ เช่น รายงานประสบการณ์ของผู้ใช้ Chrome) และเจ้าของเว็บไซต์จะวัด Core Web Vitals โดยใช้โซลูชันการตรวจสอบผู้ใช้จริง (RUM)

เฟรมเวิร์ก JavaScript สามารถวัดบางแง่มุมของ Core Web Vitals สำหรับ SPA ได้ โดยเฉพาะ Interaction to Next Paint (INP) และ Cumulative Layout Shift (CLS) จะอิงตามองค์ประกอบพื้นฐาน (Event Timing API และ Layout Instability API ตามลำดับ) ที่วัดได้ในช่วงระยะเวลาใดก็ได้เพื่อคำนวณเมตริกเหล่านั้น อย่างไรก็ตาม เมตริกอื่นๆ เช่น Largest Contentful Paint (LCP) จะปล่อยโดยเบราว์เซอร์เท่านั้น โดยอิงตามการไปยังหน้าเว็บ และจะถือว่าเสร็จสมบูรณ์เมื่อมีการโต้ตอบ

API ช่วยให้วัด Core Web Vitals สําหรับ SPA ได้อย่างไร

Soft Navigation API จะเพิ่มรายการประสิทธิภาพใหม่ 2 รายการ ดังนี้

  • SoftNavigationEntryรายการที่ปล่อยออกมาเมื่อเป็นไปตามข้อกำหนดการนำทางแบบนุ่มทั้งหมด ซึ่งรวมถึง interactionId สำหรับการโต้ตอบที่ทำให้เกิดการนำทางแบบนุ่ม navigationId ที่ไม่ซ้ำกัน และ name ที่ตั้งค่าเป็น URL ใหม่ รวมถึงเวลาในการแสดงผลต่างๆ ที่ใช้ในการวัด First Contentful Paint ของการนำทางแบบนุ่มได้
  • InteractionContentfulPaintรายการที่ช่วยให้วัดการแสดงผลแบบมีเนื้อหาหลายรายการที่มีขนาดเพิ่มขึ้นเรื่อยๆ หลังจากการโต้ตอบเพื่อวัด LCP สำหรับการนำทางแบบนุ่มนวล

คุณดูรายการใหม่เหล่านี้ได้โดยใช้ PerformanceObserver โดยใช้ประเภท soft-navigation และ interaction-contentful-paint ตามลำดับ

นอกจากนี้ API ยังขยายรายการประสิทธิภาพแต่ละรายการของ largest-contentful-paint, interaction-contentful-paint, event-timing และ layout-shift (และอื่นๆ) เพื่อรวมตัวระบุ navigationId ที่แสดงถึงการนำทางสำหรับรายการนั้น เนื่องจาก PerformanceObserver จะไม่สังเกตรายการประสิทธิภาพจนกว่าหน้าเว็บจะไม่มีการใช้งาน จึงอาจมีระยะเวลาหนึ่งระหว่างเหตุการณ์ที่สร้างรายการประสิทธิภาพกับการสังเกตการณ์ของคุณ โดยเฉพาะอย่างยิ่งเมื่อหน้าเว็บมีการใช้งานสูงมาก เช่น ในระหว่างการนำทางแบบนุ่มนวล navigationId ค่านี้ช่วยระบุรายการแอตทริบิวต์ไปยังการนำทางที่ถูกต้อง

รายการ interaction-contentful-paint บางรายการอาจเกิดขึ้นก่อนการนำทาง และบางรายการอาจเกิดขึ้นหลังการนำทาง แทนที่จะต้องติดตามการแสดงผลทั้งหมดที่อาจส่งผลให้เกิดการนำทางแบบนุ่ม รายการ soft-navigation จะมีรายการ largestInteractionContentfulPaint ซึ่งเป็นการแสดงผลที่ใหญ่ที่สุดที่เห็นจนถึงขณะนี้

ซึ่งจะช่วยให้วัด Core Web Vitals สำหรับสิ่งต่อไปนี้ได้

  • LCP: ใช้ largest-contentful-paint สำหรับการโหลดหน้าเว็บครั้งแรก และรายการ interaction-contentful-paint และ soft-navigation ใหม่สำหรับการนำทางแบบนุ่มนวล
  • CLS: ใช้รายการ layout-shift และแบ่งตามรายการ soft-navigation สำหรับการนำทางแบบนุ่มนวล
  • INP: ใช้รายการ event และแบ่งตามรายการ soft-navigation สำหรับการนำทางแบบนุ่มนวล
  • FCP: ใช้ first-contentful-paint สำหรับการโหลดหน้าเว็บครั้งแรกและรายละเอียดเวลาในการแสดงผลในรายการ soft-navigation ใหม่สำหรับการนำทางแบบนุ่มนวล

ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบเกี่ยวกับการนำทางแบบนุ่มนวล

การนำทางแบบนุ่มจะทริกเกอร์ได้อย่างไร

Soft Navigation API จะทริกเกอร์การนำทางแบบนุ่มเมื่อเกิดเหตุการณ์ต่อไปนี้

  • เกิดการโต้ตอบของผู้ใช้
  • … ซึ่งส่งผลให้ผู้ใช้เห็นการแสดงเนื้อหา
  • และมีการอัปเดต URL

API ใช้แนวทางนี้แทนที่จะปล่อยให้เฟรมเวิร์ก JavaScript "ปล่อย" การนำทางแบบนุ่มนวล หรือสร้างขึ้นบน Navigation API ด้วย 2 เหตุผลต่อไปนี้

  1. ประการแรก การดำเนินการนี้รวมถึงเว็บไซต์ SPA ที่มีอยู่ทั้งหมดโดยไม่ต้องทำการเปลี่ยนแปลงใดๆ ในเว็บไซต์เหล่านั้น
  2. ประการที่ 2 ฟีเจอร์นี้ช่วยให้เข้าใจได้อย่างสอดคล้องกันว่าการนำทางแบบเบาคืออะไร ไม่ว่าเฟรมเวิร์กหรือนักพัฒนาแอปจะจัดการการนำทางอย่างไรก็ตาม

เฟรมเวิร์กหรือนักพัฒนาซอฟต์แวร์สามารถอัปเดต URL สำหรับการนำทางแบบนุ่มได้แม้ว่าจะไม่มีการโต้ตอบของผู้ใช้หรือการอัปเดต DOM ที่ผู้ใช้จะถือว่าเป็นการนำทาง นอกจากนี้ ยังอัปเดต URL ได้ในเวลาต่างๆ เช่น เมื่อเริ่มการโต้ตอบ เมื่อสิ้นสุดการโต้ตอบ หรือในสถานะใดก็ได้ระหว่างนั้น

การสร้างการตรวจหาการนำทางแบบนุ่มนวลในเบราว์เซอร์จะสร้างคำจำกัดความที่ชัดเจนซึ่งช่วยให้วัด Core Web Vitals สำหรับการนำทางแบบนุ่มนวลได้ในวงกว้าง และทำให้การวัดผลเหล่านี้เปรียบเทียบกันได้ในวงกว้าง แทนที่จะอาศัยเฟรมเวิร์กและตัวเลือกของนักพัฒนาซอฟต์แวร์

นอกจากนี้ เฟรมเวิร์กและนักพัฒนาแอปยังสามารถไม่สนใจ Soft Navigations API และใช้ Event Timing, Layout Instability API และInteractionContentfulPaintรายการประสิทธิภาพใหม่เพื่อวัดเมตริกประสิทธิภาพเพิ่มเติมได้ตามต้องการ อย่างไรก็ตาม เราขอแนะนําให้ใช้ API ในการวัด Core Web Vitals เพื่อให้การวัดผลสอดคล้องกันในเว็บไซต์และเครื่องมือต่างๆ

ต้องการความช่วยเหลือในการทดสอบ Soft Navigation API

เราต้องการความช่วยเหลือจากคุณในการทดสอบ Soft Navigations API และพิจารณาว่า API ตรงกับความคาดหวังของคุณเมื่อเกิดการนำทางแบบนุ่มนวลหรือไม่ API รายงานการนำทางแบบนุ่มล้มเหลวเมื่อคุณพิจารณาว่าการนำทางแบบนุ่มเกิดขึ้นหรือไม่ ในทางกลับกัน API รายงานการนําทางที่คุณไม่ถือว่าเป็นการนําทางมากเกินไปหรือไม่

มีการเปลี่ยนแปลงอะไรบ้างตั้งแต่ช่วงทดลองใช้จากต้นทางครั้งล่าสุด

การเปลี่ยนแปลงหลักในเวอร์ชันล่าสุดนี้คือการแยก InteractionContentfulPaint ออกจากการนำทางแบบนุ่มเพื่อให้ใช้กรณีการใช้งานอื่นๆ สำหรับรายการประสิทธิภาพนั้นได้ และแอตทริบิวต์ largestInteractionContentfulPaint เพิ่มเติมไปยัง SoftNavigationEntry

ในมุมมองของเว็บไซต์ ตอนนี้ API ยังรวม replaceState เป็นการไปยังแบบนุ่มด้วย เนื่องจากเรารับฟังความคิดเห็นของคุณว่าการพิจารณาการไปยังส่วนต่างๆ ในหลายๆ กรณีเป็นสิ่งสำคัญ เรายินดีรับฟังกรณีอื่นๆ ที่ API ไม่รู้จักการนำทางแบบนุ่ม

นอกจากนี้ เรายังได้ปรับปรุงการติดตั้งใช้งานอื่นๆ อีกมากมาย สำหรับผู้ที่ต้องการทราบว่ามีการเปลี่ยนแปลงใดบ้างในเวอร์ชันล่าสุด คุณสามารถดูประวัติการเปลี่ยนแปลงทั้งหมดโดยละเอียดได้ในบันทึกการเปลี่ยนแปลงของการนำทางแบบนุ่มนวล

เราต้องการให้ API มีประโยชน์มากที่สุดเท่าที่จะเป็นไปได้ และพร้อมที่จะทำการเปลี่ยนแปลงเพิ่มเติมเพื่อให้เป็นเช่นนั้น การเปลี่ยนแปลงจะนำไปใช้กับ API ได้ง่ายกว่ามากก่อนที่จะเปิดตัวและเว็บไซต์เริ่มขึ้นอยู่กับการติดตั้งใช้งาน ดังนั้น เราจึงขอให้นักพัฒนา SPA และผู้ที่สนใจวัดประสิทธิภาพเว็บสำหรับเว็บไซต์เหล่านี้ทดสอบ API นี้และแสดงความคิดเห็นเกี่ยวกับ API

วิธีทดสอบ

คุณทดสอบ API ได้ในเครื่องด้วยฟีเจอร์หรือตัวเลือกบรรทัดคำสั่งของ Chrome นอกจากนี้ คุณยังทดสอบในฟิลด์ด้วยช่วงทดลองใช้จากต้นทางได้ด้วย (ดูข้อมูลเพิ่มเติมเกี่ยวกับช่วงทดลองใช้จากต้นทาง)

ดูรายละเอียดทางเทคนิคเพิ่มเติมเกี่ยวกับ API โดยเฉพาะวิธีวัด Core Web Vitals ได้ที่เอกสารประกอบหรือที่เก็บ GitHub

นอกจากนี้ ไลบรารี web-vitals เวอร์ชันการนำทางแบบนุ่มแบบทดลองยังพร้อมให้บริการใน GitHub และ npm ด้วย

หากต้องการทดสอบแบบง่ายๆ แผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะแสดงการนำทางแบบนุ่มในการติดตามประสิทธิภาพตั้งแต่ Chrome 145 เป็นต้นไป แม้ว่าจะไม่ได้เปิดใช้ฟีเจอร์นี้ก็ตาม

เครื่องหมายการนำทางแบบซอฟต์ในแผงประสิทธิภาพพร้อมการติดตามจาก youtube.com

ความคิดเห็น

ความคิดเห็นเกี่ยวกับ API ควรได้รับการแจ้งเป็นปัญหาใน GitHub และรายงานข้อบกพร่องในการติดตั้งใช้งาน Chromium ในเครื่องมือติดตามปัญหาของ Chrome หากไม่แน่ใจว่าความคิดเห็นอยู่ในหมวดหมู่ใด ก็ไม่ต้องกังวลมากนัก เรายินดีรับความคิดเห็นจากทั้ง 2 ที่ และจะจัดเรียงปัญหาในทั้ง 2 ที่แล้วเปลี่ยนเส้นทางไปยังตำแหน่งที่ถูกต้อง