แก้ไขข้อบกพร่องของกฎการคาดเดาด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

Barry Pollard

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

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

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

คำอธิบายของคำว่า "ก่อน"

คำนำหน้า "ก่อน" จำนวนมากอาจทำให้สับสน เราจึงขอเริ่มอธิบายคำเหล่านี้ก่อน

• การเรียกข้อมูลล่วงหน้า: การเรียกข้อมูลหรือเอกสารล่วงหน้าเพื่อปรับปรุงประสิทธิภาพในอนาคต โพสต์นี้ครอบคลุมถึงการดึงข้อมูลเอกสารล่วงหน้าโดยใช้ Speculation Rules API แทนที่จะเป็นตัวเลือก <link rel="prefetch"> ที่คล้ายกัน แต่เวอร์ชันเก่านี้มักใช้สำหรับการดึงข้อมูลทรัพยากรย่อยล่วงหน้า
• การแสดงผลล่วงหน้า: การดำเนินการนี้จะเหนือกว่าการเรียกข้อมูลล่วงหน้าและแสดงผลทั้งหน้าเว็บราวกับว่าผู้ใช้ไปยังหน้านั้นจริงๆ แต่เก็บหน้าเว็บไว้ในกระบวนการแสดงผลเบื้องหลังที่ซ่อนอยู่เพื่อพร้อมใช้งานหากผู้ใช้ไปยังหน้านั้นจริงๆ ขอย้ำอีกครั้งว่าเอกสารนี้เกี่ยวข้องกับเวอร์ชัน Speculation Rules API เวอร์ชันใหม่กว่าตัวเลือก <link rel="prerender"> เวอร์ชันเก่า (ซึ่งไม่แสดงผลล่วงหน้าแบบเต็มอีกต่อไป)
• การคาดการณ์การนําทาง: คํารวมสําหรับตัวเลือกการจําล่วงหน้าและการแสดงผลล่วงหน้าใหม่ซึ่งทริกเกอร์โดยกฎการคาดการณ์
• การโหลดล่วงหน้า: คำที่มีความหมายหลายอย่างซึ่งอาจหมายถึงเทคโนโลยีและกระบวนการต่างๆ เช่น <link rel="preload">, เครื่องมือสแกนการโหลดล่วงหน้า และการโหลดการนําทางของ Service Worker ล่วงหน้า ที่นี่จะไม่กล่าวถึงรายการเหล่านี้ แต่รวมคำนี้เพื่อแยกความแตกต่างจากคำว่า "การคาดเดาเกี่ยวกับการนำทาง" อย่างชัดเจน

กฎการคาดเดาสำหรับ 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 จะจัดลําดับความสําคัญของทรัพยากรของหน้าปัจจุบัน

การคลิกแถวใดแถวหนึ่งยังแสดงส่วนหัว Sec-Purpose: prefetch HTTP ด้วย ซึ่งเป็นวิธีที่ระบบจะระบุคําขอเหล่านี้ในฝั่งเซิร์ฟเวอร์

แก้ไขข้อบกพร่อง prefetch ด้วยแท็บการโหลดแบบคาดเดา

เราได้เพิ่มส่วนการโหลดแบบคาดการณ์ใหม่ในแผงแอปพลิเคชันของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ในส่วนบริการที่ทำงานอยู่เบื้องหลังเพื่อช่วยแก้ไขข้อบกพร่องของกฎการคาดการณ์

ในส่วนนี้มีแท็บ 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 เหล่านี้จากลิงก์ต้นทางเดียวกันในหน้าเว็บได้ แทนที่จะแสดงรายการ 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> สำหรับหน้าที่แสดงผลล่วงหน้า

หรือแผงคอนโซลที่คุณสามารถดูบันทึกคอนโซลที่แสดงโดยหน้าเว็บที่แสดงผลล่วงหน้า

แก้ไขข้อบกพร่องของกฎการคาดเดาในหน้าเว็บที่แสดงผลล่วงหน้า

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

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

นอกจากนี้เช่นเดียวกับการดึงข้อมูลล่วงหน้า การนำทางจากหน้าที่มีกฎการคาดเดาซึ่งไม่ตรงกับหน้าปัจจุบันจะพยายามแสดงสาเหตุที่ URL ไม่ตรงกับ URL ที่ครอบคลุมในกฎการคาดเดาของหน้าก่อนหน้าในแท็บการโหลดแบบคาดเดา

บทสรุป

ในโพสต์นี้ เราได้แสดงวิธีต่างๆ ที่นักพัฒนาแอปสามารถใช้แก้ไขข้อบกพร่องของกฎการคาดเดาการแสดงผลล่วงหน้าและการแสดงผลล่วงหน้า ทีมของเรากําลังพัฒนาเครื่องมือสําหรับกฎการเก็งกำไรอย่างต่อเนื่อง และเรายินดีรับฟังคําแนะนําจากนักพัฒนาแอปเกี่ยวกับวิธีอื่นๆ ที่จะช่วยแก้ไขข้อบกพร่องของ API ใหม่ที่น่าตื่นเต้นนี้ เราขอแนะนำให้นักพัฒนาซอฟต์แวร์แจ้งปัญหาในเครื่องมือติดตามปัญหาของ Chrome สำหรับคำขอฟีเจอร์หรือข้อบกพร่องที่ตรวจพบ

ขอขอบคุณ

รูปภาพขนาดย่อโดย Nubelson Fernandes ใน Unsplash