ปรับปรุงประสิทธิภาพการโหลดหน้าเว็บถัดไป

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

วิธีการทำงาน

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

กฎอาจเป็นรายการ URL ที่ฮาร์ดโค้ดซึ่งมีคีย์ urls (เรียกว่ากฎรายการ) หรือมีคีย์ where ที่มีชุดตัวเลือก href และตัวเลือก CSS ที่ใช้ค้นหาลิงก์ในหน้าเว็บ (เรียกว่ากฎ document)

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

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

ใช้เมื่อใด

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

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

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

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

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

วิธีการใช้งาน

กฎการคาดเดาจะมีรูปแบบตาม JSON และรวมไว้ในแท็ก <script type="speculationrules"> ได้ กฎอาจรวมอยู่ใน <head> หรือ <body> ของเอกสาร หรือเพิ่มแบบไดนามิกโดยใช้ JavaScript ก็ได้

นอกจากนี้ คุณยังใช้ tag ได้ทั้งในระดับส่วนกลางหรือตามกฎแต่ละข้อ เมื่อตั้งค่าแล้ว แท็กนี้จะรวมอยู่ในส่วนหัว Sec-Speculation-Tags และช่วยให้คุณระบุฝั่งเซิร์ฟเวอร์ได้ว่ามีการคาดเดาใดบ้าง

ตัวอย่างกฎรายการ URL แบบง่ายสำหรับการดึงข้อมูล URL ที่กำหนดไว้ล่วงหน้า

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>

ตัวอย่างกฎเอกสารแบบง่ายสำหรับการแสดงผลล่วงหน้าลิงก์ต้นทางเดียวกันทั้งหมดในหน้าเว็บ

<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>

ตัวอย่างกฎเอกสารที่ซับซ้อนสำหรับลิงก์การแสดงผลล่วงหน้าที่มีการยกเว้นสำหรับเว็บไซต์แบบอินเทอร์แอกทีฟ

<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "prerender": [{
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": {"href_matches": "/wp-admin"}},
          { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
          { "not": {"selector_matches": ".do-not-prerender"}},
          { "not": {"selector_matches": "[rel~=nofollow]"}}
        ]
      }
    }]
  }
</script>

ตัวอย่างชุดกฎแบบผสม

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

<script type="speculationrules">
  {
    "prefetch": [{
      "tag": "prefetch-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "eager"
    }],
    "prerender": [{
      "tag": "prerender-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

แนวทางปฏิบัติแนะนำ

• ควรใช้กฎการคาดเดาเพื่อดึงข้อมูลล่วงหน้าและแสดงผลล่วงหน้าสำหรับหน้าเว็บที่ผู้ใช้มีแนวโน้มจะเข้าชมเป็นหน้าถัดไป
• ควรใช้กฎการคาดเดากับเว็บไซต์แบบคงที่ซึ่งเนื้อหาไม่น่าจะเปลี่ยนแปลงบ่อย และหน้าเว็บมีค่าใช้จ่ายในการสร้างน้อยกว่า โดยเฉพาะอย่างยิ่งหากแคชไว้ที่ Edge
• ควรระมัดระวังมากขึ้นเมื่อใช้กฎการคาดเดาสำหรับหน้าเว็บแบบไดนามิก ซึ่งเนื้อหามีแนวโน้มที่จะเปลี่ยนแปลงบ่อย อาจล้าสมัย และหน้าเว็บมีค่าใช้จ่ายในการสร้างสูงกว่า
• ควรเลือกใช้กฎเอกสารมากกว่ากฎรายการ เนื่องจากมีความยืดหยุ่นมากกว่า ช่วยให้แชร์กฎเดียวกันในหลายหน้าได้ และใช้เพื่อดึงข้อมูลล่วงหน้าและแสดงผลหน้าเว็บล่วงหน้าที่ไม่ทราบล่วงหน้าได้
• ควรพิจารณาข้อดีข้อเสียระหว่างการดึงข้อมูลล่วงหน้ากับการแสดงผลล่วงหน้า แล้วเลือกวิธีที่เหมาะสมกับกรณีการใช้งานของคุณ การแสดงผลล่วงหน้ามีค่าใช้จ่ายสูงกว่าการดึงข้อมูลล่วงหน้า และอาจทำให้เกิดผลข้างเคียงที่ไม่ได้ตั้งใจมากขึ้นในแอปพลิเคชันที่ซับซ้อนซึ่งแสดงสถานะแบบไดนามิก แต่จะมอบประสบการณ์ของผู้ใช้ที่ดีกว่า สอบถามนักพัฒนาแอปเกี่ยวกับความต้องการของตนหากไม่แน่ใจ
• ควรพิจารณาข้อดีข้อเสียระหว่างระดับ eagerness ต่างๆ และเลือกระดับที่เหมาะสมกับกรณีการใช้งานของคุณ การคาดเดาที่รวดเร็วขึ้นจะช่วยให้ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้น แต่จะใช้ทรัพยากรมากขึ้นและอาจทำให้เกิดผลข้างเคียงที่ไม่พึงประสงค์มากขึ้นในแอปพลิเคชันที่ซับซ้อนซึ่งแสดงสถานะแบบไดนามิก สอบถามนักพัฒนาแอปเกี่ยวกับความต้องการของตนหากไม่แน่ใจ
• อย่าใช้กฎการคาดเดามากเกินไป เช่น เพื่อคาดเดาทุกลิงก์ในหน้าเว็บ เบราว์เซอร์มีขีดจำกัด (การคาดเดา 2 รายการสำหรับการคาดเดาที่ไม่ใช่แบบกระตือรือร้น) ควรใช้ immediate กับลิงก์จำนวนน้อยมากเท่านั้น
• อย่าคาดเดา URL ที่มีแนวโน้มจะทริกเกอร์การเปลี่ยนแปลงสถานะ เช่น /logout หรือ /add-to-cart และยกเว้น URL เหล่านั้นจากกฎการคาดเดาอย่างชัดเจนหากมีแนวโน้มที่จะรวมอยู่ในกฎเอกสาร
• อย่าใช้กฎการคาดเดากับแอปพลิเคชันหน้าเว็บเดียว (SPA) กฎการคาดเดาออกแบบมาสำหรับแอปพลิเคชันแบบหลายหน้า (MPA) ซึ่งเบราว์เซอร์จะไปยังเอกสารใหม่ในการนำทางแต่ละครั้ง ใน SPA เบราว์เซอร์จะไม่ไปยังเอกสารใหม่ในการไปยังส่วนต่างๆ แต่ละครั้ง ดังนั้นกฎการคาดเดาจึงไม่ทำงานตามที่คาดไว้

การรองรับเบราว์เซอร์และกลยุทธ์สำรอง

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