Published: January 23, 2026
Chrome จะเปิดตัวช่วงทดลองใช้จากต้นทางใหม่ตั้งแต่ Chrome 144 สำหรับการprerender until scriptเพิ่มลงในSpeculation Rules API ช่วงทดลองใช้จากต้นทางนี้ช่วยให้เว็บไซต์ได้ลองใช้ฟีเจอร์ใหม่กับผู้ใช้จริง โดยมีเป้าหมายเพื่อทดสอบฟีเจอร์นี้ในภาคสนามและส่งความคิดเห็นไปยังทีม Chrome เพื่อช่วยปรับแต่งฟีเจอร์และตัดสินใจว่าเราควรเพิ่มฟีเจอร์นี้ลงในแพลตฟอร์มเว็บหรือไม่
ฟีเจอร์นี้มีเป้าหมายเพื่อแก้ปัญหาใด
Speculation Rules API ช่วยให้เริ่มโหลดหน้าเว็บได้ล่วงหน้าก่อนที่ผู้ใช้จะไปยังหน้าเว็บนั้นจริงๆ ซึ่งจะช่วยปรับปรุงการโหลดหน้าเว็บในอนาคตด้วยการทำงานบางส่วนหรือทั้งหมดล่วงหน้า จนถึงตอนนี้ API นี้อนุญาตการคาดการณ์ 2 ประเภท ได้แก่ การดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้า
การดึงข้อมูลล่วงหน้าจะดึงข้อมูลเอกสาร HTML เท่านั้น ซึ่งจะดึงข้อมูลทรัพยากรแรกที่สำคัญล่วงหน้า จากนั้นจะช่วยเพิ่มประสิทธิภาพเมื่อมีการไปยัง URL โดยจะไม่โหลดทรัพยากรย่อย (เช่น CSS, JavaScript หรือรูปภาพ) และไม่เรียกใช้ JavaScript ดังนั้นเบราว์เซอร์อาจยังต้องทำงานอีกมากเมื่อโหลดหน้าเว็บ
การแสดงผลล่วงหน้าทำได้มากกว่านั้นมาก โดยจะดึงข้อมูลทรัพยากรย่อยและเริ่มแสดงผลหน้าเว็บ รวมถึงเรียกใช้ JavaScript เกือบจะเหมือนกับว่ามีการเปิดหน้าเว็บในแท็บพื้นหลังที่ซ่อนอยู่ เมื่อผู้ใช้คลิกลิงก์ ผู้ใช้จะไปยังหน้าเว็บได้ทันทีหากเบราว์เซอร์ทำงานทั้งหมดที่จำเป็นในการแสดงผลหน้าเว็บเสร็จแล้ว
การใช้ตัวเลือกการแสดงผลล่วงหน้าอาจมีประสิทธิภาพดีกว่ามาก แต่ต้องเสียค่าใช้จ่ายในการติดตั้งใช้งานเพิ่มเติม รวมถึงค่าใช้จ่ายทรัพยากรเพิ่มเติม หากไม่พิจารณาอย่างรอบคอบ การดำเนินการนี้อาจทำให้เกิดผลข้างเคียงที่ไม่คาดคิดเมื่อแสดงผลหน้าเว็บล่วงหน้าทั้งหมดก่อนที่ผู้ใช้จะไปยังหน้าเว็บนั้นจริงๆ ตัวอย่างเช่น ระบบวิเคราะห์ อาจเริ่มแสดงผลข้อมูลวิเคราะห์ก่อนที่ผู้ใช้จะไปยังหน้าเว็บ ซึ่งจะทำให้สถิติไม่ถูกต้อง หากผู้ให้บริการข้อมูลวิเคราะห์ไม่ได้พิจารณาการคาดการณ์
เว็บไซต์ที่ใช้การแสดงผลล่วงหน้าต้องระมัดระวังไม่แสดงหน้าเว็บที่ล้าสมัยให้ผู้ใช้ ตัวอย่างเช่น หากคุณคาดการณ์หน้าเว็บในเว็บไซต์อีคอมเมิร์ซ จากนั้นเพิ่มสินค้าลงในตะกร้า แล้วโหลดหน้าเว็บที่คาดการณ์ไว้ก่อนหน้านี้ คุณอาจเห็นจำนวนสินค้าในตะกร้าเก่าหากเว็บไซต์ไม่ได้ระมัดระวังเป็นพิเศษเพื่อให้แน่ใจว่าข้อมูลนี้ได้รับการอัปเดต
ความซับซ้อนเหล่านี้ยังเกิดขึ้นกับการดึงข้อมูลล่วงหน้าด้วยหากการจัดการสถานะบางอย่างเกิดขึ้นที่ฝั่งเซิร์ฟเวอร์ แต่โดยทั่วไปแล้วจะเป็นปัญหาที่ใหญ่กว่าสำหรับการแสดงผลล่วงหน้า การใช้การแสดงผลล่วงหน้าในเว็บไซต์ที่ซับซ้อนมากขึ้นอาจซับซ้อนกว่า
อย่างไรก็ตาม เราได้รับข้อมูลจากนักพัฒนาเว็บว่าพวกเขาเห็นผลลัพธ์ด้านประสิทธิภาพจากการดึงข้อมูลล่วงหน้าของหน้าเว็บแล้ว และต้องการใช้กฎการคาดการณ์ต่อไปเพื่อให้ได้รับประโยชน์มากยิ่งขึ้น ซึ่งเป็นที่มาของ prerender until script
prerender until script คืออะไร
prerender until script เป็นฟีเจอร์ใหม่ที่อยู่กึ่งกลางระหว่างการดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้า โดยจะดึงข้อมูลเอกสาร HTML ล่วงหน้า (เช่นเดียวกับการดึงข้อมูลล่วงหน้า) จากนั้นจะเริ่มแสดงผลหน้าเว็บ รวมถึงดึงข้อมูลทรัพยากรย่อยทั้งหมด (เช่นเดียวกับการแสดงผลล่วงหน้า) อย่างไรก็ตาม สิ่งสำคัญคือเบราว์เซอร์จะหลีกเลี่ยงการเรียกใช้องค์ประกอบ <script> (ทั้งสคริปต์ในบรรทัดและสคริปต์ src) เมื่อพบแท็ก <script> ที่บล็อก เบราว์เซอร์จะหยุดการทำงานของตัวแยกวิเคราะห์ชั่วคราวและรอจนกว่าผู้ใช้จะไปยังหน้าเว็บก่อนที่จะดำเนินการต่อ ในระหว่างนี้ เครื่องสแกนการโหลดล่วงหน้า จะทำงานต่อไปและดึงข้อมูลทรัพยากรย่อยที่หน้าเว็บต้องการเพื่อให้พร้อมใช้งานเมื่อหน้าเว็บโหลดต่อได้
การระงับองค์ประกอบ <script> ที่บล็อกไว้จะช่วยหลีกเลี่ยงความซับซ้อนในการติดตั้งใช้งานได้มาก ในขณะเดียวกัน การเริ่มกระบวนการแสดงผลและการดึงข้อมูลทรัพยากรย่อยจะช่วยเพิ่มประสิทธิภาพได้มากเมื่อเทียบกับการดึงข้อมูลล่วงหน้า ซึ่งอาจเกือบเท่ากับการแสดงผลล่วงหน้าแบบเต็ม
ในกรณีที่ดีที่สุด (เมื่อไม่มีสคริปต์ในหน้าเว็บเลย) ตัวเลือกนี้จะแสดงผลหน้าเว็บทั้งหมดล่วงหน้า หรือเมื่อหน้าเว็บมีเฉพาะองค์ประกอบสคริปต์ในส่วนท้าย หรือมีเฉพาะสคริปต์ที่มีแอตทริบิวต์ async หรือ defer ระบบจะแสดงผลหน้าเว็บล่วงหน้าทั้งหมดโดยไม่มี JavaScript นั้น แม้ในกรณีที่แย่ที่สุด (เมื่อมีสคริปต์ที่บล็อกใน <head>) การเริ่มแสดงผลหน้าเว็บและโดยเฉพาะอย่างยิ่งการดึงข้อมูลทรัพยากรย่อยล่วงหน้าจะช่วยให้การโหลดหน้าเว็บดีขึ้นมาก
วิธีใช้ prerender until script
ขั้นแรก ให้เปิดใช้ฟีเจอร์ จากนั้นprerender until script จะถูกใช้ในลักษณะเดียวกับตัวเลือกอื่นๆ ของ Speculation Rules API โดยใช้คีย์prerender_until_script ใหม่ (โปรดสังเกตขีดล่างเพื่อให้เป็นชื่อคีย์ JSON ที่ถูกต้อง)
โดยสามารถใช้กับกฎรายการของ URL แบบคงที่ได้ดังนี้
<script type="speculationrules">
{
"prerender_until_script": [{
"urls": ["next.html", "next2.html"]
}]
}
</script>
นอกจากนี้ยังใช้กับกฎเอกสารได้ด้วยในกรณีที่ URL ที่จะคาดการณ์มีให้ใช้งานเป็นลิงก์ในหน้าเว็บ
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}]
}
</script>
prerender until script จากนั้นจะใช้กับตัวเลือก Speculation Rules API ตามปกติได้ ซึ่งรวมถึง ค่าความกระตือรือร้นต่างๆ
เนื่องจาก JavaScript จะไม่ทำงาน จึงอ่าน document.prerendering ไม่ได้ และอ่านเหตุการณ์ prerenderingchange ไม่ได้ด้วย อย่างไรก็ตาม เวลา activationStart จะไม่เป็น 0
ตัวอย่างต่อไปนี้แสดงวิธีใช้ตัวอย่างก่อนหน้าโดยกลับไปใช้การดึงข้อมูลล่วงหน้าสำหรับเบราว์เซอร์ที่ไม่รองรับ prerender_until_script
<script type="speculationrules">
{
"prerender_until_script": [{
"where": { "href_matches": "/*" }
}],
"prefetch": [{
"where": { "href_matches": "/*" }
}]
}
</script>
Chrome จะจัดการการทำซ้ำนี้โดยไม่มีปัญหาและเรียกใช้กฎที่เหมาะสมที่สุดสำหรับการตั้งค่าความกระตือรือร้นแต่ละรายการ
หรือคุณจะใช้ตัวเลือกเหล่านี้กับระดับความกระตือรือร้นที่ต่างกัน เพื่อดึงข้อมูลล่วงหน้าอย่างกระตือรือร้น จากนั้นอัปเกรดเป็น prerender until script โดยใช้สัญญาณเพิ่มเติม ตามที่แนะนำไว้ก่อนหน้านี้สำหรับการดึงข้อมูลล่วงหน้า/การแสดงผลล่วงหน้า
<script type="speculationrules">
{
"prefetch": [{
"where": { "href_matches": "/*" },
"eagerness": "eager"
}],
"prerender_until_script": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
โปรดทราบว่าคุณไม่สามารถอัปเกรด prerender until script เป็นการแสดงผลล่วงหน้าแบบเต็มด้วยวิธีนี้ แต่โปรดแจ้งให้เราทราบหากคุณสนใจให้ Chrome รองรับรูปแบบนี้โดย ติดดาวข้อบกพร่องนี้
ระบบจะหยุด JavaScript ทั้งหมดชั่วคราวหรือไม่
ไม่ ระบบจะหยุดตัวแยกวิเคราะห์ชั่วคราวเฉพาะองค์ประกอบ <script> เท่านั้น ซึ่งหมายความว่าตัวแฮนเดิลสคริปต์ในบรรทัด (เช่น onload) หรือ URL javascript: จะไม่ทำให้เกิดการหยุดชั่วคราวและอาจทำงาน
ตัวอย่างเช่น โค้ดต่อไปนี้จะบันทึก Hero image is now loaded ลงในคอนโซลก่อนที่จะมีการไปยังหน้าเว็บ
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
ในขณะที่หากเพิ่ม Listener เหตุการณ์ด้วย <script> ระบบจะไม่บันทึก Hero image is now loaded ลงในคอนโซลจนกว่าจะมีการเปิดใช้งานหน้าเว็บ
<img src="hero.jpg" id="hero-image" alt="Example Photo">
<script>
const heroImage = document.querySelector('#hero-image');
if (heroImage.complete) {
console.log('Hero image is now loaded');
} else {
heroImage.addEventListener('load',
(event) => {
console.log('Hero image is now loaded');
}
);
}
</script>
การดำเนินการนี้อาจดูขัดกับความรู้สึก แต่ในหลายๆ กรณี (เช่น ในตัวอย่างก่อนหน้า) การดำเนินการทันทีน่าจะดีกว่า และการหน่วงเวลาอาจทำให้เกิดความซับซ้อนที่ไม่คาดคิดมากขึ้น
นอกจากนี้ เหตุการณ์ในบรรทัดส่วนใหญ่ต้องมีการดำเนินการของผู้ใช้ (เช่น onclick, onhover) จึงจะไม่ทำงานจนกว่าผู้ใช้จะโต้ตอบกับหน้าเว็บได้
สุดท้าย สคริปต์ที่บล็อกก่อนหน้านี้จะหยุดโปรแกรมแยกวิเคราะห์ชั่วคราวและป้องกันไม่ให้ค้นพบตัวแฮนเดิลเหตุการณ์ในบรรทัด ดังนั้นโค้ดต่อไปนี้จะไม่โหลดข้อความลงในคอนโซลจนกว่าจะมีการเปิดใช้งาน แม้ว่าจะเป็นตัวแฮนเดิลเหตุการณ์ในบรรทัดก็ตาม
<script>...</script>
<img src="hero.jpg"
onload="console.log('Hero image is now loaded!')"
alt="Example Photo">
การดำเนินการนี้มีความเกี่ยวข้องอย่างยิ่งกับตัวแฮนเดิลสคริปต์ในบรรทัดที่ใช้โค้ดที่กำหนดไว้ก่อนหน้านี้ ซึ่งจะยังคงทำงานได้ตามที่คาดไว้
<script>
imageLoadFunction() = {
...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">
แล้วสคริปต์ที่มีแอตทริบิวต์ async และ defer ล่ะ
สคริปต์ที่มีแอตทริบิวต์ async และ defer จะถูกหน่วงเวลาไว้จนกว่าจะมีการเปิดใช้งาน แต่จะไม่บล็อกโปรแกรมแยกวิเคราะห์ไม่ให้ประมวลผลส่วนอื่นๆ ของหน้าเว็บต่อไป ระบบจะดาวน์โหลดสคริปต์แต่จะไม่เรียกใช้จนกว่าจะมีการไปยังหน้าเว็บ
วิธีเปิดใช้ prerender until script?
prerender until script เป็นตัวเลือกใหม่ที่เรากำลังพัฒนาอยู่และอาจมีการเปลี่ยนแปลง ดังนั้นจึงยังไม่พร้อมให้ใช้งานหากไม่เปิดใช้เพื่อเลือกใช้ก่อน
นักพัฒนาเว็บสามารถเปิดใช้ตัวเลือกนี้ในเครื่องได้โดยใช้ Chrome Flag chrome://flags/#prerender-until-script หรือใช้ Flag บรรทัดคำสั่ง --enable-features=PrerenderUntilScript
prerender until script พร้อมใช้งานแล้วเช่นกัน เป็นช่วงทดลองใช้จากต้นทางตั้งแต่ Chrome 144 ช่วงทดลองใช้จากต้นทางช่วยให้เจ้าของเว็บไซต์เปิดใช้ฟีเจอร์ในเว็บไซต์ของตนเพื่อให้ผู้ใช้จริงได้ใช้ฟีเจอร์นี้โดยไม่ต้องเปิดใช้ด้วยตนเอง ซึ่งช่วยให้วัดผลกระทบของฟีเจอร์ต่อผู้ใช้จริงเพื่อให้แน่ใจว่าฟีเจอร์ทำงานได้ตามที่คาดไว้
ลองใช้และแชร์ความคิดเห็น
เรารู้สึกตื่นเต้นมากกับการเพิ่มฟีเจอร์นี้ลงใน Speculation Rules API และขอแนะนำให้เจ้าของเว็บไซต์ลองใช้
แชร์ความคิดเห็นเกี่ยวกับข้อเสนอในที่เก็บ GitHub หากต้องการแสดงความคิดเห็นเกี่ยวกับการติดตั้งใช้งานของ Chrome โปรดแจ้งข้อบกพร่องของ Chromium