คุณสามารถใช้กฎการคาดเดาเพื่อดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้าสำหรับการนำทางหน้าถัดไปตามที่ได้อธิบายไว้ในโพสต์ก่อนหน้า วิธีนี้ช่วยให้หน้าเว็บโหลดได้เร็วขึ้นหรือแม้กระทั่งทันที ซึ่งเป็นการปรับปรุง Core Web Vitals อย่างมากสำหรับการนำทางหน้าเว็บเพิ่มเติมเหล่านี้
การแก้ไขข้อบกพร่องของกฎการคาดเดาอาจเป็นเรื่องยาก โดยเฉพาะอย่างยิ่งกับหน้าที่แสดงผลล่วงหน้า เนื่องจากหน้าเหล่านี้จะแสดงผลในตัวแสดงผลแยกต่างหาก คล้ายกับแท็บพื้นหลังที่ซ่อนอยู่ซึ่งจะแทนที่แท็บปัจจุบันเมื่อเปิดใช้งาน ดังนั้น ตัวเลือกเครื่องมือสำหรับนักพัฒนาเว็บตามปกติจึงไม่สามารถแก้ไขข้อบกพร่องได้เสมอไป
ทีม Chrome ทำงานอย่างหนักเพื่อปรับปรุงการสนับสนุนเครื่องมือสำหรับนักพัฒนาเว็บสำหรับการแก้ไขข้อบกพร่องของกฎการคาดเดา ในโพสต์นี้ คุณจะเห็นวิธีการต่างๆ ทั้งหมดในการใช้เครื่องมือเหล่านี้เพื่อทำความเข้าใจกฎการคาดเดาของหน้าเว็บ สาเหตุที่กฎอาจไม่ทำงาน และเวลาที่นักพัฒนาซอฟต์แวร์สามารถใช้ตัวเลือกเครื่องมือสำหรับนักพัฒนาเว็บที่คุ้นเคยมากกว่า และเมื่อใดที่ไม่ได้ผล
คำอธิบายของคำศัพท์ "ก่อน"
คำว่า "ก่อน" นั้นมีคำมากมายที่อาจสร้างความสับสน ดังนั้นเราจะเริ่มต้นด้วยคำอธิบายเกี่ยวกับสิ่งเหล่านี้
- ดึงข้อมูลล่วงหน้า: ดึงข้อมูลทรัพยากรหรือเอกสารล่วงหน้าเพื่อปรับปรุงประสิทธิภาพในอนาคต โพสต์นี้กล่าวถึงการดึงข้อมูลเอกสารล่วงหน้าโดยใช้ 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 รายการสำเร็จและไม่สำเร็จ คุณสามารถคลิกไอคอนข้างชุดกฎเพื่อนําคุณไปยังแหล่งที่มาของชุดกฎในแผงองค์ประกอบได้ หรือจะคลิกลิงก์สถานะเพื่อนำคุณไปยังแท็บการคาดเดาที่กรองไว้สำหรับชุดกฎนั้นก็ได้
แท็บการคาดเดาจะแสดง 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
ดังนั้นหลังจากวางเมาส์เหนือลิงก์ที่ 3 เราจึงเห็นสาเหตุที่ URL นั้นไม่สำเร็จ ดังนี้
แก้ไขข้อบกพร่อง prerender
ด้วยแผงเครื่องมือสำหรับนักพัฒนาเว็บอื่นๆ
หน้าที่แสดงผลล่วงหน้าจะไม่แสดงในกระบวนการแสดงผลปัจจุบันในแผงเครื่องมือสำหรับนักพัฒนาเว็บ เช่น แผงเครือข่าย เนื่องจากระบบจะแสดงผลในหน้าที่แสดงผลล่วงหน้า ซึ่งต่างจากการดึงข้อมูลล่วงหน้า
อย่างไรก็ตาม ตอนนี้คุณเปลี่ยนโหมดแสดงภาพที่แผงเครื่องมือสำหรับนักพัฒนาเว็บใช้ด้วยเมนูแบบเลื่อนลงที่ด้านขวาบนในเมนูแบบเลื่อนลง หรือโดยการเลือก URL ในส่วนบนของแผงและเลือกตรวจสอบได้ดังนี้
เมนูแบบเลื่อนลงนี้ (และค่าที่เลือก) จะแชร์ในแผงอื่นๆ ทั้งหมดด้วย เช่น แผงเครือข่าย ซึ่งคุณจะเห็นว่าหน้าที่ขอคือหน้าที่แสดงผลล่วงหน้า ดังนี้
เมื่อดูส่วนหัว HTTP สำหรับทรัพยากรเหล่านี้ เราพบว่าทรัพยากรเหล่านี้ได้รับการตั้งค่าด้วยส่วนหัว Sec-Purpose: prefetch;prerender
ดังนี้
หรือแผงองค์ประกอบ ซึ่งคุณจะดูเนื้อหาของหน้าเว็บได้ เช่นในภาพหน้าจอต่อไปนี้ที่เราเห็นว่าองค์ประกอบ <h1>
คือหน้าที่แสดงผลล่วงหน้า
หรือแผงควบคุมคอนโซล ซึ่งคุณสามารถดูบันทึกคอนโซลที่หน้าเว็บที่แสดงผลล่วงหน้าส่งออกมาได้
แก้ไขข้อบกพร่องของกฎการคาดเดาในหน้าที่แสดงผลล่วงหน้า
ส่วนก่อนหน้านี้กล่าวถึงวิธีแก้ไขข้อบกพร่องของหน้าที่แสดงผลล่วงหน้าในหน้าซึ่งเริ่มการแสดงผลล่วงหน้า อย่างไรก็ตาม ตัวหน้าเว็บที่แสดงผลล่วงหน้าอาจให้ข้อมูลการแก้ไขข้อบกพร่องได้จากการเรียกใช้ Analytics หรือเข้าสู่ระบบคอนโซล (ซึ่งดูได้ตามที่อธิบายไว้ในส่วนก่อนหน้า)
นอกจากนี้ เมื่อผู้ใช้เปิดใช้งานหน้าที่แสดงผลล่วงหน้าแล้ว แท็บการโหลดแบบคาดเดาจะแสดงสถานะนี้พร้อมระบุว่ามีการแสดงผลล่วงหน้าสำเร็จหรือไม่ หากไม่สามารถแสดงผลล่วงหน้าได้ โดยมีคำอธิบายว่าเหตุใดจึงเป็นกรณีนี้
นอกจากนี้ ในกรณีของการดึงข้อมูลล่วงหน้า การออกจากหน้าเว็บที่มีกฎการคาดเดาที่ไม่ตรงกับหน้าปัจจุบันจะพยายามแสดงสาเหตุที่ URL ไม่ตรงกับที่ระบุไว้ในกฎการคาดเดาของหน้าเว็บก่อนหน้าในแท็บการโหลดแบบคาดเดา โดยทำดังนี้
บทสรุป
ในโพสต์นี้ เราได้แสดงวิธีต่างๆ ที่นักพัฒนาแอปสามารถแก้ไขข้อบกพร่องของกฎการดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้า ทีมของเราทำงานอย่างต่อเนื่องเกี่ยวกับการใช้เครื่องมือสำหรับกฎการคาดเดา และเรายินดีรับฟังคำแนะนำจากนักพัฒนาซอฟต์แวร์เกี่ยวกับวิธีอื่นๆ ที่มีประโยชน์ในการแก้ไขข้อบกพร่องของ API ใหม่อันน่าตื่นเต้นนี้ เราขอแนะนำให้นักพัฒนาซอฟต์แวร์แจ้งปัญหาในเครื่องมือติดตามปัญหาของ Chrome สำหรับคำขอฟีเจอร์หรือข้อบกพร่องที่พบ
ข้อความแสดงการยอมรับ
รูปไม่ชอบโดย Nubelson Fernandes ใน Unsplash