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

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

1. บทนำ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

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

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

10. บทสรุป

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

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

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

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

ความคิดเห็น

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

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

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

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

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