คุณสามารถใช้กฎการคาดเดาเพื่อดึงข้อมูลล่วงหน้าและแสดงผลการนำทางหน้าถัดไปล่วงหน้าตามรายละเอียดในโพสต์ก่อนหน้า วิธีนี้ช่วยให้โหลดหน้าเว็บได้เร็วขึ้นมากหรือแม้กระทั่งโหลดทันที ซึ่งช่วยปรับปรุง Core Web Vitals สำหรับการไปยังส่วนต่างๆ ของหน้าเว็บเพิ่มเติมเหล่านี้ได้อย่างมาก
การแก้ไขข้อบกพร่องของกฎการคาดเดาอาจเป็นเรื่องยาก โดยเฉพาะอย่างยิ่งสำหรับหน้าที่แสดงผลล่วงหน้า เนื่องจากหน้าเหล่านี้จะแสดงในตัวแสดงผลแยกต่างหาก คล้ายกับแท็บพื้นหลังที่ซ่อนอยู่ซึ่งแทนที่แท็บปัจจุบันเมื่อเปิดใช้งาน ดังนั้นจึงไม่สามารถใช้ตัวเลือกเครื่องมือสำหรับนักพัฒนาเว็บตามปกติเพื่อแก้ไขข้อบกพร่องได้เสมอไป
ทีม Chrome ทำงานอย่างหนักเพื่อปรับปรุงการรองรับเครื่องมือสำหรับนักพัฒนาเว็บสำหรับการแก้ไขข้อบกพร่องของกฎการคาดเดา ในโพสต์นี้ คุณจะเห็นวิธีต่างๆ ในการใช้เครื่องมือเหล่านี้เพื่อทำความเข้าใจกฎการคาดเดาของหน้าเว็บ สาเหตุที่อาจทำให้เครื่องมือใช้งานไม่ได้ และเมื่อใดที่นักพัฒนาซอฟต์แวร์สามารถใช้ตัวเลือกเครื่องมือสำหรับนักพัฒนาเว็บที่คุ้นเคยและไม่ใช้แล้ว
คำอธิบายของ "pre-" ข้อกำหนด
มี "ช่วงก่อน" มากมาย คำที่ทำให้เกิดความสับสน ดังนั้นเราจะเริ่มต้นด้วยคำอธิบายเกี่ยวกับสิ่งต่อไปนี้
- ดึงข้อมูลล่วงหน้า: ดึงข้อมูลทรัพยากรหรือเอกสารล่วงหน้าเพื่อปรับปรุงประสิทธิภาพในอนาคต โพสต์นี้ครอบคลุมถึงการดึงข้อมูลเอกสารล่วงหน้าโดยใช้ Speculation Rules API แทนที่จะเป็นตัวเลือก
<link rel="prefetch">ที่คล้ายกัน แต่เวอร์ชันเก่านี้มักใช้สำหรับการดึงข้อมูลทรัพยากรย่อยล่วงหน้า - การแสดงผลล่วงหน้า: การทำงานนี้ล้ำหน้ากว่าการดึงข้อมูลล่วงหน้าและจะแสดงผลหน้าเว็บทั้งหน้าราวกับว่าผู้ใช้ไปที่หน้านั้นแล้ว แต่ยังคงอยู่ในโหมดแสดงผลพื้นหลังที่ซ่อนอยู่และพร้อมใช้งานเมื่อผู้ใช้ไปยังหน้าดังกล่าวจริงๆ ขอย้ำอีกครั้งว่าเอกสารนี้เกี่ยวข้องกับเวอร์ชัน Speculation Rules API เวอร์ชันใหม่กว่าตัวเลือก
<link rel="prerender">เวอร์ชันเก่า (ซึ่งไม่แสดงผลล่วงหน้าแบบเต็มอีกต่อไป) - การคาดเดาการนำทาง: คำเรียกโดยรวมสำหรับตัวเลือกการดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้าใหม่ซึ่งทริกเกอร์โดยกฎการคาดเดา
- โหลดล่วงหน้า: คำที่มากเกินไปซึ่งอาจหมายถึงเทคโนโลยีและกระบวนการมากมาย ซึ่งรวมถึง
<link rel="preload">, การโหลดเครื่องมือสแกนล่วงหน้า และการโหลดล่วงหน้าสำหรับการนำทางของโปรแกรมทำงานของบริการ จะไม่มีการกล่าวถึงรายการเหล่านี้ในที่นี้ แต่รวมคำนี้เพื่อแยกความแตกต่างจาก "การคาดเดาเกี่ยวกับการนำทาง" อย่างชัดเจน ระยะเวลา
กฎการคาดเดาสำหรับ prefetch
คุณใช้กฎการคาดเดาเพื่อดึงข้อมูลเอกสารของการนำทางถัดไปล่วงหน้าได้ เช่น เมื่อแทรก JSON ต่อไปนี้ในหน้า ระบบจะดึงข้อมูล next.html และ next2.html ล่วงหน้า
<script type="speculationrules">
{
"prefetch": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
การใช้กฎการคาดเดาสำหรับการดึงข้อมูลล่วงหน้าสำหรับการนำทางมีข้อได้เปรียบเหนือไวยากรณ์ <link rel="prefetch"> แบบเก่า เช่น API ที่ชัดเจนกว่าและผลลัพธ์ที่เก็บไว้ในแคชหน่วยความจำมากกว่าในดิสก์แคช HTTP
แก้ไขข้อบกพร่องของกฎการคาดเดา prefetch
คุณดูการดึงข้อมูลล่วงหน้าที่เกิดจากกฎการคาดเดาได้ในแผงเครือข่ายในลักษณะเดียวกับการดึงข้อมูลอื่นๆ
คำขอ 2 รายการที่ไฮไลต์ด้วยสีแดงคือทรัพยากรที่ดึงข้อมูลล่วงหน้าซึ่งแสดงในคอลัมน์ประเภท ระบบจะดึงข้อมูลเหล่านี้ที่ลำดับความสำคัญ Lowest เช่นเดียวกับสำหรับการไปยังส่วนต่างๆ ในอนาคต และ Chrome จะให้ความสำคัญกับทรัพยากรในหน้าปัจจุบัน
การคลิกที่แถวใดแถวหนึ่งจะแสดงส่วนหัว HTTP ของ Sec-Purpose: prefetch ด้วย ซึ่งเป็นวิธีที่จะระบุคำขอเหล่านี้ในฝั่งเซิร์ฟเวอร์
แก้ไขข้อบกพร่อง prefetch ด้วยแท็บการโหลดแบบคาดเดา
มีการเพิ่มส่วนการโหลดแบบคาดเดาใหม่ในแผงแอปพลิเคชันของ Chrome DevTools ในส่วนบริการในเบื้องหลัง เพื่อช่วยแก้ไขข้อบกพร่องของกฎการคาดเดา ดังนี้
ในส่วนนี้มีแท็บอยู่ 3 แท็บ ได้แก่
- การโหลดแบบคาดเดาซึ่งแสดงสถานะการแสดงผลล่วงหน้าของหน้าปัจจุบัน
- กฎ ซึ่งจะแสดงรายการชุดกฎทั้งหมดที่พบในหน้าปัจจุบัน
- การคาดเดาซึ่งจะแสดงรายการ URL ที่ดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้าทั้งหมดจากชุดกฎ
แท็บการคาดเดาแสดงในภาพหน้าจอก่อนหน้า และหน้าตัวอย่างนี้มีกฎการคาดเดาชุดเดียวสำหรับการดึงข้อมูลล่วงหน้า 3 หน้า การดึงข้อมูลล่วงหน้า 2 รายการสำเร็จและไม่สำเร็จ 1 รายการ คุณสามารถคลิกไอคอนนอกเหนือจากชุดกฎเพื่อไปยังแหล่งที่มาของชุดกฎในแผงองค์ประกอบ หรือจะคลิกลิงก์สถานะเพื่อไปยังแท็บการคาดเดาที่กรองไปยังชุดกฎนั้นก็ได้
แท็บการคาดเดาจะแสดง URL เป้าหมายทั้งหมด รวมถึงการดำเนินการ (ดึงข้อมูลล่วงหน้าหรือแสดงผลล่วงหน้า) ชุดกฎที่ตั้งค่า URL ดังกล่าว (เนื่องจากอาจมีหลายรายการในหน้าเว็บ) และสถานะของการคาดเดาแต่ละรายการ ดังนี้
เหนือ URL เมนูแบบเลื่อนลงสามารถใช้เพื่อแสดง URL จากชุดกฎทั้งหมด หรือเฉพาะ URL จากชุดกฎชุดใดชุดหนึ่ง ที่ด้านล่างของรายการ URL ทั้งหมดจะแสดงอยู่ การคลิกที่ URL หนึ่งๆ จะแสดงข้อมูลโดยละเอียดเพิ่มเติม
ในภาพหน้าจอนี้ เราจะดูสาเหตุของความล้มเหลวของหน้า next3.html (ซึ่งไม่มีอยู่และแสดงผล 404 ซึ่งเป็นรหัสสถานะ HTTP ที่ไม่ใช่ 2xx)
แท็บสรุปการโหลดแบบคาดเดาจะแสดงรายงานสถานะการโหลดแบบคาดเดาสำหรับหน้านี้เพื่อแสดงให้เห็นว่ามีการใช้การดึงข้อมูลล่วงหน้าหรือการแสดงผลล่วงหน้าสำหรับหน้านี้หรือไม่
สำหรับหน้าที่ดึงข้อมูลล่วงหน้า คุณควรเห็นข้อความที่สำเร็จเมื่อไปยังหน้าต่อไปนี้
การคาดเดาที่ไม่มีใครเทียบได้
เมื่อการนำทางเกิดขึ้นจากหน้าเว็บที่มีกฎการคาดเดาที่ไม่ส่งผลให้มีการใช้การดึงข้อมูลล่วงหน้าหรือการแสดงผลล่วงหน้า ส่วนเพิ่มเติมของแท็บจะแสดงรายละเอียดเพิ่มเติมเกี่ยวกับสาเหตุที่ URL ไม่ตรงกับ URL ที่คาดเดาใดๆ วิธีนี้เป็นประโยชน์สำหรับการระบุคำที่พิมพ์ผิดในกฎการคาดเดาของคุณ
ตัวอย่างเช่น ที่นี่เราไปที่ next4.html แต่มีเพียง next.html, next2.html หรือ next3.html เท่านั้นที่เป็นการดึงข้อมูลล่วงหน้า เราจึงเห็นว่าวิธีนี้ไม่ตรงกับกฎใดๆ ใน 3 กฎนั้นเลย
แท็บการโหลดแบบคาดเดามีประโยชน์มากสำหรับการแก้ไขข้อบกพร่องของกฎการคาดเดาเอง และค้นหาข้อผิดพลาดทางไวยากรณ์ใน JSON
สําหรับการดึงข้อมูลล่วงหน้าเอง แผงเครือข่ายน่าจะเป็นที่ที่คุ้นเคยมากกว่า สำหรับตัวอย่างความล้มเหลวของการดึงข้อมูลล่วงหน้า โปรดดู 404 สำหรับการดึงข้อมูลล่วงหน้าที่นี่
อย่างไรก็ตาม แท็บการโหลดแบบคาดเดาจะมีประโยชน์ยิ่งขึ้นสำหรับกฎการคาดเดาที่แสดงผลล่วงหน้า ซึ่งจะกล่าวถึงต่อไป
กฎการคาดเดาสำหรับ prerender
กฎการคาดเดาการแสดงผลล่วงหน้าจะใช้ไวยากรณ์เดียวกันกับกฎการคาดเดาการดึงข้อมูลล่วงหน้า เช่น
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
ชุดกฎนี้จะทริกเกอร์การโหลดและการแสดงผลทั้งหมดของหน้าเว็บที่ระบุ (ขึ้นอยู่กับข้อจำกัดบางประการ) ฟีเจอร์นี้ช่วยให้ผู้ใช้โหลดได้ทันที แม้จะมีค่าใช้จ่ายด้านทรัพยากรเพิ่มเติม
อย่างไรก็ตาม การดึงข้อมูลเหล่านี้ต่างจากการดึงข้อมูลล่วงหน้าตรงที่แผงเครือข่ายจะดึงข้อมูลเหล่านี้ไม่ได้ เนื่องจากมีการดึงข้อมูลเหล่านี้และแสดงผลในกระบวนการแสดงผลที่แยกต่างหากใน Chrome ซึ่งทำให้แท็บการโหลดแบบคาดเดามีความสำคัญมากขึ้นในการแก้ไขข้อบกพร่องของกฎการคาดเดาที่แสดงผลล่วงหน้า
แก้ไขข้อบกพร่อง prerender ด้วยแท็บการโหลดแบบคาดเดา
คุณสามารถใช้หน้าจอการโหลดแบบคาดเดาเดียวกันกับกฎการคาดเดาการแสดงผลล่วงหน้าซึ่งแสดงให้เห็นกับหน้าสาธิตที่คล้ายกันซึ่งพยายามแสดงผลล่วงหน้า แทนการดึงข้อมูลหน้า 3 หน้าล่วงหน้า
เราจะเห็นอีกครั้งว่า URL 1 ใน 3 รายการแสดงผลล่วงหน้าไม่สำเร็จ และนักพัฒนาซอฟต์แวร์จะดูรายละเอียดของ URL แต่ละรายการได้ในแท็บการคาดเดาโดยคลิกลิงก์พร้อม 2 รายการและไม่สำเร็จ 1 รายการ
ใน Chrome 121 เราได้เปิดตัวการรองรับกฎของเอกสาร วิธีนี้จะช่วยให้เบราว์เซอร์ดึงข้อมูลจากลิงก์ต้นทางเดียวกันในหน้าเว็บได้ แทนที่จะแสดงรายการชุด URL ที่เจาะจง
<script type="speculationrules">
{
"prerender": [
{
"source": "document",
"where": {
"and": [
{"href_matches": "/*"},
{"not": { "href_matches": "/not-safe-to-prerender/*"}}
]
},
"eagerness": "moderate"
}
]
}
</script>
ตัวอย่างนี้เลือกลิงก์ต้นทางเดียวกันทั้งหมด ยกเว้นลิงก์ที่ขึ้นต้นด้วย /not-safe-to-prerender เป็นตัวเลือกที่แสดงผลล่วงหน้า
นอกจากนี้ยังตั้งค่าการแสดงผลล่วงหน้า eagerness เป็น moderate ซึ่งหมายความว่าระบบจะแสดงผลการนำทางล่วงหน้าเมื่อวางลิงก์หรือวางเมาส์เหนือลิงก์
มีกฎที่คล้ายกันเช่นนี้ในเว็บไซต์สาธิตกฎการคาดเดา และการใช้ส่วนการโหลดแบบคาดเดาใหม่ในเว็บไซต์นี้ก็แสดงให้เห็นถึงประโยชน์ของแท็บใหม่นี้เนื่องจาก URL ที่มีสิทธิ์ทั้งหมดที่เบราว์เซอร์พบบนหน้าเว็บแสดงอยู่
สถานะจะไม่ทริกเกอร์เนื่องจากกระบวนการแสดงผลล่วงหน้ายังไม่เริ่มต้น แต่เมื่อวางเมาส์เหนือลิงก์ เราจะเห็นว่าสถานะมีการเปลี่ยนแปลงเมื่อ URL แต่ละรายการแสดงผลล่วงหน้า
Chrome ได้กำหนดขีดจำกัดการแสดงผลล่วงหน้า ซึ่งรวมถึงการแสดงผลล่วงหน้าสูงสุด 2 ครั้งสำหรับ moderate ความตั้งใจ ดังนั้นหลังจากวางเมาส์เหนือลิงก์ที่สาม เราจะเห็นสาเหตุของความล้มเหลวสำหรับ URL ดังกล่าว ดังนี้
แก้ไขข้อบกพร่อง prerender ด้วยแผงเครื่องมือสำหรับนักพัฒนาเว็บอื่นๆ
หน้าที่แสดงผลล่วงหน้าต่างจากการดึงข้อมูลล่วงหน้าตรงที่จะไม่แสดงในกระบวนการแสดงผลปัจจุบันในแผงเครื่องมือสำหรับนักพัฒนาเว็บ เช่น แผงเครือข่าย เพราะจะแสดงผลในตัวแสดงผลเบื้องหลังของตนเอง
อย่างไรก็ตาม ตอนนี้คุณเปลี่ยนโหมดแสดงภาพที่แผงเครื่องมือสำหรับนักพัฒนาเว็บใช้ได้ด้วยเมนูแบบเลื่อนลงในเมนูแบบเลื่อนลงด้านขวาบน หรือโดยเลือก URL ที่ส่วนบนของแผงแล้วเลือกตรวจสอบ ดังนี้
รายการแบบเลื่อนลงนี้ (และค่าที่เลือก) จะแชร์กับแผงอื่นๆ ทั้งหมดด้วย เช่น แผงเครือข่าย ซึ่งคุณจะเห็นว่าหน้าที่ขอคือหน้าที่แสดงผลล่วงหน้า
เมื่อดูที่ส่วนหัว HTTP สำหรับทรัพยากรเหล่านี้ เราพบว่าส่วนหัวทั้งหมดมีการตั้งค่าด้วยส่วนหัว Sec-Purpose: prefetch;prerender
หรือแผงองค์ประกอบซึ่งคุณจะเห็นเนื้อหาของหน้า เช่น ในภาพหน้าจอต่อไปนี้ ซึ่งเราจะเห็นองค์ประกอบ <h1> สำหรับหน้าที่แสดงผลล่วงหน้า
หรือแผงคอนโซล ซึ่งคุณสามารถดูบันทึกคอนโซลที่มาจากหน้าที่แสดงผลล่วงหน้า
แก้ไขข้อบกพร่องกฎการคาดเดาในหน้าที่แสดงผลล่วงหน้า
ส่วนก่อนหน้านี้จะกล่าวถึงวิธีแก้ไขข้อบกพร่องของหน้าที่แสดงผลล่วงหน้าในหน้าเว็บซึ่งเริ่มการแสดงผลล่วงหน้า อย่างไรก็ตาม หน้าที่แสดงผลล่วงหน้าอาจระบุข้อมูลการแก้ไขข้อบกพร่องด้วย ไม่ว่าจะโดยการเรียกใช้ Analytics หรือเข้าสู่ระบบคอนโซล (ซึ่งดูตามที่อธิบายไว้ในส่วนก่อนหน้านี้)
นอกจากนี้ เมื่อผู้ใช้เปิดใช้งานหน้าที่แสดงผลล่วงหน้า แท็บการโหลดแบบคาดเดาจะแสดงสถานะนี้ รวมถึงระบุว่าหน้าเว็บแสดงผลล่วงหน้าสำเร็จหรือไม่ หากแสดงผลล่วงหน้าไม่ได้ ระบบจะระบุคำอธิบายถึงสาเหตุ ดังนี้
นอกจากนี้ในกรณีของการดึงข้อมูลล่วงหน้า การไปยังส่วนต่างๆ จากหน้าเว็บที่มีกฎการคาดเดาที่ไม่ตรงกับหน้าปัจจุบันจะพยายามแสดงสาเหตุที่ URL ไม่ตรงกับที่ระบุไว้ในกฎการคาดเดาของหน้าก่อนหน้าในแท็บการโหลดแบบคาดเดา ดังนี้
บทสรุป
ในโพสต์นี้ เราได้แสดงวิธีต่างๆ ที่นักพัฒนาแอปสามารถใช้แก้ไขข้อบกพร่องของกฎการคาดเดาการแสดงผลล่วงหน้าและการดึงข้อมูลล่วงหน้า ทีมยังคงเดินหน้าจัดทำเครื่องมือสำหรับกฎการคาดเดา และเราอยากทราบคำแนะนำจากนักพัฒนาแอปเกี่ยวกับวิธีอื่นๆ ที่จะเป็นประโยชน์สำหรับการแก้ไขข้อบกพร่องของ API ใหม่ที่น่าตื่นเต้นนี้ เราขอแนะนำให้นักพัฒนาซอฟต์แวร์แจ้งปัญหาในเครื่องมือติดตามปัญหาของ Chrome สำหรับคำขอฟีเจอร์หรือข้อบกพร่องที่ตรวจพบ
กิตติกรรมประกาศ
รูปภาพขนาดย่อโดย Nubelson Fernandes ใน Unsplash