แก้ไขข้อบกพร่องของกฎการคาดเดาด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน 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"],
        "tag": "rule-set-tag-1"
      }
    ]
  }
</script>

การใช้กฎการคาดการณ์สำหรับการดึงข้อมูลล่วงหน้าของการนำทางมีข้อดีบางอย่างเหนือไวยากรณ์ <link rel="prefetch"> รุ่นเก่า เช่น API ที่สื่อความหมายได้มากขึ้น และการจัดเก็บผลลัพธ์ไว้ในแคชในหน่วยความจำแทนแคชในดิสก์ HTTP

แก้ไขข้อบกพร่องของprefetchกฎการคาดเดา

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

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

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

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

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

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

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

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

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

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

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

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

<script type="speculationrules">
  {
    "prerender": [
      {
        "source": "list",
        "urls": ["next.html", "next2.html"],
        "tag": "rule-set-tag-1"
      }
    ]
  }
</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 ด้วยแผงเครื่องมือสำหรับนักพัฒนาเว็บอื่นๆ

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

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

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

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

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

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

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

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

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

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

บทสรุป

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

การรับทราบ

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