ใช้การไปยังส่วนต่างๆ ได้ทันทีด้วย Speculation Rules API

1. บทนำ

เดโมแบบอินเทอร์แอกทีฟและ Codelab สำหรับเรียนรู้วิธีการไปยังส่วนต่างๆ ได้ทันทีผ่านการแสดงผลล่วงหน้าโดยใช้ Speculation Rules API

Codelab นี้คาดว่าจะใช้เวลา 30 นาทีจึงจะเสร็จสมบูรณ์ และคุณสามารถติดตามเวลาที่เหลือได้ที่ด้านบนของหน้าจอ

ข้อกำหนดเบื้องต้น

มีความรู้พื้นฐานเกี่ยวกับ HTML และ JavaScript

สิ่งที่คุณจะได้เรียนรู้

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

สิ่งที่ต้องมี

Chrome 123 ขึ้นไป
ความสามารถในการเรียกใช้หรือเผยแพร่เว็บไซต์ (ตัวอย่างใช้ Glitch แต่บริการที่คล้ายกันหรือเว็บเซิร์ฟเวอร์ที่ทำงานในเครื่องก็ใช้ได้)

หากพร้อมแล้ว มาเริ่มกันเลย

2. ตั้งค่าสภาพแวดล้อม

ขั้นตอนแรกในเดโมนี้คือการสร้างเว็บไซต์ทดสอบใน Glitch ที่มี 3 หน้า ดังนี้

หน้า 1 คือหน้าแรกที่มีลิงก์ไปยังหน้า 2 และหน้า 3
หน้า 2 ที่มีสคริปต์บล็อกเพื่อจำลองหน้าเว็บที่โหลดช้า นอกจากนี้ คุณยังจะบันทึกเวลา Largest Contentful Paint (LCP) ไปยังคอนโซลเพื่อเป็นตัววัดเวลาในการโหลดของหน้าเว็บด้วย
หน้า 3 เป็นสำเนาที่ใกล้เคียงกับหน้า 2 แต่คราวนี้มี LCP รูปภาพ ดังนั้นเดโมจะมี 2 ลิงก์

หากคุณมีเว็บไซต์เดโมของตัวเองที่ต้องการใช้แทน ก็สามารถทำตามขั้นตอนที่เทียบเท่าในเว็บไซต์นั้นได้

คุณต้องมีบัญชี Glitch จึงจะใช้ Glitch ได้ นอกจากนี้ คุณยังแสดงหน้าเว็บเหล่านี้จากเซิร์ฟเวอร์การพัฒนาในเครื่อง หรือใช้แพลตฟอร์ม/บริการอื่นได้หากคุณคุ้นเคยกับวิธีดำเนินการ (เราจะไม่กล่าวถึงตัวเลือกเหล่านั้นที่นี่)

สร้างเว็บไซต์โดยการรีมิกซ์เว็บไซต์พื้นฐานของ Glitch

ซึ่งจะทำให้คุณมีเว็บไซต์พื้นฐานดังนี้

เว็บไซต์พื้นฐาน Hello World ของ Glitch

Glitch จะตั้งชื่อโปรเจ็กต์แบบสุ่ม (open-chalk-asparagus.glitch.me ในตัวอย่างนี้) และคุณจะดูโปรเจ็กต์นั้นได้ที่ชื่อโปรเจ็กต์เป็นโดเมนย่อยใน glitch.me ในตัวอย่างนี้ URL อยู่ที่ https://open-chalk-asparagus.glitch.me/

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

ตอนนี้คุณได้ตั้งค่าสภาพแวดล้อมแล้ว และสามารถไปยังขั้นตอนถัดไปเพื่อตั้งค่าเว็บไซต์เดโมได้

3. สร้างเว็บไซต์สาธิต

แทนที่เนื้อหาของไฟล์ index.html เพื่อตั้งค่าหน้าพื้นฐานที่มีลิงก์ 2-3 รายการ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
    <title>Instant Loading Demo!</title>
  </head>
  <body>
    <h1>Instant Loading Demo!</h1>
    <p>This is a demo of the Speculation Rules API.</p>
    <ul>
      <li><a href="./page2.html">Page 2</a></li>
      <li><a href="./page3.html">Page 3</a></li>
    </ul>
  </body>
</html>

สร้างหน้า page2.html ใน Glitch โดยคลิกปุ่ม Files + ทางด้านซ้าย พิมพ์ page2.html แล้วคลิกเพิ่มไฟล์นี้

คัดลอกและวางเนื้อหาต่อไปนี้ลงใน page2.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
    
    <title>Page 2</title>
    
    <!-- Load script as a classic script to allow it to be blocking -->
    <script src="./script.js"></script>

  </head>
  <body>
    <h1>This is page 2</h1>
    <h2>This is a demo of the Speculation Rules API.</h2>
    <button onclick="history.back();">Go back</button>
  </body>
</html>

และ page3.html ที่มีเนื้อหาต่อไปนี้ (เนื้อหาจะเหมือนกับหน้า 2 มาก แต่เราได้เพิ่มรูปภาพลงไป)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
    
    <title>Page 3</title>

    <!-- Load script as a classic script to allow it to be blocking -->
    <script src="./script.js"></script>

  </head>
  <body>
    <h1>This is page 3</h1>
    <p>This is a demo of the Speculation Rules API.</p>
    <button onclick="history.back();">Go back</button>
    <img src="./image.svg" alt="LCP image">
  </body>
</html>

หน้า 3 อ้างอิงถึงไฟล์ image.svg ดังนั้นมาสร้างไฟล์ดังกล่าวด้วยเนื้อหาต่อไปนี้กัน

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0.0 0.0 384.0 288.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10"><clipPath id="p.0"><path d="m0 0l384.0 0l0 288.0l-384.0 0l0 -288.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l384.0 0l0 288.0l-384.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m47.99836 24.0l288.0 0l0 96.0l-288.0 0z" fill-rule="evenodd"/><path fill="#2979ff" d="m115.79305 40.46437l11.875 0l0 51.75l26.671867 0l0 11.265625l-38.546867 0l0 -63.015625zm76.99615 64.421875q-9.15625 0 -16.71875 -4.34375q-7.5625 -4.359375 -11.921875 -11.890625q-4.359375 -7.53125 -4.359375 -16.671875q0 -9.15625 4.359375 -16.671875q4.359375 -7.53125 11.921875 -11.890625q7.5625 -4.359375 16.71875 -4.359375q14.25 0 23.578125 10.296875l-8.359375 8.09375q-6.0625 -7.125 -15.125 -7.125q-5.90625 0 -10.75 2.6875q-4.828125 2.6875 -7.609375 7.625q-2.765625 4.921875 -2.765625 11.34375q0 6.421875 2.765625 11.359375q2.78125 4.921875 7.609375 7.609375q4.84375 2.671875 10.75 2.671875q9.9375 0 16.625 -8.265625l8.453125 8.0q-4.671875 5.640625 -11.046875 8.59375q-6.375 2.9375 -14.125 2.9375zm36.17192 -64.421875l22.171875 0q5.984375 0 10.90625 2.515625q4.9375 2.515625 7.75 7.046875q2.8125 4.53125 2.8125 10.328125q0 5.8125 -2.8125 10.390625q-2.8125 4.578125 -7.75 7.09375q-4.921875 2.5 -10.90625 2.5l-10.296875 0l0 23.140625l-11.875 0l0 -63.015625zm22.53125 28.609375q4.390625 0 6.890625 -2.546875q2.515625 -2.5625 2.515625 -6.171875q0 -3.609375 -2.515625 -6.109375q-2.5 -2.515625 -6.890625 -2.515625l-10.65625 0l0 17.34375l10.65625 0z" fill-rule="nonzero"/><path fill="#0cce6b" d="m43.2 177.60136l96.0 0l0 38.393692l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m77.08874 201.5057q-1.234375 0 -2.265625 -0.578125q-1.03125 -0.59375 -1.640625 -1.609375q-0.59375 -1.03125 -0.59375 -2.296875q0 -1.265625 0.59375 -2.28125q0.609375 -1.03125 1.640625 -1.609375q1.03125 -0.59375 2.265625 -0.59375q0.984375 0 1.8125 0.34375q0.828125 0.34375 1.390625 0.96875l-0.90625 0.921875q-0.875 -0.984375 -2.296875 -0.984375q-0.84375 0 -1.578125 0.40625q-0.734375 0.390625 -1.171875 1.140625q-0.421875 0.734375 -0.421875 1.6875q0 0.953125 0.4375 1.703125q0.4375 0.734375 1.15625 1.140625q0.734375 0.390625 1.578125 0.390625q1.359375 0 2.21875 -0.84375q0.265625 -0.265625 0.453125 -0.671875q0.1875 -0.40625 0.265625 -0.90625l-2.953125 0l0 -1.15625l4.171875 0q0.078125 0.40625 0.078125 0.6875q0 0.828125 -0.265625 1.5625q-0.25 0.734375 -0.796875 1.296875q-0.578125 0.625 -1.390625 0.953125q-0.796875 0.328125 -1.78125 0.328125zm9.765564 0q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0z" fill-rule="nonzero"/><path fill="#ffa400" d="m139.2 177.60132l105.60631 0l0 38.393692l-105.60631 0z" fill-rule="evenodd"/><path fill="#000000" d="m173.98776 185.72441l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm8.700058 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0zm8.42131 1.4375q-1.0625 0 -1.921875 -0.625q-0.84375 -0.625 -1.1875 -1.75l1.25 -0.5q0.1875 0.71875 0.671875 1.171875q0.5 0.453125 1.203125 0.453125q0.640625 0 1.09375 -0.328125q0.453125 -0.34375 0.453125 -0.921875q0 -0.546875 -0.40625 -0.890625q-0.390625 -0.359375 -1.359375 -0.703125l-0.546875 -0.1875q-0.875 -0.3125 -1.453125 -0.859375q-0.578125 -0.5625 -0.578125 -1.484375q0 -0.640625 0.34375 -1.171875q0.34375 -0.546875 0.953125 -0.859375q0.625 -0.3125 1.40625 -0.3125q1.109375 0 1.78125 0.546875q0.671875 0.546875 0.90625 1.21875l-1.1875 0.515625q-0.109375 -0.4375 -0.5 -0.75q-0.375 -0.3125 -1.0 -0.3125q-0.578125 0 -1.0 0.3125q-0.40625 0.3125 -0.40625 0.796875q0 0.4375 0.359375 0.734375q0.375 0.296875 1.140625 0.5625l0.5625 0.1875q1.09375 0.390625 1.6875 1.0q0.609375 0.609375 0.609375 1.625q0 0.84375 -0.421875 1.421875q-0.421875 0.5625 -1.09375 0.84375q-0.671875 0.265625 -1.359375 0.265625zm3.431305 -0.1875l0 0z" fill-rule="nonzero"/><path fill="#000000" d="m150.18561 199.72441l1.328125 0l0 8.59375l-1.328125 0l0 -8.59375zm3.2520294 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm4.131668 -4.015625l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0zm8.351303 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm4.811569 -7.53125l1.4375 0l1.9375 5.71875l0.3125 0.96875l0.0625 0l0.328125 -0.96875l2.03125 -5.71875l1.4375 0l-3.140625 8.59375l-1.359375 0l-3.046875 -8.59375zm8.680923 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm10.450058 1.25l-2.40625 0l0 -1.25l6.125 0l0 1.25l-2.390625 0l0 7.34375l-1.328125 0l0 -7.34375z" fill-rule="nonzero"/><path fill="#ff4e42" d="m243.84 177.6l96.0 0l0 38.393692l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m275.72064 192.7231l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm8.039276 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m196.8 240.0l95.999985 0l0 28.409454l-95.999985 0z" fill-rule="evenodd"/><path fill="#434343" d="m223.49895 257.87723l-5.15625 0l0 -1.34375l5.015625 -7.40625l1.84375 0l0 7.140625l1.390625 0l0 1.609375l-1.390625 0l0 2.1875l-1.703125 0l0 -2.1875zm0 -1.609375l0 -4.609375l-0.09375 0l-3.125 4.609375l3.21875 0zm5.9627686 3.890625q-0.515625 0 -0.875 -0.34375q-0.34375 -0.359375 -0.34375 -0.859375q0 -0.484375 0.34375 -0.828125q0.359375 -0.359375 0.875 -0.359375q0.515625 0 0.859375 0.34375q0.34375 0.34375 0.34375 0.84375q0 0.5 -0.34375 0.859375q-0.34375 0.34375 -0.859375 0.34375zm7.3638763 0.15625q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm5.294403 1.375l0 0zm7.712387 0.25q-1.390625 0 -2.296875 -0.59375q-0.90625 -0.609375 -1.265625 -1.59375l1.546875 -0.671875q0.28125 0.65625 0.8125 1.0q0.53125 0.34375 1.203125 0.34375q0.6875 0 1.140625 -0.25q0.46875 -0.25 0.46875 -0.734375q0 -0.453125 -0.390625 -0.71875q-0.390625 -0.265625 -1.21875 -0.453125l-0.96875 -0.21875q-0.984375 -0.25 -1.625 -0.859375q-0.640625 -0.609375 -0.640625 -1.53125q0 -0.703125 0.421875 -1.25q0.421875 -0.546875 1.140625 -0.84375q0.71875 -0.296875 1.5625 -0.296875q1.15625 0 2.0 0.453125q0.859375 0.453125 1.25 1.3125l-1.5 0.671875q-0.484375 -0.96875 -1.734375 -0.96875q-0.609375 0 -1.015625 0.25q-0.40625 0.25 -0.40625 0.640625q0 0.71875 1.25 1.03125l1.171875 0.296875q1.203125 0.296875 1.8125 0.90625q0.625 0.609375 0.625 1.515625q0 0.765625 -0.4375 1.34375q-0.4375 0.578125 -1.21875 0.90625q-0.765625 0.3125 -1.6875 0.3125zm8.654007 0q-1.1875 0 -2.140625 -0.546875q-0.95310974 -0.5625 -1.4843597 -1.546875q-0.53125 -0.984375 -0.53125 -2.21875q0 -1.171875 0.515625 -2.171875q0.515625 -1.0 1.4374847 -1.59375q0.9375 -0.59375 2.109375 -0.59375q1.234375 0 2.125 0.546875q0.890625 0.53125 1.359375 1.484375q0.484375 0.9375 0.484375 2.140625q0 0.3125 -0.03125 0.53125l-6.3125 0q0.125 1.171875 0.84375 1.8125q0.71875 0.625 1.671875 0.625q0.78125 0 1.34375 -0.359375q0.5625 -0.359375 0.90625 -0.953125l1.421875 0.6875q-0.5625 1.015625 -1.5 1.59375q-0.921875 0.5625 -2.21875 0.5625zm2.15625 -5.265625q-0.03125 -0.4375 -0.28125 -0.890625q-0.25 -0.453125 -0.75 -0.734375q-0.484375 -0.296875 -1.203125 -0.296875q-0.859375 0 -1.46875 0.53125q-0.59375 0.515625 -0.8125 1.390625l4.515625 0zm7.1706543 5.265625q-1.21875 0 -2.1875 -0.546875q-0.953125 -0.5625 -1.484375 -1.546875q-0.53125 -0.984375 -0.53125 -2.234375q0 -1.25 0.53125 -2.234375q0.53125 -0.984375 1.484375 -1.546875q0.96875 -0.5625 2.1875 -0.5625q1.34375 0 2.28125 0.609375q0.9375 0.59375 1.359375 1.65625l-1.578125 0.640625q-0.578125 -1.3125 -2.09375 -1.3125q-0.671875 0 -1.25 0.34375q-0.5625 0.34375 -0.890625 0.96875q-0.328125 0.625 -0.328125 1.4375q0 0.8125 0.328125 1.4375q0.328125 0.625 0.890625 0.96875q0.578125 0.34375 1.25 0.34375q0.765625 0 1.3125 -0.34375q0.5625 -0.34375 0.859375 -1.0l1.5625 0.671875q-0.484375 1.046875 -1.4375 1.65625q-0.9375 0.59375 -2.265625 0.59375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m91.2 240.39362l96.0 0l0 28.409454l-96.0 0z" fill-rule="evenodd"/><path fill="#434343" d="m114.02157 258.83334q3.25 -3.234375 4.0 -4.078125q0.703125 -0.734375 0.953125 -1.1875q0.265625 -0.46875 0.265625 -1.09375q0 -0.640625 -0.484375 -1.109375q-0.484375 -0.46875 -1.328125 -0.46875q-0.765625 0 -1.234375 0.4375q-0.46875 0.4375 -0.65625 1.03125l-1.546875 -0.640625q0.15625 -0.578125 0.59375 -1.140625q0.453125 -0.5625 1.1875 -0.9375q0.734375 -0.390625 1.6875 -0.390625q1.046875 0 1.84375 0.4375q0.796875 0.421875 1.234375 1.15625q0.453125 0.71875 0.453125 1.578125q0 1.734375 -1.75 3.46875q-0.703125 0.703125 -1.578125 1.59375q-0.90625 0.875 -1.359375 1.359375l0.015625 0.046875l4.796875 0l0 1.5625l-7.09375 0l0 -1.625zm9.984146 1.71875q-0.515625 0 -0.875 -0.34375q-0.34375 -0.359375 -0.34375 -0.859375q0 -0.484375 0.34375 -0.828125q0.359375 -0.359375 0.875 -0.359375q0.515625 0 0.859375 0.34375q0.34375 0.34375 0.34375 0.84375q0 0.5 -0.34375 0.859375q-0.34375 0.34375 -0.859375 0.34375zm6.598259 0.15625q-0.8125 0 -1.59375 -0.328125q-0.78125 -0.328125 -1.3750076 -0.984375q-0.578125 -0.671875 -0.8125 -1.640625l1.5468826 -0.609375q0.234375 0.890625 0.796875 1.421875q0.5625 0.53125 1.421875 0.53125q0.90625 0 1.5 -0.578125q0.609375 -0.59375 0.609375 -1.5q0 -0.921875 -0.59375 -1.515625q-0.578125 -0.59375 -1.5 -0.59375q-0.53125 0 -0.984375 0.234375q-0.453125 0.21875 -0.75 0.625l-1.6875076 -0.75l0.65625 -5.5l5.9062576 0l0 1.5625l-4.484375 0l-0.421875 2.9375l0.09375 0.015625q0.875 -0.6875 2.0 -0.6875q0.9375 0 1.734375 0.46875q0.796875 0.46875 1.265625 1.296875q0.484375 0.828125 0.484375 1.890625q0 1.046875 -0.5 1.90625q-0.484375 0.84375 -1.359375 1.328125q-0.875 0.46875 -1.953125 0.46875zm4.684021 -0.25l0 0zm7.712387 0.25q-1.390625 0 -2.296875 -0.59375q-0.90625 -0.609375 -1.265625 -1.59375l1.546875 -0.671875q0.28125 0.65625 0.8125 1.0q0.53125 0.34375 1.203125 0.34375q0.6875 0 1.140625 -0.25q0.46875 -0.25 0.46875 -0.734375q0 -0.453125 -0.390625 -0.71875q-0.390625 -0.265625 -1.21875 -0.453125l-0.96875 -0.21875q-0.984375 -0.25 -1.625 -0.859375q-0.640625 -0.609375 -0.640625 -1.53125q0 -0.703125 0.421875 -1.25q0.421875 -0.546875 1.140625 -0.84375q0.71875 -0.296875 1.5625 -0.296875q1.15625 0 2.0 0.453125q0.859375 0.453125 1.25 1.3125l-1.5 0.671875q-0.484375 -0.96875 -1.734375 -0.96875q-0.609375 0 -1.015625 0.25q-0.40625 0.25 -0.40625 0.640625q0 0.71875 1.25 1.03125l1.171875 0.296875q1.203125 0.296875 1.8125 0.90625q0.625 0.609375 0.625 1.515625q0 0.765625 -0.4375 1.34375q-0.4375 0.578125 -1.21875 0.90625q-0.765625 0.3125 -1.6875 0.3125zm8.654022 0q-1.1875 0 -2.140625 -0.546875q-0.953125 -0.5625 -1.484375 -1.546875q-0.53125 -0.984375 -0.53125 -2.21875q0 -1.171875 0.515625 -2.171875q0.515625 -1.0 1.4375 -1.59375q0.9375 -0.59375 2.109375 -0.59375q1.234375 0 2.125 0.546875q0.890625 0.53125 1.359375 1.484375q0.484375 0.9375 0.484375 2.140625q0 0.3125 -0.03125 0.53125l-6.3125 0q0.125 1.171875 0.84375 1.8125q0.71875 0.625 1.671875 0.625q0.78125 0 1.34375 -0.359375q0.5625 -0.359375 0.90625 -0.953125l1.421875 0.6875q-0.5625 1.015625 -1.5 1.59375q-0.921875 0.5625 -2.21875 0.5625zm2.15625 -5.265625q-0.03125 -0.4375 -0.28125 -0.890625q-0.25 -0.453125 -0.75 -0.734375q-0.484375 -0.296875 -1.203125 -0.296875q-0.859375 0 -1.46875 0.53125q-0.59375 0.515625 -0.8125 1.390625l4.515625 0zm7.170639 5.265625q-1.21875 0 -2.1875 -0.546875q-0.953125 -0.5625 -1.484375 -1.546875q-0.53125 -0.984375 -0.53125 -2.234375q0 -1.25 0.53125 -2.234375q0.53125 -0.984375 1.484375 -1.546875q0.96875 -0.5625 2.1875 -0.5625q1.34375 0 2.28125 0.609375q0.9375 0.59375 1.359375 1.65625l-1.578125 0.640625q-0.578125 -1.3125 -2.09375 -1.3125q-0.671875 0 -1.25 0.34375q-0.5625 0.34375 -0.890625 0.96875q-0.328125 0.625 -0.328125 1.4375q0 0.8125 0.328125 1.4375q0.328125 0.625 0.890625 0.96875q0.578125 0.34375 1.25 0.34375q0.765625 0 1.3125 -0.34375q0.5625 -0.34375 0.859375 -1.0l1.5625 0.671875q-0.484375 1.046875 -1.4375 1.65625q-0.9375 0.59375 -2.265625 0.59375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m139.2 241.87541l0 -28.56694" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m139.2 241.87541l0 -20.986938" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m139.2 214.30849c1.8170166 0 3.2899933 1.4729767 3.2899933 3.2899933c0 1.8170166 -1.4729767 3.2899933 -3.2899933 3.2899933c-1.8170166 0 -3.2899933 -1.4729767 -3.2899933 -3.2899933c0 -1.8170166 1.4729767 -3.2899933 3.2899933 -3.2899933z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m48.00492 115.2l288.0 0l0 28.7874l-288.0 0z" fill-rule="evenodd"/><path fill="#666666" d="m85.778755 122.4812l1.703125 0l0 12.6875l6.265625 0l0 1.625l-7.96875 0l0 -14.3125zm13.101868 14.625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm7.19812 -9.015625l1.609375 0l0 1.640625l0.078125 0q0.3125 -0.84375 1.171875 -1.390625q0.859375 -0.546875 1.796875 -0.546875q0.703125 0 1.203125 0.203125l0 1.84375q-0.640625 -0.328125 -1.4375 -0.328125q-0.75 0 -1.375 0.421875q-0.609375 0.421875 -0.984375 1.140625q-0.375 0.703125 -0.375 1.515625l0 5.703125l-1.6875 0l0 -10.203125zm11.46875 14.84375q-1.796875 0 -2.96875 -0.84375q-1.171875 -0.84375 -1.5625 -2.015625l1.5625 -0.65625q0.3125 0.875 1.09375 1.421875q0.796875 0.546875 1.875 0.546875q1.578125 0 2.453125 -0.921875q0.875 -0.90625 0.875 -2.59375l0 -1.140625l-0.078125 0q-0.5 0.78125 -1.421875 1.28125q-0.90625 0.484375 -2.0625 0.484375q-1.3125 0 -2.40625 -0.671875q-1.09375 -0.6875 -1.734375 -1.90625q-0.640625 -1.21875 -0.640625 -2.78125q0 -1.546875 0.640625 -2.765625q0.640625 -1.234375 1.734375 -1.90625q1.09375 -0.6875 2.40625 -0.6875q1.15625 0 2.0625 0.484375q0.921875 0.484375 1.421875 1.296875l0.078125 0l0 -1.46875l1.625 0l0 9.796875q0 2.46875 -1.375 3.75q-1.359375 1.296875 -3.578125 1.296875zm0 -5.984375q0.921875 0 1.671875 -0.453125q0.75 -0.46875 1.203125 -1.328125q0.453125 -0.859375 0.453125 -2.03125q0 -1.203125 -0.453125 -2.0625q-0.453125 -0.859375 -1.203125 -1.3125q-0.75 -0.453125 -1.671875 -0.453125q-0.921875 0 -1.6875 0.46875q-0.75 0.453125 -1.203125 1.3125q-0.4375 0.859375 -0.4375 2.046875q0 1.171875 0.4375 2.046875q0.453125 0.875 1.203125 1.328125q0.765625 0.4375 1.6875 0.4375zm11.902489 1.65625q-1.453125 0 -2.6250076 -0.6875q-1.15625 -0.703125 -1.8125 -1.9375q-0.640625 -1.234375 -0.640625 -2.765625q0 -1.46875 0.609375 -2.71875q0.609375 -1.25 1.734375 -1.984375q1.1406326 -0.734375 2.5937576 -0.734375q1.5 0 2.59375 0.671875q1.109375 0.65625 1.703125 1.84375q0.59375 1.1875 0.59375 2.703125q0 0.234375 -0.046875 0.515625l-8.078133 0q0.0625 1.15625 0.5625 1.96875q0.5 0.796875 1.2656326 1.203125q0.765625 0.390625 1.609375 0.390625q2.0 0 3.015625 -1.84375l1.4375 0.703125q-0.625 1.21875 -1.765625 1.953125q-1.140625 0.71875 -2.75 0.71875zm2.9375 -6.5q-0.03125 -0.625 -0.359375 -1.265625q-0.3125 -0.640625 -1.0 -1.078125q-0.671875 -0.453125 -1.71875 -0.453125q-1.203125 0 -2.0468826 0.78125q-0.828125 0.765625 -1.09375 2.015625l6.2187576 0zm7.4381256 6.5q-1.625 0 -2.734375 -0.765625q-1.09375 -0.765625 -1.5625 -1.96875l1.53125 -0.671875q0.375 0.90625 1.125 1.40625q0.75 0.5 1.640625 0.5q0.96875 0 1.640625 -0.375q0.6875 -0.390625 0.6875 -1.125q0 -0.625 -0.546875 -1.015625q-0.53125 -0.390625 -1.6875 -0.671875l-1.25 -0.328125q-1.21875 -0.296875 -2.0 -1.015625q-0.78125 -0.71875 -0.78125 -1.859375q0 -0.875 0.53125 -1.546875q0.53125 -0.671875 1.40625 -1.03125q0.890625 -0.359375 1.90625 -0.359375q1.34375 0 2.390625 0.578125q1.046875 0.578125 1.484375 1.625l-1.46875 0.671875q-0.6875 -1.359375 -2.421875 -1.359375q-0.84375 0 -1.484375 0.390625q-0.625 0.390625 -0.625 0.984375q0 0.5625 0.4375 0.921875q0.453125 0.34375 1.328125 0.5625l1.484375 0.375q1.5 0.390625 2.25 1.140625q0.765625 0.75 0.765625 1.828125q0 0.9375 -0.546875 1.65625q-0.53125 0.703125 -1.453125 1.078125q-0.921875 0.375 -2.046875 0.375zm9.734985 -0.15625q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm2.132492 -0.15625l0 0zm12.5525055 0.3125q-2.078125 0 -3.78125 -0.96875q-1.6875 -0.984375 -2.65625 -2.6875q-0.96875 -1.71875 -0.96875 -3.8125q0 -2.109375 0.96875 -3.8125q0.96875 -1.71875 2.65625 -2.6875q1.703125 -0.984375 3.78125 -0.984375q1.609375 0 2.9375 0.609375q1.328125 0.59375 2.3125 1.734375l-1.21875 1.171875q-0.828125 -0.96875 -1.796875 -1.421875q-0.96875 -0.46875 -2.234375 -0.46875q-1.546875 0 -2.859375 0.734375q-1.296875 0.71875 -2.0625 2.046875q-0.765625 1.328125 -0.765625 3.078125q0 1.734375 0.765625 3.0625q0.765625 1.328125 2.0625 2.0625q1.3125 0.734375 2.859375 0.734375q2.609375 0 4.421875 -2.140625l1.25 1.203125q-0.984375 1.171875 -2.453125 1.859375q-1.46875 0.6875 -3.21875 0.6875zm12.060623 0q-1.5 0 -2.703125 -0.71875q-1.1875 -0.71875 -1.859375 -1.953125q-0.671875 -1.234375 -0.671875 -2.734375q0 -1.5 0.671875 -2.734375q0.671875 -1.25 1.859375 -1.96875q1.203125 -0.71875 2.703125 -0.71875q1.5 0 2.703125 0.71875q1.203125 0.71875 1.875 1.96875q0.671875 1.234375 0.671875 2.734375q0 1.5 -0.671875 2.734375q-0.671875 1.234375 -1.875 1.953125q-1.203125 0.71875 -2.703125 0.71875zm0 -1.53125q0.953125 0 1.75 -0.46875q0.8125 -0.46875 1.296875 -1.34375q0.5 -0.890625 0.5 -2.0625q0 -1.1875 -0.5 -2.0625q-0.484375 -0.890625 -1.296875 -1.359375q-0.796875 -0.46875 -1.75 -0.46875q-0.9375 0 -1.765625 0.46875q-0.8125 0.46875 -1.296875 1.359375q-0.484375 0.875 -0.484375 2.0625q0 1.171875 0.484375 2.0625q0.484375 0.875 1.296875 1.34375q0.828125 0.46875 1.765625 0.46875zm7.032486 -8.984375l1.609375 0l0 1.5l0.078125 0q0.421875 -0.75 1.34375 -1.28125q0.921875 -0.53125 1.96875 -0.53125q1.828125 0 2.796875 1.078125q0.984375 1.0625 0.984375 2.890625l0 6.546875l-1.703125 0l0 -6.28125q0 -1.421875 -0.6875 -2.0625q-0.671875 -0.640625 -1.859375 -0.640625q-0.8125 0 -1.46875 0.46875q-0.640625 0.453125 -1.015625 1.203125q-0.359375 0.75 -0.359375 1.578125l0 5.734375l-1.6875 0l0 -10.203125zm14.641861 10.359375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm7.4893646 0.15625q-1.453125 0 -2.625 -0.6875q-1.15625 -0.703125 -1.8125 -1.9375q-0.640625 -1.234375 -0.640625 -2.765625q0 -1.46875 0.609375 -2.71875q0.609375 -1.25 1.734375 -1.984375q1.140625 -0.734375 2.59375 -0.734375q1.5 0 2.59375 0.671875q1.109375 0.65625 1.703125 1.84375q0.59375 1.1875 0.59375 2.703125q0 0.234375 -0.046875 0.515625l-8.078125 0q0.0625 1.15625 0.5625 1.96875q0.5 0.796875 1.265625 1.203125q0.765625 0.390625 1.609375 0.390625q2.0 0 3.015625 -1.84375l1.4375 0.703125q-0.625 1.21875 -1.765625 1.953125q-1.140625 0.71875 -2.75 0.71875zm2.9375 -6.5q-0.03125 -0.625 -0.359375 -1.265625q-0.3125 -0.640625 -1.0 -1.078125q-0.671875 -0.453125 -1.71875 -0.453125q-1.203125 0 -2.046875 0.78125q-0.828125 0.765625 -1.09375 2.015625l6.21875 0zm3.7912445 -4.015625l1.609375 0l0 1.5l0.078125 0q0.421875 -0.75 1.34375 -1.28125q0.921875 -0.53125 1.96875 -0.53125q1.828125 0 2.796875 1.078125q0.984375 1.0625 0.984375 2.890625l0 6.546875l-1.703125 0l0 -6.28125q0 -1.421875 -0.6875 -2.0625q-0.671875 -0.640625 -1.859375 -0.640625q-0.8125 0 -1.46875 0.46875q-0.640625 0.453125 -1.015625 1.203125q-0.359375 0.75 -0.359375 1.578125l0 5.734375l-1.6875 0l0 -10.203125zm14.641861 10.359375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l4.640625 0l0 -1.09375q0 -0.96875 0.421875 -1.6875q0.4375 -0.71875 1.1875 -1.109375q0.75 -0.390625 1.640625 -0.390625q0.828125 0 1.5 0.25l0 1.65625q-0.390625 -0.15625 -0.703125 -0.234375q-0.3125 -0.09375 -0.75 -0.09375q-0.671875 0 -1.15625 0.484375q-0.46875 0.46875 -0.46875 1.296875l0 0.921875l2.625 0l0 1.546875l-2.625 0l0 8.65625l-1.671875 0l0 -8.65625l-4.640625 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm13.38562 0.15625q-1.828125 0 -2.796875 -1.078125q-0.96875 -1.078125 -0.96875 -3.015625l0 -6.421875l1.6875 0l0 6.15625q0 1.46875 0.65625 2.15625q0.671875 0.671875 1.78125 0.671875q0.875 0 1.53125 -0.453125q0.671875 -0.46875 1.046875 -1.203125q0.375 -0.75 0.375 -1.5625l0 -5.765625l1.6875 0l0 10.203125l-1.609375 0l0 -1.484375l-0.078125 0q-0.421875 0.765625 -1.34375 1.28125q-0.921875 0.515625 -1.96875 0.515625zm7.532486 -14.625l1.6875 0l0 14.3125l-1.6875 0l0 -14.3125zm2.9543762 14.3125l0 0zm6.233734 -14.3125l4.828125 0q1.203125 0 2.21875 0.546875q1.015625 0.53125 1.625 1.5q0.609375 0.96875 0.609375 2.1875q0 1.21875 -0.609375 2.1875q-0.609375 0.96875 -1.625 1.515625q-1.015625 0.53125 -2.21875 0.53125l-3.125 0l0 5.84375l-1.703125 0l0 -14.3125zm4.859375 6.859375q0.8125 0 1.421875 -0.375q0.609375 -0.390625 0.9375 -0.984375q0.34375 -0.609375 0.34375 -1.265625q0 -0.65625 -0.34375 -1.25q-0.328125 -0.609375 -0.9375 -0.984375q-0.609375 -0.390625 -1.421875 -0.390625l-3.15625 0l0 5.25l3.15625 0zm9.182495 7.765625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm8.19812 -10.890625q-0.5 0 -0.859375 -0.359375q-0.359375 -0.359375 -0.359375 -0.859375q0 -0.515625 0.359375 -0.859375q0.359375 -0.359375 0.859375 -0.359375q0.515625 0 0.859375 0.359375q0.359375 0.34375 0.359375 0.859375q0 0.5 -0.359375 0.859375q-0.34375 0.359375 -0.859375 0.359375zm-0.84375 1.875l1.703125 0l0 10.203125l-1.703125 0l0 -10.203125zm4.363739 0l1.609375 0l0 1.5l0.078125 0q0.421875 -0.75 1.34375 -1.28125q0.921875 -0.53125 1.96875 -0.53125q1.828125 0 2.796875 1.078125q0.984375 1.0625 0.984375 2.890625l0 6.546875l-1.703125 0l0 -6.28125q0 -1.421875 -0.6875 -2.0625q-0.671875 -0.640625 -1.859375 -0.640625q-0.8125 0 -1.46875 0.46875q-0.640625 0.453125 -1.015625 1.203125q-0.359375 0.75 -0.359375 1.578125l0 5.734375l-1.6875 0l0 -10.203125zm14.641876 10.359375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m244.8 241.37184l0 -28.283463" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m244.79999 241.37184l0 -20.703476" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m244.79999 214.08838c1.8170166 0 3.2900085 1.4729767 3.2900085 3.2899933c0 1.8170166 -1.472992 3.2900085 -3.2900085 3.2900085c-1.8170166 0 -3.2899933 -1.472992 -3.2899933 -3.2900085c0 -1.8170166 1.4729767 -3.2899933 3.2899933 -3.2899933z" fill-rule="nonzero"/></g></svg>

ทั้ง 2 หน้าจะโหลดscript.jsทรัพยากรที่ Glitch สร้างขึ้นโดยค่าเริ่มต้น ดังนั้นให้แทนที่เนื้อหาของไฟล์นั้นด้วยเนื้อหาต่อไปนี้

function blockPause(milliseconds) {
  const start = performance.now();
  let lastCheck = start;
  let lastTime = 0;
  // Synchronous blocking is NOT best practice at all, but is what we want here
  // Don't do this on your real site please!
  while(performance.now() - start < milliseconds) {
    // Log once a second
    lastTime = performance.now() - lastCheck
    if (lastTime >= 1000) {
      console.log(`Still blocking ${Math.round(performance.now() - start, 0)} ms out of ${milliseconds} ms`);
      lastCheck = performance.now();
    }
  }
}

// Load web-vitals.js and log LCP updates to console
var script = document.createElement('script');
script.src = 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.iife.js';
script.onload = function () {
  window.webVitals.onLCP(({value}) => {
    console.log(`LCP time: ${Math.round(value)} ms`);
  }, {reportAllChanges: true});
};
document.head.appendChild(script);

// Block page for 3 seconds to simulate a slow loading page
console.log('Simulate slow loading page by blocking page;');
blockPause(3000);
console.log('Page loaded');

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

เมื่อเปิดคอนโซล DevTools แล้ว คุณจะเห็นบันทึกคอนโซลจาก script.js ดังนี้

ภาพหน้าจอของหน้า 2 จากเว็บไซต์เดโมที่เปิด DevTools แสดงข้อความการบล็อกบางอย่าง จากนั้นแสดง LCP ที่ 3,658 มิลลิวินาที

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

4. เพิ่มกฎการคาดคะเนรายการ URL

กฎการคาดคะเนแรกที่คุณจะเพิ่มคือการแสดงผลล่วงหน้าของรายการ URL ที่ฮาร์ดโค้ด

ทำซ้ำเอกสาร index.html โดยคลิกเมนู 3 จุดที่ปรากฏขึ้นเมื่อวางเมาส์เหนือชื่อใน Glitch

ตัวเลือกไฟล์ที่ซ้ำกันใน Glitch

ป้อนชื่อใหม่ของ page1-url-speculations.html

กฎการคาดเดาคือแท็ก <script> ที่จัดรูปแบบ JSON พร้อมด้วย type="speculationrules"

แก้ไขไฟล์ page1-url-speculations.html แล้วเพิ่มโค้ดต่อไปนี้ลงในหน้าเว็บ ไม่ว่าคุณจะวางไว้ที่ใดก็ตาม แต่การวางไว้ก่อนแท็กปิดของส่วนเนื้อหา (</body>) จะช่วยให้ระบบประมวลผลส่วนอื่นๆ ของหน้าเว็บก่อนได้

<script type="speculationrules">
  {
    "prerender": [
      {
        "urls": ["page2.html", "page3.html"]
      }
    ]
  }
</script>

เพียงเท่านี้ก็เรียบร้อยแล้ว เพียงเท่านี้ก็เพิ่มการโหลดทันทีลงในหน้าเว็บได้แล้ว

กฎนี้ระบุให้แสดงผลล่วงหน้า URLpage2.html และ page3.html เพื่อให้ทั้ง 2 หน้าโหลดในเบื้องหลัง พร้อมสำหรับเมื่อผู้ใช้คลิกลิงก์ใดลิงก์หนึ่ง

5. ดูการบังคับใช้กฎการคาดเดา

มาดูการใช้งานจริงกัน หากคุณโหลดหน้า page1-url-speculations.html คุณจะเห็นว่าไม่มีอะไรแตกต่างจากหน้า index.html เดิม อย่างไรก็ตาม ในเบื้องหลัง Chrome ได้เริ่มแสดงผลล่วงหน้าสำหรับ page2.html และ page3.html แล้ว คุณสามารถคิดว่าแท็บเหล่านี้เป็นแท็บพื้นหลังที่ซ่อนอยู่ เมื่อคลิกลิงก์แล้ว Chrome จะสลับหน้าปัจจุบันกับหน้าที่แสดงผลล่วงหน้า หากรอจนกระทั่งผ่านไปอย่างน้อย 3 วินาทีหลังจากโหลดและคลิกลิงก์ คุณจะเห็นว่าลิงก์โหลดทันทีโดยมี LCP ใกล้ 0

ที่นี่คุณจะเห็น LCP 50 มิลลิวินาที ซึ่งเร็วกว่าเกณฑ์ "ดี" ที่แนะนำซึ่งอยู่ที่ 2.5 วินาทีมาก และผู้ใช้ส่วนใหญ่จะรับรู้ว่า "รวดเร็ว"

ลองเปรียบเทียบกับหน้าแรกหลักใน index.html ซึ่งการไปยังหน้าต่างๆ จะรู้สึกช้าและไม่ตอบสนอง

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

หากคลิกก่อนที่เวลาในการโหลด 3 วินาทีจะครบ หน้าเว็บที่โหลดบางส่วนจะแทนที่หน้าเว็บปัจจุบัน และคุณจะเห็นข้อความการบล็อกที่เหลือในคอนโซล

ภาพหน้าจอที่คล้ายกันของหน้า 2 เหมือนกับภาพก่อนหน้า แต่มีการบันทึกคอนโซลเพียงครึ่งเดียว

Chrome จะโหลดให้เสร็จสิ้นต่อหน้าผู้ใช้ และคุณจะเห็น LCP 1 วินาที ซึ่งไม่ดีเท่าความรู้สึกที่แทบจะทันที 50 มิลลิวินาทีเมื่อมีการแสดงผลล่วงหน้าอย่างเต็มรูปแบบ แต่ก็ยังดีกว่า 3 วินาทีสำหรับการโหลดหน้าเว็บที่ไม่ได้แสดงผลล่วงหน้าเลย การเริ่มต้นก่อนยังคงช่วยปรับปรุงการโหลดหน้าเว็บได้อย่างเห็นได้ชัด

6. การแก้ไขข้อบกพร่องด้วย JavaScript

คุณสามารถใช้ JavaScript เพื่อลงทะเบียนตัวแฮนเดิลเหตุการณ์ให้เริ่มทำงานเมื่อเปิดใช้งานหน้าเว็บ

เพิ่มโค้ดต่อไปนี้ลงในไฟล์ script.js ก่อนบรรทัด // Block page for 3 seconds to simulate a slow loading page

// Load when the page is activated
document.addEventListener('prerenderingchange', () => {
  console.log(`The page has been activated!`);
  
  const activationStart = Math.round(performance.getEntriesByType('navigation')[0].activationStart);
  console.log(`The page was activated at: ${activationStart}`);
});

หากกลับไปที่หน้า page1-url-speculations.html ให้รอสักครู่เพื่อให้หน้าเว็บแสดงผลล่วงหน้า แล้วคลิกลิงก์ใดลิงก์หนึ่ง คุณควรเห็นภาพหน้าจอคล้ายกับภาพต่อไปนี้

คอนโซล DevTools แสดงข้อความบันทึกเมื่อเปิดใช้งานหน้าเว็บ

ที่นี่คุณจะเห็นว่าหน้าเว็บเปิดใช้งานที่ 4,298 มิลลิวินาทีหลังจากที่หน้าเว็บเริ่มโหลด ซึ่งช่วยให้โหลดหน้าเว็บได้เร็วกว่าเดิมถึง 4 วินาที

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

นอกจากนี้ คุณยังเห็นว่าเวลาเปิดใช้งานคือ 4,298 มิลลิวินาทีในตัวอย่างนี้ แต่เวลา LCP สั้นกว่านั้นมากที่ 128 มิลลิวินาที การวัดเวลาทั้งหมดสำหรับเมตริกประสิทธิภาพจะอิงตามเวลาที่หน้าเว็บเริ่มโหลด แต่ไลบรารี web-vitals ที่ใช้บันทึก LCP มีตรรกะพิเศษในการลบactivationStartเวลาเพื่อวัด LCP เท่าที่ผู้ใช้กังวล นอกจากนี้ รายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) ยังคำนวณ LCP ในลักษณะนี้ด้วย ซึ่งเป็นสิ่งที่ขับเคลื่อนเครื่องมือต่างๆ เช่น PageSpeed Insights และรายงาน Core Web Vitals ใน Google Search Console

เคล็ดลับ: prerenderingchange ยังเป็นวิธีที่ยอดเยี่ยมในการเรียกใช้โค้ดบางอย่างเมื่อเปิดใช้งานหน้าเว็บ หากคุณไม่ต้องการให้โค้ดนั้นทำงานขณะที่หน้าเว็บกำลังแสดงผลล่วงหน้า แต่ก่อนที่จะมีการเข้าชมหน้าเว็บ เช่น Analytics และ Google Ads เป็น 2 กิจกรรมที่คุณอาจต้องการหน่วงเวลา ผู้ให้บริการวิเคราะห์และโฆษณาบางราย เช่น Google Analytics และแท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT) จะหน่วงเวลาโดยอัตโนมัติจนกว่าจะมีการเปิดใช้งาน แต่ผู้ให้บริการรายอื่นๆ หรือโค้ดที่กำหนดเองอาจไม่หน่วงเวลา เราจะไม่กล่าวถึงเรื่องนี้ใน Codelab นี้ แต่หากต้องการทราบรายละเอียดเพิ่มเติม โปรดดูส่วนผลกระทบต่อ Analytics ในเอกสารประกอบ

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

การบันทึกคอนโซลเป็นวิธีหนึ่งในการแก้ไขข้อบกพร่อง (ใครๆ ก็ชอบconsole.logแบบเก่าๆ ในการแก้ไขข้อบกพร่อง) แต่ Chrome มีการรองรับที่ยอดเยี่ยมในเครื่องมือสำหรับนักพัฒนาเว็บในการแก้ไขข้อบกพร่องของกฎการคาดคะเน

กลับไปที่หน้า page1-url-speculations.html แล้วเปิดแผงแอปพลิเคชัน จากนั้นไปที่แท็บการโหลดแบบคาดการณ์ในส่วนบริการในเบื้องหลัง

แท็บการโหลดแบบคาดเดาของเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

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

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

8. การคาดเดาลิงก์อัตโนมัติด้วยกฎของเอกสาร

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

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

ทำซ้ำไฟล์ index.html เป็นไฟล์ page1-document-speculations.html อีกครั้ง แล้วคราวนี้ให้เพิ่มกฎต่อไปนี้อีกครั้งก่อนแท็กปิด </body> หากเป็นตำแหน่งที่เหมาะสม

<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": {"selector_matches": ".do-not-prerender"}}
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

ซึ่งหมายความว่าให้แสดงผลล่วงหน้าลิงก์ทั้งหมดที่มาจากต้นทางเดียวกัน (ขึ้นต้นด้วย /*) ยกเว้นในกรณีที่องค์ประกอบ <a> มีคลาส do-not-prerender ในตัวอย่างนี้ ระบบจะแสดงหน้าเว็บล่วงหน้าด้วยความกระตือรือร้นระดับ moderate (ซึ่งเราจะพูดถึงในหน้าถัดไป)

เมื่อไปที่หน้าดังกล่าว คุณจะเห็นการคาดการณ์ที่เป็นไปได้ 2 รายการและทั้ง 2 รายการไม่ทริกเกอร์

แท็บการคาดคะเนของเครื่องมือสำหรับนักพัฒนาเว็บแสดง 2 หน้าที่ไม่ได้ทริกเกอร์

การวางเมาส์เหนือลิงก์ใดลิงก์หนึ่งจะทำให้เกิดการคาดเดา ดังนี้

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

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

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

9. ความกระตือรือร้นของผู้ใช้ในการระบุเวลาที่ควรคาดการณ์

ในขั้นตอนก่อนหน้ามีการใช้ "eagerness": "moderate" การตั้งค่าความกระตือรือร้นมี 4 แบบดังนี้

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

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

ทดสอบในหน้าเว็บด้วยการตั้งค่าความกระตือรือร้นต่างๆ โดยใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อดูว่าการคาดการณ์เกิดขึ้นเมื่อใด

10. บทสรุป

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

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

ดูหัวข้อขั้นสูงเพิ่มเติม รวมถึงข้อควรพิจารณาที่คุณอาจต้องคำนึงถึงสําหรับ Analytics หรือโฆษณาได้ที่ลิงก์ดูข้อมูลเพิ่มเติมด้านล่าง

ดูข้อมูลเพิ่มเติม

ความคิดเห็น

เรายินดีรับฟังความคิดเห็นเกี่ยวกับ Codelab นี้ และหากคุณมีคำถามหรือข้อกังวลใดๆ

คุณจะค้นหา Codelab นี้ได้อย่างไร

ไม่มีประโยชน์สำหรับฉัน

มีประโยชน์พอสมควร

มีประโยชน์มาก