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

Barry Pollard

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

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

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

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

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

• การเรียกข้อมูลล่วงหน้า: การเรียกข้อมูลหรือเอกสารล่วงหน้าเพื่อปรับปรุงประสิทธิภาพในอนาคต โพสต์นี้กล่าวถึงการเรียกข้อมูลเอกสารล่วงหน้าโดยใช้ 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 ดังนั้นหลังจากวางเมาส์เหนือลิงก์ที่ 3 เราจึงเห็นสาเหตุที่ดำเนินการไม่สำเร็จสำหรับ URL นั้น

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

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

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

เมนูแบบเลื่อนลงนี้ (และค่าที่เลือก) จะแชร์กับแผงอื่นๆ ทั้งหมดด้วย เช่น แผงเครือข่าย ซึ่งคุณจะเห็นว่าหน้าเว็บที่ขอเป็นหน้าเว็บที่แสดงผลล่วงหน้า

เมื่อดูที่ส่วนหัว HTTP ของทรัพยากรเหล่านี้ เราจะเห็นว่าทรัพยากรทั้งหมดได้รับการตั้งค่าด้วยส่วนหัว Sec-Purpose: prefetch;prerender

หรือแผงองค์ประกอบที่คุณจะเห็นเนื้อหาของหน้าเว็บ เช่น ในภาพหน้าจอต่อไปนี้ที่เราเห็นองค์ประกอบ <h1> สำหรับหน้าที่แสดงผลล่วงหน้า

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

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

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

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

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

บทสรุป

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

ขอขอบคุณ

ภาพปกโดย Nubelson Fernandes ใน Unsplash