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

1. บทนำ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

คัดลอกและวางเนื้อหาต่อไปนี้ลงใน 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

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

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

กฎการคาดการณ์คือแท็กที่จัดรูปแบบ JSON ซึ่งมี <script> พร้อมด้วย 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 เกือบเป็นศูนย์

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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>

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

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

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

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

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

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

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

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

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

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

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

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

10. บทสรุป

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

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

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

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

ความคิดเห็น

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

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

ไม่เป็นประโยชน์กับฉันเลย

เป็นประโยชน์ปานกลาง

เป็นประโยชน์มาก