หน้านี้ได้รับการแปลโดย Cloud Translation API

ใช้การไปยังส่วนต่างๆ ได้ทันทีด้วย 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 Basic

คุณควรได้เว็บไซต์พื้นฐานดังนี้

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

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

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

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

3. สร้างเว็บไซต์เดโม

แทนที่เนื้อหาของไฟล์ index.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>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 ในข้อบกพร่องโดยคลิกปุ่มไฟล์ + ทางด้านซ้าย พิมพ์ 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 โหลดช้าเนื่องจากมีการบล็อกเทรดหลักปลอม

เมื่อเปิดคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บไว้ คุณจะเห็นบันทึกของคอนโซลจาก script.js ดังนี้

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

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

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

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

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

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

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

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

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

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

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

กฎนี้กำหนดว่าให้แสดงผลล่วงหน้า URL page2.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 วินาทีสำหรับการโหลดหน้าเว็บที่ไม่ได้แสดงผลล่วงหน้าเลย Head Start ยังคงปรับปรุงการโหลดหน้าเว็บให้ดีขึ้นอย่างเห็นได้ชัด

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 แล้วรอ 2-3 วินาทีเพื่อให้หน้าแสดงผลล่วงหน้า จากนั้นคลิกลิงก์ใดลิงก์หนึ่ง คุณจะเห็นตัวอย่างหน้าจอต่อไปนี้

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

กล่าวคือ การแสดงผลลิงก์ต้นทางเดียวกันทั้งหมดล่วงหน้า (เริ่มต้นด้วย /*) ยกเว้นในกรณีที่คลาสของ do-not-prerender อยู่ในองค์ประกอบ <a> ในตัวอย่างนี้ หน้าเว็บมีการแสดงผลล่วงหน้าด้วย 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 จึงอาจคาดเดาให้เร็วที่สุดเท่าที่จะทำได้เพื่อให้ได้เวลาในการส่งมอบมากที่สุด โดยทั่วไปแล้ว moderate และ conservative จะมีประโยชน์มากกว่าสำหรับกฎของเอกสารซึ่งมักจะไม่ทราบ URL ที่แน่นอนที่จะคาดเดา

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

10. บทสรุป

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

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

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

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

ความคิดเห็น

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

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

ไม่ค่อยมีประโยชน์กับฉัน

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

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