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

1. บทนำ

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

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

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

  • ความรู้ระดับเริ่มต้นเกี่ยวกับ HTML และ JavaScript

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

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

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

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

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

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

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

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

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

สร้างเว็บไซต์โดยรีมิกซ์เว็บไซต์ Glitch Basic

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

เว็บไซต์พื้นฐาน 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!
  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

Speculation Rules คือแท็ก <script> ที่จัดรูปแบบ JSON โดยมี type="speculationrules"

แก้ไขไฟล์ page1-url-speculations.html และเพิ่มโค้ดต่อไปนี้ลงในหน้าเว็บ คุณจะวางไว้ที่ใดก็ได้ แต่การวางไว้ก่อนแท็กปิด body (</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 มิลลิวินาที

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

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

ในที่นี้ คุณจะเห็นว่าหน้าเว็บเปิดใช้งานที่ 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

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 นี้ รวมถึงคำถามหรือข้อกังวลที่คุณอาจมี

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

ไม่ค่อยมีประโยชน์สำหรับฉัน มีประโยชน์พอสมควร มีประโยชน์มาก