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