การแก้ไขข้อบกพร่องของกฎการคาดการณ์

Barry Pollard

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

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

ส่วนนี้จะมีแท็บ 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 ข้อใดๆ

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

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

แท็บการโหลดแบบคาดเดามีประโยชน์มากในการแก้ไขข้อบกพร่องของกฎการคาดเดาด้วยตนเอง และค้นหาข้อผิดพลาดทางไวยากรณ์ใน 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