แก้ไขข้อบกพร่องของกฎการคาดเดาด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน 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

การเรียกข้อมูลล่วงหน้าที่เกิดจากกฎการคาดการณ์จะแสดงในแผงเครือข่ายในลักษณะเดียวกับการเรียกข้อมูลอื่นๆ ดังนี้

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

คําขอ 2 รายการที่ไฮไลต์ด้วยสีแดงคือทรัพยากรที่ดึงข้อมูลไว้ล่วงหน้า ดังที่เห็นในคอลัมน์ประเภท ระบบจะดึงข้อมูลเหล่านี้โดยมีลําดับความสําคัญเป็น Lowest เนื่องจากมีไว้สําหรับการนําทางในอนาคต และ Chrome จะจัดลําดับความสําคัญของทรัพยากรของหน้าปัจจุบัน

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

ส่วนหัวการเรียกข้อมูลล่วงหน้าของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome ที่มีการตั้งค่า Sec-Purpose เป็น prefetch

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

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

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

ประเด็นสำคัญ: แท็บการโหลดแบบคาดการณ์มีไว้สำหรับการทำงานกับกฎการคาดการณ์การโหลดล่วงหน้าและการแสดงผลล่วงหน้า (เรียกรวมกันว่า "การนำทางแบบคาดการณ์") แท็บเหล่านี้ใช้แก้ไขข้อบกพร่องการโหลดทรัพยากรย่อยล่วงหน้าโดยใช้ <link rel="preload">, การโหลดทรัพยากรย่อยล่วงหน้าโดยใช้ <link rel="prefetch"> หรือการโหลดทรัพยากรย่อยล่วงหน้าแบบไม่มีสถานะ <link rel="prerender"> เวอร์ชันเก่าไม่ได้

ในส่วนนี้มีแท็บ 3 แท็บ ได้แก่

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

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

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

แท็บการคาดคะเนจะแสดง URL เป้าหมายทั้งหมดพร้อมกับการดําเนินการ (การเรียกข้อมูลล่วงหน้าหรือการแสดงผลล่วงหน้า) ชุดกฎที่ URL นั้นๆ มาจาก (เนื่องจากอาจมีหลายรายการในหน้าเว็บ) และสถานะของการคาดคะเนแต่ละรายการ ดังนี้

แท็บการคาดคะเนของ Chrome DevTools ที่แสดง URL ที่ดึงข้อมูลไว้ล่วงหน้าพร้อมสถานะ

เหนือ URL คุณสามารถใช้เมนูแบบเลื่อนลงเพื่อแสดง URL จากชุดกฎทั้งหมด หรือเฉพาะ URL จากชุดกฎที่เฉพาะเจาะจง URL ทั้งหมดจะแสดงอยู่ด้านล่าง การคลิก URL จะให้ข้อมูลที่ละเอียดยิ่งขึ้น

ในภาพหน้าจอนี้ เราเห็นสาเหตุของการไม่สําเร็จสําหรับหน้า next3.html (ซึ่งไม่มีอยู่จริง จึงแสดงผลเป็น 404 ซึ่งเป็นรหัสสถานะ HTTP ที่ไม่ใช่ 2xx)

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

สําหรับหน้าที่ดึงข้อมูลล่วงหน้า คุณควรเห็นข้อความ "สําเร็จ" เมื่อไปยังหน้านั้น

แท็บการโหลดแบบคาดการณ์ของ Chrome DevTools ที่แสดงการโหลดล่วงหน้าที่สำเร็จ

การคาดเดาที่ไม่ตรงกัน

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

ระบบจะไฮไลต์ URL ที่ไม่ตรงกันในเครื่องมือสําหรับนักพัฒนาเว็บ

ตัวอย่างเช่น ที่นี่เราไปยัง next4.html แต่มีเพียง next.html, next2.html หรือ next3.html เท่านั้นที่ทำการพรีเฟช เราจึงเห็นว่าหน้านี้ไม่ตรงกับกฎทั้ง 3 ข้อ

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

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่แสดง URL ที่ไม่ตรงกันในแท็บการโหลดโดยประมาณ

ทีม Chrome ยังคงพัฒนาฟีเจอร์นี้อย่างต่อเนื่องเพื่อปรับปรุงอินเทอร์เฟซผู้ใช้ในกรณีเหล่านี้

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

ส่วนการโหลดล่วงหน้านั้น คุณอาจคุ้นเคยกับแผงเครือข่ายมากกว่า สําหรับตัวอย่างการโหลดล่วงหน้าไม่สําเร็จ คุณจะเห็น 404 สําหรับการโหลดล่วงหน้าที่นี่

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

อย่างไรก็ตาม แท็บการโหลดแบบคาดเดาจะมีประโยชน์มากกว่ามากสําหรับกฎการคาดเดาการแสดงผลล่วงหน้า ซึ่งจะกล่าวถึงในหัวข้อถัดไป

กฎการคาดเดาสำหรับ prerender

กฎการคาดเดาการเรียกใช้ข้อมูลพรอมต์ใช้ไวยากรณ์เดียวกับกฎการคาดเดาการเรียกข้อมูลล่วงหน้า เช่น

<script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"]
      }
    ]
  }
</script>

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

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

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

คุณสามารถใช้หน้าจอการโหลดโดยประมาณเดียวกันกับกฎการคาดคะเนการแสดงผลล่วงหน้าได้ ดังที่แสดงในหน้าเดโมที่คล้ายกันซึ่งพยายามแสดงผลล่วงหน้าแทนการโหลดล่วงหน้า 3 หน้า

Chrome DevTools โหลดแท็บโดยประมาณสำหรับหน้าเว็บที่มีกฎการคาดคะเนการแสดงผลล่วงหน้า

ที่นี่เราเห็นว่า 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 ที่มีสิทธิ์ทั้งหมดที่เบราว์เซอร์พบในหน้าเว็บจะแสดงอยู่ในรายการ

แท็บการคาดการณ์ของ Chrome DevTools ที่มี URL ที่ไม่มีการทริกเกอร์จํานวนหนึ่ง

สถานะคือไม่ได้ทริกเกอร์เนื่องจากกระบวนการแสดงผลก่อนการประมวลผลสำหรับรายการเหล่านี้ยังไม่ได้เริ่มต้น อย่างไรก็ตาม เมื่อเราวางเคอร์เซอร์เหนือลิงก์ เราจะเห็นสถานะเปลี่ยนแปลงเมื่อแต่ละ URL แสดงผลล่วงหน้า

แท็บการคาดคะเนของ Chrome DevTools ที่มีหน้าเว็บที่แสดงผลล่วงหน้าซึ่งเรียกให้แสดง

Chrome ได้กำหนดขีดจำกัดในการแสดงผลล่วงหน้า ซึ่งรวมถึงการแสดงผลล่วงหน้าสูงสุด 2 รายการสำหรับความกระตือรือร้นของ moderate ดังนั้นหลังจากวางเมาส์เหนือลิงก์ที่ 3 เราจึงเห็นสาเหตุที่ดำเนินการไม่สำเร็จสำหรับ URL นั้น

แท็บการคาดการณ์ของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome ที่แสดงการโหลดล่วงหน้าไม่สําเร็จ

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

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

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

ตอนนี้ Chrome DevTools ให้คุณเปลี่ยนโปรแกรมแสดงผลที่จะแสดงข้อมูล

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

แผงเครือข่ายของเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome ที่แสดงคําขอเครือข่ายสําหรับหน้าที่แสดงผลล่วงหน้า

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

แผงเครือข่ายของ Chrome DevTools ที่แสดงส่วนหัว Sec-Purpose สำหรับหน้าที่แสดงผลล่วงหน้า

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

แผงองค์ประกอบของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome สำหรับหน้าที่แสดงผลล่วงหน้า

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

แผงคอนโซลของ Chrome DevTools ที่แสดงเอาต์พุตคอนโซลจากหน้าที่แสดงผลล่วงหน้า

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

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

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

แท็บการโหลดแบบคาดการณ์ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ซึ่งแสดงทั้งหน้าเว็บที่แสดงผลล่วงหน้าสำเร็จและไม่สำเร็จ

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

เครื่องมือสําหรับนักพัฒนาเว็บใน Chrome ที่แสดง URL ไม่ตรงกัน

บทสรุป

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

ขอขอบคุณ

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