คุณสามารถใช้กฎการคาดเดาเพื่อดึงข้อมูลล่วงหน้าและแสดงผลการนำทางหน้าถัดไปล่วงหน้าตามรายละเอียดในโพสต์ก่อนหน้า วิธีนี้ช่วยให้โหลดหน้าเว็บได้เร็วขึ้นมากหรือแม้กระทั่งโหลดทันที ซึ่งช่วยปรับปรุง 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
คุณดูการดึงข้อมูลล่วงหน้าที่เกิดจากกฎการคาดเดาได้ในแผงเครือข่ายในลักษณะเดียวกับการดึงข้อมูลอื่นๆ
![แผงเครือข่ายในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่แสดงเอกสารที่ดึงข้อมูลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/network-panel-chrome-devtools-prefetch.png?authuser=7&hl=th)
คำขอ 2 รายการที่ไฮไลต์ด้วยสีแดงคือทรัพยากรที่ดึงข้อมูลล่วงหน้าซึ่งแสดงในคอลัมน์ประเภท ระบบจะดึงข้อมูลเหล่านี้ที่ลำดับความสำคัญ Lowest
เช่นเดียวกับสำหรับการไปยังส่วนต่างๆ ในอนาคต และ Chrome จะให้ความสำคัญกับทรัพยากรในหน้าปัจจุบัน
การคลิกที่แถวใดแถวหนึ่งจะแสดงส่วนหัว HTTP ของ Sec-Purpose: prefetch
ด้วย ซึ่งเป็นวิธีที่จะระบุคำขอเหล่านี้ในฝั่งเซิร์ฟเวอร์
![Chrome DevTools ดึงข้อมูลส่วนหัวล่วงหน้าโดยมีการตั้งค่า Sec-Purpose ให้ดึงข้อมูลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/chrome-devtools-prefetch-sec-purpose-header.png?authuser=7&hl=th)
แก้ไขข้อบกพร่อง prefetch
ด้วยแท็บการโหลดแบบคาดเดา
มีการเพิ่มส่วนการโหลดแบบคาดเดาใหม่ในแผงแอปพลิเคชันของ Chrome DevTools ในส่วนบริการในเบื้องหลัง เพื่อช่วยแก้ไขข้อบกพร่องของกฎการคาดเดา ดังนี้
![แท็บโหลดแบบคาดเดาใน Chrome DevTools แสดงกฎการดึงข้อมูลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/speculations-rules-tab-prefetch.png?authuser=7&hl=th)
ในส่วนนี้มีแท็บอยู่ 3 แท็บ ได้แก่
- การโหลดแบบคาดเดาซึ่งแสดงสถานะการแสดงผลล่วงหน้าของหน้าปัจจุบัน
- กฎ ซึ่งจะแสดงรายการชุดกฎทั้งหมดที่พบในหน้าปัจจุบัน
- การคาดเดาซึ่งจะแสดงรายการ URL ที่ดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้าทั้งหมดจากชุดกฎ
แท็บการคาดเดาแสดงในภาพหน้าจอก่อนหน้า และหน้าตัวอย่างนี้มีกฎการคาดเดาชุดเดียวสำหรับการดึงข้อมูลล่วงหน้า 3 หน้า การดึงข้อมูลล่วงหน้า 2 รายการสำเร็จและไม่สำเร็จ 1 รายการ คุณสามารถคลิกไอคอนนอกเหนือจากชุดกฎเพื่อไปยังแหล่งที่มาของชุดกฎในแผงองค์ประกอบ หรือจะคลิกลิงก์สถานะเพื่อไปยังแท็บการคาดเดาที่กรองไปยังชุดกฎนั้นก็ได้
แท็บการคาดเดาจะแสดง URL เป้าหมายทั้งหมด รวมถึงการดำเนินการ (ดึงข้อมูลล่วงหน้าหรือแสดงผลล่วงหน้า) ชุดกฎที่ตั้งค่า URL ดังกล่าว (เนื่องจากอาจมีหลายรายการในหน้าเว็บ) และสถานะของการคาดเดาแต่ละรายการ ดังนี้
![แท็บการคาดเดาในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่แสดง URL ที่ดึงข้อมูลล่วงหน้าพร้อมสถานะ](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/speculations-prefetch-annotated.png?authuser=7&hl=th)
เหนือ URL เมนูแบบเลื่อนลงสามารถใช้เพื่อแสดง URL จากชุดกฎทั้งหมด หรือเฉพาะ URL จากชุดกฎชุดใดชุดหนึ่ง ที่ด้านล่างของรายการ URL ทั้งหมดจะแสดงอยู่ การคลิกที่ URL หนึ่งๆ จะแสดงข้อมูลโดยละเอียดเพิ่มเติม
ในภาพหน้าจอนี้ เราจะดูสาเหตุของความล้มเหลวของหน้า next3.html
(ซึ่งไม่มีอยู่และแสดงผล 404 ซึ่งเป็นรหัสสถานะ HTTP ที่ไม่ใช่ 2xx)
แท็บสรุปการโหลดแบบคาดเดาจะแสดงรายงานสถานะการโหลดแบบคาดเดาสำหรับหน้านี้เพื่อแสดงให้เห็นว่ามีการใช้การดึงข้อมูลล่วงหน้าหรือการแสดงผลล่วงหน้าสำหรับหน้านี้หรือไม่
สำหรับหน้าที่ดึงข้อมูลล่วงหน้า คุณควรเห็นข้อความที่สำเร็จเมื่อไปยังหน้าต่อไปนี้
![แท็บโหลดแบบคาดเดาของ Chrome DevTools ที่แสดงการดึงข้อมูลล่วงหน้าสำเร็จ](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/successful-prefetch.png?authuser=7&hl=th)
การคาดเดาที่ไม่มีใครเทียบได้
เมื่อการนำทางเกิดขึ้นจากหน้าเว็บที่มีกฎการคาดเดาที่ไม่ส่งผลให้มีการใช้การดึงข้อมูลล่วงหน้าหรือการแสดงผลล่วงหน้า ส่วนเพิ่มเติมของแท็บจะแสดงรายละเอียดเพิ่มเติมเกี่ยวกับสาเหตุที่ URL ไม่ตรงกับ URL ที่คาดเดาใดๆ วิธีนี้เป็นประโยชน์สำหรับการระบุคำที่พิมพ์ผิดในกฎการคาดเดาของคุณ
![แท็บโหลดแบบคาดเดาของ Chrome DevTools ซึ่งจะแสดงวิธีที่ URL ปัจจุบันไม่ตรงกับ URL ใดๆ ในกฎการคาดเดาของหน้าเว็บก่อนหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/unsuccessful-prefetch.png?authuser=7&hl=th)
ตัวอย่างเช่น ที่นี่เราไปที่ next4.html
แต่มีเพียง next.html
, next2.html
หรือ next3.html
เท่านั้นที่เป็นการดึงข้อมูลล่วงหน้า เราจึงเห็นว่าวิธีนี้ไม่ตรงกับกฎใดๆ ใน 3 กฎนั้นเลย
แท็บการโหลดแบบคาดเดามีประโยชน์มากสำหรับการแก้ไขข้อบกพร่องของกฎการคาดเดาเอง และค้นหาข้อผิดพลาดทางไวยากรณ์ใน JSON
สําหรับการดึงข้อมูลล่วงหน้าเอง แผงเครือข่ายน่าจะเป็นที่ที่คุ้นเคยมากกว่า สำหรับตัวอย่างความล้มเหลวของการดึงข้อมูลล่วงหน้า โปรดดู 404 สำหรับการดึงข้อมูลล่วงหน้าที่นี่
![แผง Chrome DevTools Network ที่แสดงการดึงข้อมูลล่วงหน้าที่ไม่สำเร็จ](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/chrome-devtools-network-failed-prefetch.png?authuser=7&hl=th)
อย่างไรก็ตาม แท็บการโหลดแบบคาดเดาจะมีประโยชน์ยิ่งขึ้นสำหรับกฎการคาดเดาที่แสดงผลล่วงหน้า ซึ่งจะกล่าวถึงต่อไป
กฎการคาดเดาสำหรับ prerender
กฎการคาดเดาการแสดงผลล่วงหน้าจะใช้ไวยากรณ์เดียวกันกับกฎการคาดเดาการดึงข้อมูลล่วงหน้า เช่น
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["next.html", "next2.html"]
}
]
}
</script>
ชุดกฎนี้จะทริกเกอร์การโหลดและการแสดงผลทั้งหมดของหน้าเว็บที่ระบุ (ขึ้นอยู่กับข้อจำกัดบางประการ) ฟีเจอร์นี้ช่วยให้ผู้ใช้โหลดได้ทันที แม้จะมีค่าใช้จ่ายด้านทรัพยากรเพิ่มเติม
อย่างไรก็ตาม การดึงข้อมูลเหล่านี้ต่างจากการดึงข้อมูลล่วงหน้าตรงที่แผงเครือข่ายจะดึงข้อมูลเหล่านี้ไม่ได้ เนื่องจากมีการดึงข้อมูลเหล่านี้และแสดงผลในกระบวนการแสดงผลที่แยกต่างหากใน Chrome ซึ่งทำให้แท็บการโหลดแบบคาดเดามีความสำคัญมากขึ้นในการแก้ไขข้อบกพร่องของกฎการคาดเดาที่แสดงผลล่วงหน้า
แก้ไขข้อบกพร่อง prerender
ด้วยแท็บการโหลดแบบคาดเดา
คุณสามารถใช้หน้าจอการโหลดแบบคาดเดาเดียวกันกับกฎการคาดเดาการแสดงผลล่วงหน้าซึ่งแสดงให้เห็นกับหน้าสาธิตที่คล้ายกันซึ่งพยายามแสดงผลล่วงหน้า แทนการดึงข้อมูลหน้า 3 หน้าล่วงหน้า
![Chrome DevTools โหลดแท็บแบบคาดเดาสำหรับหน้าที่มีกฎการคาดเดาการแสดงผลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/speculations-rules-tab-prerender.png?authuser=7&hl=th)
เราจะเห็นอีกครั้งว่า 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 ที่มีสิทธิ์ทั้งหมดที่เบราว์เซอร์พบบนหน้าเว็บแสดงอยู่
![แท็บการคาดเดาในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่มี URL ที่ไม่ได้เรียกใช้จำนวนหนึ่ง](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/document-rules-not-triggered.png?authuser=7&hl=th)
สถานะจะไม่ทริกเกอร์เนื่องจากกระบวนการแสดงผลล่วงหน้ายังไม่เริ่มต้น แต่เมื่อวางเมาส์เหนือลิงก์ เราจะเห็นว่าสถานะมีการเปลี่ยนแปลงเมื่อ URL แต่ละรายการแสดงผลล่วงหน้า
![แท็บการคาดเดาในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่มีการทริกเกอร์หน้าที่แสดงผลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/document-rules-triggered.png?authuser=7&hl=th)
Chrome ได้กำหนดขีดจำกัดการแสดงผลล่วงหน้า ซึ่งรวมถึงการแสดงผลล่วงหน้าสูงสุด 2 ครั้งสำหรับ moderate
ความตั้งใจ ดังนั้นหลังจากวางเมาส์เหนือลิงก์ที่สาม เราจะเห็นสาเหตุของความล้มเหลวสำหรับ URL ดังกล่าว ดังนี้
![แท็บการคาดเดาในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ซึ่งแสดงการโหลดล่วงหน้าที่ล้มเหลว](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/replaced-prerender-shows-as-failure.png?authuser=7&hl=th)
แก้ไขข้อบกพร่อง prerender
ด้วยแผงเครื่องมือสำหรับนักพัฒนาเว็บอื่นๆ
หน้าที่แสดงผลล่วงหน้าต่างจากการดึงข้อมูลล่วงหน้าตรงที่จะไม่แสดงในกระบวนการแสดงผลปัจจุบันในแผงเครื่องมือสำหรับนักพัฒนาเว็บ เช่น แผงเครือข่าย เพราะจะแสดงผลในตัวแสดงผลเบื้องหลังของตนเอง
อย่างไรก็ตาม ตอนนี้คุณเปลี่ยนโหมดแสดงภาพที่แผงเครื่องมือสำหรับนักพัฒนาเว็บใช้ได้ด้วยเมนูแบบเลื่อนลงในเมนูแบบเลื่อนลงด้านขวาบน หรือโดยเลือก URL ที่ส่วนบนของแผงแล้วเลือกตรวจสอบ ดังนี้
![ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ให้คุณสลับโหมดแสดงภาพที่ใช้แสดงข้อมูลสำหรับ](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/switch-renderers.png?authuser=7&hl=th)
รายการแบบเลื่อนลงนี้ (และค่าที่เลือก) จะแชร์กับแผงอื่นๆ ทั้งหมดด้วย เช่น แผงเครือข่าย ซึ่งคุณจะเห็นว่าหน้าที่ขอคือหน้าที่แสดงผลล่วงหน้า
![แผง Chrome DevTools Network ที่แสดงคำขอเครือข่ายสำหรับหน้าที่แสดงผลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/network-with-different-renderer.png?authuser=7&hl=th)
เมื่อดูที่ส่วนหัว HTTP สำหรับทรัพยากรเหล่านี้ เราพบว่าส่วนหัวทั้งหมดมีการตั้งค่าด้วยส่วนหัว Sec-Purpose: prefetch;prerender
![แผง Chrome DevTools Network แสดงส่วนหัว Sec-Purpose สำหรับหน้าที่แสดงผลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/sec-purpose-headers-prerender.png?authuser=7&hl=th)
หรือแผงองค์ประกอบซึ่งคุณจะเห็นเนื้อหาของหน้า เช่น ในภาพหน้าจอต่อไปนี้ ซึ่งเราจะเห็นองค์ประกอบ <h1>
สำหรับหน้าที่แสดงผลล่วงหน้า
![แผงองค์ประกอบ Chrome DevTools สำหรับหน้าที่แสดงผลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/prerender-elements-panel.png?authuser=7&hl=th)
หรือแผงคอนโซล ซึ่งคุณสามารถดูบันทึกคอนโซลที่มาจากหน้าที่แสดงผลล่วงหน้า
![แผงคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่แสดงเอาต์พุตของคอนโซลจากหน้าที่แสดงผลล่วงหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/prerender-console-panel.png?authuser=7&hl=th)
แก้ไขข้อบกพร่องกฎการคาดเดาในหน้าที่แสดงผลล่วงหน้า
ส่วนก่อนหน้านี้จะกล่าวถึงวิธีแก้ไขข้อบกพร่องของหน้าที่แสดงผลล่วงหน้าในหน้าเว็บซึ่งเริ่มการแสดงผลล่วงหน้า อย่างไรก็ตาม หน้าที่แสดงผลล่วงหน้าอาจระบุข้อมูลการแก้ไขข้อบกพร่องด้วย ไม่ว่าจะโดยการเรียกใช้ Analytics หรือเข้าสู่ระบบคอนโซล (ซึ่งดูตามที่อธิบายไว้ในส่วนก่อนหน้านี้)
นอกจากนี้ เมื่อผู้ใช้เปิดใช้งานหน้าที่แสดงผลล่วงหน้า แท็บการโหลดแบบคาดเดาจะแสดงสถานะนี้ รวมถึงระบุว่าหน้าเว็บแสดงผลล่วงหน้าสำเร็จหรือไม่ หากแสดงผลล่วงหน้าไม่ได้ ระบบจะระบุคำอธิบายถึงสาเหตุ ดังนี้
![แท็บโหลดแบบคาดเดาของ Chrome DevTools ซึ่งแสดงหน้าที่แสดงผลล่วงหน้าทั้งที่สำเร็จและล้มเหลว](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/success-failed-prerender.png?authuser=7&hl=th)
นอกจากนี้ในกรณีของการดึงข้อมูลล่วงหน้า การไปยังส่วนต่างๆ จากหน้าเว็บที่มีกฎการคาดเดาที่ไม่ตรงกับหน้าปัจจุบันจะพยายามแสดงสาเหตุที่ URL ไม่ตรงกับที่ระบุไว้ในกฎการคาดเดาของหน้าก่อนหน้าในแท็บการโหลดแบบคาดเดา ดังนี้
![แท็บการโหลดแบบคาดเดาของ Chrome DevTools ที่แสดง URL ที่ไม่ตรงกันของ URL ปัจจุบันและ URL ที่ระบุไว้ในหน้าก่อนหน้า](https://developer.chrome.google.cn/static/docs/devtools/application/debugging-speculation-rules/image/unsuccessful-prerender.png?authuser=7&hl=th)
บทสรุป
ในโพสต์นี้ เราได้แสดงวิธีต่างๆ ที่นักพัฒนาแอปสามารถใช้แก้ไขข้อบกพร่องของกฎการคาดเดาการแสดงผลล่วงหน้าและการดึงข้อมูลล่วงหน้า ทีมยังคงเดินหน้าจัดทำเครื่องมือสำหรับกฎการคาดเดา และเราอยากทราบคำแนะนำจากนักพัฒนาแอปเกี่ยวกับวิธีอื่นๆ ที่จะเป็นประโยชน์สำหรับการแก้ไขข้อบกพร่องของ API ใหม่ที่น่าตื่นเต้นนี้ เราขอแนะนำให้นักพัฒนาซอฟต์แวร์แจ้งปัญหาในเครื่องมือติดตามปัญหาของ Chrome สำหรับคำขอฟีเจอร์หรือข้อบกพร่องที่ตรวจพบ
กิตติกรรมประกาศ
รูปภาพขนาดย่อโดย Nubelson Fernandes ใน Unsplash