এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

স্পেকুলেশন রুলস এপিআই দিয়ে তাত্ক্ষণিক নেভিগেশন অর্জন করুন

১. ভূমিকা

স্পেকুলেশন রুলস এপিআই (Speculation Rules API) ব্যবহার করে প্রি-রেন্ডারিংয়ের মাধ্যমে কীভাবে তাৎক্ষণিক নেভিগেশন অর্জন করা যায়, তা শেখার জন্য একটি ইন্টারেক্টিভ ডেমো এবং কোডল্যাব।

কোডল্যাবটি সম্পূর্ণ করতে আনুমানিক ৩০ মিনিট সময় লাগবে এবং আপনি স্ক্রিনের উপরে অবশিষ্ট সময় দেখতে পারবেন।

পূর্বশর্ত

এইচটিএমএল ও জাভাস্ক্রিপ্ট বিষয়ে প্রাথমিক জ্ঞান।

আপনি যা শিখবেন

ওয়েবসাইটে কীভাবে স্পেকুলেটিভ লোডিং যুক্ত করবেন।
ক্রোম ডেভটুলস ব্যবহার করে স্পেকুলেশন সংক্রান্ত সমস্যা কীভাবে ডিবাগ করবেন।

তোমার যা দরকার

ক্রোম ১২৩ বা তার পরবর্তী সংস্করণ।
একটি ওয়েবসাইট চালানো বা প্রকাশ করার ক্ষমতা (উদাহরণটিতে গ্লিচ ব্যবহার করা হয়েছে, কিন্তু যেকোনো অনুরূপ পরিষেবা বা স্থানীয়ভাবে চালিত ওয়েব সার্ভার দিয়েও কাজ হবে)।

প্রস্তুত? তাহলে শুরু করা যাক!

২. আপনার পরিবেশ প্রস্তুত করুন

এই ডেমোতে আপনার প্রথম ধাপ হলো গ্লিচ- এ ৩টি পেজ সহ একটি টেস্ট সাইট তৈরি করা:

পৃষ্ঠা ১ হলো মূল পাতা, যেখানে পৃষ্ঠা ২ এবং পৃষ্ঠা ৩-এর লিঙ্ক রয়েছে।
পৃষ্ঠা ২- এ একটি ব্লকিং স্ক্রিপ্ট ব্যবহার করা হয়েছে, যা একটি ধীরগতির লোডিং পৃষ্ঠার অনুকরণ করে। পৃষ্ঠাটির লোডিং সময়ের পরিমাপ হিসেবে আপনি লার্জেস্ট কন্টেন্টফুল পেইন্ট (LCP) সময়টিও কনসোলে লগ করবেন।
পৃষ্ঠা ৩ হলো পৃষ্ঠা ২-এর প্রায় হুবহু একটি অনুলিপি, তবে এবার এতে একটি ইমেজ এলসিপি (LCP) রয়েছে, ফলে ডেমোটিতে দুটি লিঙ্ক থাকবে।

এর পরিবর্তে যদি আপনার নিজের কোনো ডেমো সাইট থাকে যা নিয়ে আপনি কাজ করতে চান, তাহলে নির্দ্বিধায় সেখানেও সমতুল্য ধাপগুলো অনুসরণ করতে পারেন।

গ্লিচ ব্যবহার করার জন্য আপনার একটি গ্লিচ অ্যাকাউন্ট থাকতে হবে। এছাড়াও আপনি এই পেজগুলো একটি লোকাল ডেভেলপমেন্ট সার্ভার থেকে পরিবেশন করতে পারেন, অথবা অন্য কোনো প্ল্যাটফর্ম/পরিষেবা ব্যবহার করতে পারেন যদি সেটির পদ্ধতি সম্পর্কে আপনার ধারণা থাকে (সেই বিকল্পগুলো এখানে আলোচনা করা হয়নি)।

গ্লিচ বেসিক ওয়েবসাইটটি রিমিক্স করে ওয়েবসাইটটি তৈরি করুন।

এটি আপনাকে সাইটের মূল ধারণাটি দেবে:

গ্লিচ হ্যালো ওয়ার্ল্ড বেসিক সাইট

গ্লিচ আপনার প্রজেক্টকে একটি র‍্যান্ডম নাম দেয় (এই উদাহরণে open-chalk-asparagus.glitch.me ), এবং আপনি glitch.me তে প্রজেক্টের নামটি দিয়ে সেটিকে একটি সাবডোমেইন হিসেবে দেখতে পারেন। এই উদাহরণে, এটি https://open-chalk-asparagus.glitch.me/ -এ রয়েছে।

আপনি বাম দিকের তালিকা থেকে নতুন ফাইল নির্বাচন করে যোগ করতে পারেন এবং ডানদিকে সেগুলোর বিষয়বস্তু সম্পাদনা করতে পারেন। নিচের প্রিভিউ বোতামে ক্লিক করলে আপনি একটি সাইড প্যানে বা একটি নতুন উইন্ডোতে প্রিভিউ দেখতে পারবেন।

আপনার পরিবেশ এখন প্রস্তুত, এবং আপনি আপনার ডেমো সাইট সেট আপ করার জন্য পরবর্তী ধাপে যেতে পারেন।

৩. ডেমো সাইট তৈরি করুন

কয়েকটি লিঙ্ক সহ একটি সাধারণ পৃষ্ঠা তৈরি করতে index.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>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 পৃষ্ঠাটি তৈরি করতে, বাম দিকের 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 , যার মধ্যে নিম্নলিখিত বিষয়বস্তু থাকবে (এটি প্রায় ২ নং পৃষ্ঠার মতোই, তবে আমরা এতে একটি ছবি যোগ করেছি):

<!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>

পৃষ্ঠা ৩-এ একটি 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>

উভয় পৃষ্ঠাই একটি script.js রিসোর্স লোড করে, যা গ্লিচ দ্বারা ডিফল্টরূপে তৈরি হয়, তাই সেই ফাইলের বিষয়বস্তু নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন:

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');

এর মাধ্যমে, আপনার ডেমো সাইটটি সেট আপ হয়ে যাবে। এটি কেমন তা বোঝার জন্য বিভিন্ন জায়গায় ক্লিক করে দেখুন। আপনি লক্ষ্য করবেন যে, মেইন থ্রেডকে কৃত্রিমভাবে ব্লক করার কারণে ২ এবং ৩ নম্বর পেজ লোড হতে দেরি হচ্ছে।

DevTools কনসোল খোলা থাকলে, আপনি script.js থেকে কনসোল লগগুলো দেখতে পারবেন:

ডেমো সাইটের ২ নং পৃষ্ঠার স্ক্রিনশট, যেখানে DevTools খোলা অবস্থায় একটি ব্লকিং মেসেজ এবং তারপর ৩,৬৫৮ মিলিসেকেন্ডের একটি LCP দেখা যাচ্ছে।

আপনি ব্লকিং, ডিবাগ মেসেজগুলো দেখতে পাচ্ছেন, এবং এটাও দেখতে পাচ্ছেন যে আমাদের ডামি ব্লকিং ফাংশন দ্বারা মেইন থ্রেড ব্লক হয়ে যাওয়ার কারণে এই পেজটির LCP প্রদর্শন করতে ৩,৬৫৮ মিলিসেকেন্ড সময় লেগেছে। ডামি ব্লকিং ফাংশনের কারণে এটি একটি ধীরগতির পেজ, কিন্তু এটি এমন একটি পেজকে প্রতিনিধিত্ব করে যা যেকোনো কারণেই হোক ধীরে লোড হয়। চলুন দেখি Speculation Rules API ব্যবহার করে কীভাবে এর গতি বাড়ানো যায়।

৪. ইউআরএল তালিকা অনুমানের নিয়ম যোগ করুন

প্রথম যে স্পেকুলেশন রুলটি আপনি যোগ করবেন, তা হলো হার্ডকোডেড URL-গুলোর তালিকাটিকে প্রি-রেন্ডার করা।

গ্লিচ-এ নামের উপর মাউস রাখলে যে তিনটি ডট মেনু দেখা যায়, সেটিতে ক্লিক করে index.html ডকুমেন্টটি ডুপ্লিকেট করুন:

গ্লিচে ডুপ্লিকেট ফাইল বিকল্প

page1-url-speculations.html নামে একটি নতুন নাম লিখুন।

স্পেকুলেশন রুলস হলো type="speculationrules" সহ একটি JSON ফরম্যাটের <script> ট্যাগ।

page1-url-speculations.html ফাইলটি সম্পাদনা করুন এবং নিম্নলিখিত কোডটি পেজে যোগ করুন। এটি কোথায় যোগ করছেন তা খুব গুরুত্বপূর্ণ নয়, তবে ক্লোজিং বডি ট্যাগের ( </body> ) ঠিক আগে যোগ করলে ভালো হয়, যাতে পেজের বাকি অংশ প্রথমে প্রসেস করা যায়।

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

আর এটুকুই! আপনার পেজে তাৎক্ষণিক লোডিং যোগ করার জন্য শুধু এটুকুই প্রয়োজন!

এই নিয়মটি page2.html এবং page3.html ইউআরএল দুটিকে প্রি-রেন্ডার করার নির্দেশ দেয়, যাতে ব্যবহারকারী যেকোনো একটি লিঙ্কে ক্লিক করার সাথে সাথেই পৃষ্ঠা দুটি ব্যাকগ্রাউন্ডে লোড হয়ে যায়।

৫. অনুমানমূলক নিয়মকানুন বাস্তবে ঘটতে দেখা

চলুন এটি বাস্তবে দেখি। আপনি যদি page1-url-speculations.html পেজটি লোড করেন, তাহলে মূল index.html পেজের সাথে কোনো পার্থক্য চোখে পড়বে না। কিন্তু, ব্যাকগ্রাউন্ডে ক্রোম page2.html এবং page3.html প্রি-রেন্ডার করা শুরু করে দিয়েছে। আপনি এগুলোকে লুকানো ব্যাকগ্রাউন্ড ট্যাব হিসেবে ভাবতে পারেন। লিঙ্কে ক্লিক করার সাথে সাথে ক্রোম বর্তমান পেজটিকে সেই প্রি-রেন্ডার করা পেজটির সাথে অদলবদল করে দেবে। লোড হওয়ার পর যদি আপনি অন্তত ৩ সেকেন্ড অপেক্ষা করে লিঙ্কগুলোতে ক্লিক করেন, তাহলে দেখবেন সেগুলো প্রায় শূন্য LCP-তে সাথে সাথেই লোড হয়ে যাচ্ছে!

এখানে আপনি ৫০ মিলিসেকেন্ডের একটি এলসিপি দেখতে পাচ্ছেন— যা প্রস্তাবিত ‘ভালো’ থ্রেশহোল্ড ২.৫ সেকেন্ডের চেয়ে অনেক দ্রুত এবং বেশিরভাগ মানুষের কাছে এটিকে ‘তাৎক্ষণিক’ বলে মনে হবে।

এর সাথে index.html এর মূল হোম পেজটির তুলনা করুন, যেখানে পেজগুলোর মধ্যে নেভিগেট করা ধীর এবং প্রতিক্রিয়াহীন বলে মনে হয়।

এটি কেবল একটি সাধারণ ডেমো সাইট, এবং এর ধীর লোডিং কৃত্রিম। তবে আশা করি, আপনি ইতোমধ্যেই এপিআই-এর ক্ষমতা দেখতে ও বুঝতে পারছেন। আপনাকে মূল পেজের কোড পরিবর্তন করতে হয়নি, শুধু পেজটিতে স্পেকুলেশন রুলগুলো যোগ করতে হয়েছে।

সম্পূর্ণ ৩ সেকেন্ড লোড হওয়ার আগে আপনি ক্লিক করলে, আংশিকভাবে লোড হওয়া পৃষ্ঠাটি বর্তমান পৃষ্ঠাটিকে প্রতিস্থাপন করবে এবং আপনি কনসোলে অবশিষ্ট বাধা সৃষ্টিকারী বার্তাগুলো দেখতে পাবেন:

আগেরটির মতো পৃষ্ঠা ২-এর অনুরূপ স্ক্রিনশট, তবে এতে কনসোল লগিং অর্ধেক দেখানো হয়েছে।

ক্রোম ব্যবহারকারীর সামনেই লোডিং শেষ করে এবং এখানে আপনি ১ সেকেন্ডের একটি LCP দেখতে পাচ্ছেন—যা সম্পূর্ণ প্রি-রেন্ডার করা পেজের ৫০ মিলিসেকেন্ডের প্রায় তাৎক্ষণিক অনুভূতির মতো ভালো না হলেও, একেবারেই প্রি-রেন্ডার না করা পেজ লোডের ৩ সেকেন্ডের চেয়ে ভালো। এই অগ্রিম শুরুটি পেজ লোডের গতিকে লক্ষণীয়ভাবে উন্নত করেছে।

৬. জাভাস্ক্রিপ্ট দিয়ে ডিবাগিং

পেজটি সক্রিয় হলে কার্যকর হওয়ার জন্য আপনি জাভাস্ক্রিপ্ট ব্যবহার করে একটি ইভেন্ট হ্যান্ডলার রেজিস্টার করতে পারেন।

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 Console-এ লগিং বার্তাগুলো দেখানো হচ্ছে।

এখানে আপনি দেখতে পাচ্ছেন যে, পেজটি লোড হওয়া শুরু হওয়ার ৪,২৯৮ মিলিসেকেন্ড পরে সক্রিয় হয়েছিল। পেজটি লোড হওয়ার ক্ষেত্রে বেশ ভালো ৪ সেকেন্ডের একটি অগ্রিম সুবিধা ছিল!

লগগুলোর ক্রম দেখে আপনি বুঝতে পারবেন যে, LCP ট্রিগার হওয়ার আগে অ্যাক্টিভেশন ইভেন্টটি ফায়ার হয়। যদিও ততক্ষণে পেজটি পুরোপুরি লোড হয়ে যাওয়ার কথা, LCP-এর জন্য একটি 'পেইন্ট' হওয়া প্রয়োজন—নামেই তো তা বলা আছে! তাই পেজটি ব্যাকগ্রাউন্ডে প্রি-রেন্ডার হলেও, অ্যাক্টিভেট না হওয়া পর্যন্ত কোনো প্রকৃত 'পেইন্ট' হয় না। এই কারণে অ্যাক্টিভেশন এবং LCP-এর সময়ের মধ্যে একটি সামান্য বিলম্ব থাকবে। এই ক্ষেত্রে, ১২৮ মিলিসেকেন্ড। যা ব্যবহারকারীর জন্য প্রায় তাৎক্ষণিক!

আপনি আরও দেখতে পারেন যে এই উদাহরণে অ্যাক্টিভেশন টাইম হলো ৪,২৯৮ মিলিসেকেন্ড, কিন্তু LCP টাইম তার চেয়ে অনেক কম, মাত্র ১২৮ মিলিসেকেন্ড। পারফরম্যান্স মেট্রিক্সের জন্য সমস্ত টাইমিং পরিমাপ করা হয় পেজ লোড হওয়া শুরু হওয়ার সময়ের উপর ভিত্তি করে, কিন্তু LCP রেকর্ড করার জন্য ব্যবহৃত ওয়েব-ভাইটালস লাইব্রেরিতে একটি বিশেষ লজিক রয়েছে যা ব্যবহারকারীর দৃষ্টিকোণ থেকে LCP পরিমাপ করার জন্য activationStart টাইম বিয়োগ করে। ক্রোম ইউজার এক্সপেরিয়েন্স রিপোর্ট (CrUX)-এর জন্যও এভাবেই LCP গণনা করা হয় , যা পেজস্পিড ইনসাইটস এবং গুগল সার্চ কনসোলের কোর ওয়েব ভাইটালস রিপোর্টের মতো টুলগুলোকে শক্তি জোগায়।

টিপ: পেজ প্রি-রেন্ডার হওয়ার সময় কিন্তু পেজটি ভিজিট করার আগে যদি আপনি নির্দিষ্ট কোডটি রান করতে না চান, তাহলে পেজ অ্যাক্টিভেশনের সময় সেটি রান করার জন্য prerenderingchange ইভেন্টটি একটি চমৎকার উপায়। উদাহরণস্বরূপ, অ্যানালিটিক্স এবং বিজ্ঞাপন হলো এমন দুটি কাজ যা আপনি বিলম্বিত করতে চাইতে পারেন। গুগল অ্যানালিটিক্স এবং গুগল পাবলিশার ট্যাগ (GPT)-এর মতো কিছু অ্যানালিটিক্স এবং বিজ্ঞাপন প্রোভাইডার অ্যাক্টিভেশন পর্যন্ত স্বয়ংক্রিয়ভাবে বিলম্ব করে, কিন্তু অন্যান্য প্রোভাইডার বা কাস্টম কোড তা নাও করতে পারে। এই কোডল্যাবে এই বিষয়টি নিয়ে আর বিস্তারিত আলোচনা করা হবে না, তবে আরও বিশদ তথ্যের জন্য ডকুমেন্টেশনের 'ইমপ্যাক্ট অন অ্যানালিটিক্স' (Impact on Analytics) অংশটি দেখুন।

৭. ডেভটুলস দিয়ে ডিবাগিং

কনসোল লগিং অবশ্যই ডিবাগিংয়ের একটি উপায় (ডিবাগ করার জন্য পুরোনো দিনের console.log কার না ভালো লাগে!), কিন্তু স্পেকুলেশন রুলস ডিবাগ করার জন্য ক্রোমের ডেভটুলস-এ চমৎকার সাপোর্ট রয়েছে।

page1-url-speculations.html পৃষ্ঠায় ফিরে যান, এবং অ্যাপ্লিকেশন প্যানেলটি খুলে ব্যাকগ্রাউন্ড সার্ভিসেস বিভাগের অধীনে থাকা স্পেকুলেটিভ লোডস ট্যাবে যান:

ডেভটুলস স্পেকুলেটিভ লোডিং ট্যাব

এই স্ক্রিনটি দেখাচ্ছে যে পৃষ্ঠাটি নিজে অনুমান করা হয়নি (ডানদিকের উপরের অংশ), কিন্তু এটি দুটি অনুমানের সূচনা করেছে । 'View all speculations rules' লিঙ্কে ক্লিক করুন, যা আপনাকে নিয়মগুলির তালিকা সহ একটি স্ক্রিন দেখাবে (এই পৃষ্ঠায় কেবল একটিই আছে)। তবে, আরও আকর্ষণীয় হলো ' View all speculations' লিঙ্কটি, যা আপনাকে 'Speculations' ট্যাবে নিয়ে যায়:

ডেভটুলস স্পেকুলেশনস ট্যাবে দেখানো দুটি পৃষ্ঠা নিয়ে জল্পনা করা হয়েছে।

এখানে আপনি দেখতে পাচ্ছেন যে দুটি পৃষ্ঠা প্রস্তুত করা হয়েছে, এবং উভয়ই ' রেডি' অবস্থায় আছে, যার অর্থ হলো সেগুলি প্রি-রেন্ডার করা হয়েছে এবং সক্রিয় করার জন্য প্রস্তুত। এর মানে এই নয় যে পৃষ্ঠাটি সম্পূর্ণরূপে লোড হওয়া শেষ করেছে—যেমনটি আপনি আগে দেখেছেন—বরং এর অর্থ হলো প্রি-রেন্ডার সফলভাবে শুরু হয়েছে এবং পৃষ্ঠাটি সক্রিয় করার জন্য প্রস্তুত।

যদি কোনো পৃষ্ঠা প্রি-রেন্ডার হতে ব্যর্থ হয়, তাহলে কেন এই প্রক্রিয়াটি ব্যর্থ হলো সে সম্পর্কে আরও বিস্তারিত জানতে আপনি সেই লাইনে ক্লিক করতে পারেন। উদাহরণস্বরূপ, অল্প কিছু জাভাস্ক্রিপ্ট এপিআই প্রি-রেন্ডারিংয়ের সাথে সামঞ্জস্যপূর্ণ না হওয়ায় প্রি-রেন্ডারের প্রচেষ্টাটি বাতিল হয়ে যাবে।

৮. ডকুমেন্ট নিয়মাবলীর সাথে স্বয়ংক্রিয় লিঙ্ক অনুমান

এই অনুমানগুলোতে ইউআরএল-এর একটি হার্ড-কোডেড তালিকা ব্যবহার করা হয়েছিল। এটি এমন কিছু পরিস্থিতিতে উপযোগী যেখানে অনুমান করার জন্য ইউআরএলগুলো আগে থেকেই জানা থাকে। অথবা আরও উন্নত ক্ষেত্রে, যেখানে জাভাস্ক্রিপ্টের মাধ্যমে ইউআরএলগুলো গণনা করে পৃষ্ঠায় গতিশীলভাবে সন্নিবেশ করা যায়।

তবে, প্রায়শই এমনটা হয় যে, ভিজিটর পেজের কোন লিঙ্কে (যদি আদৌ কোনো লিঙ্কে ক্লিক করে!) ক্লিক করবে তা অজানা থাকে বা আগে থেকে অনুমান করা কঠিন হয়। আগে থেকে সমস্ত লিঙ্ক প্রি-রেন্ডার করা প্রতিটি পেজে নির্দিষ্ট করে দেওয়ার জন্য ক্লান্তিকর এবং খুবই অপচয়মূলক হবে। তাই আপনি চাইবেন যে পেজের নির্দিষ্ট কিছু লিঙ্ক বিবেচনা করা হোক, কিন্তু ব্যবহারকারী যে কোনো একটি লিঙ্কে ক্লিক করতে যাচ্ছে, তার একটি আরও সুনির্দিষ্ট ইঙ্গিতসহ। ডকুমেন্ট রুলস এই সুবিধাটিই দেয়।

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 ইগারনেস দিয়ে প্রি-রেন্ডার করা হয়েছে (যা আমরা পরের পেজে আলোচনা করব)।

যখন আপনি পৃষ্ঠাটিতে যাবেন, তখন আপনি দুটি সম্ভাব্য অনুমান দেখতে পাবেন এবং দুটিই ট্রিগার হয়নি :

DevTools Speculations ট্যাবে দেখানো দুটি পৃষ্ঠা ট্রিগার হয়নি

লিঙ্কগুলোর কোনো একটির ওপর মাউস রাখলে জল্পনাটি শুরু হয়:

ডেভটুলস স্পেকুলেশন ট্যাবে দুটি পৃষ্ঠা চালু হয়েছে

আপনি লিঙ্কে ক্লিক করার সাথে সাথে প্রি-রেন্ডার করা পৃষ্ঠাটি লোড হবে। পৃষ্ঠাটি লোড হওয়ার জন্য পর্যাপ্ত সময় দেওয়া হলে এটি তাৎক্ষণিক মনে হতে পারে, অথবা লিঙ্কে ক্লিক করার সময় পৃষ্ঠাটি লোড হওয়া শেষ না হলে কিছুটা দ্রুত হতে পারে। উভয় ক্ষেত্রেই, স্পেকুলেশন নিয়ম ব্যবহার না করার চেয়ে এটি একটি ভালো LCP সময় দেবে।

ডকুমেন্ট রুলস হলো আপনার ওয়েবসাইটে দ্রুত স্পেকুলেটিভ নেভিগেশন যোগ করার একটি শক্তিশালী উপায়, যার জন্য কোন ইউআরএল প্রি-রেন্ডার করতে হবে তা নিয়ে সতর্কভাবে চিন্তা করার প্রয়োজন হয় না। এগুলি প্রি-রেন্ডার সম্পন্ন হতে কম সময় নেয়, কিন্তু পরবর্তী নেভিগেশনকে একটি অগ্রিম সূচনা প্রদান করে, এবং এর ফলে ভবিষ্যতের পেজ লোড উন্নত করতে সাহায্য করে।

৯. কখন অনুমান করতে হবে তা জানানোর জন্য ব্যবহারকারীর আগ্রহ

পূর্ববর্তী ধাপে "eagerness": "moderate" ব্যবহার করা হয়েছিল। আগ্রহের ৪টি সেটিং রয়েছে:

immediate : এটি যত তাড়াতাড়ি সম্ভব অনুমান করার জন্য ব্যবহৃত হয়—অর্থাৎ, অনুমানের নিয়মগুলো মানা হওয়ার সাথে সাথেই।
eager : এটি immediate সেটিং-এর মতোই কাজ করে, কিন্তু ভবিষ্যতে আমরা এটিকে immediate এবং moderate মাঝামাঝি কোনো একটি অবস্থানে রাখার কথা ভাবছি।
moderate : আপনি যদি কোনো লিঙ্কের উপর ২০০ মিলিসেকেন্ডের জন্য হোভার করেন (অথবা তার আগেই যদি pointerdown ইভেন্ট ঘটে, এবং মোবাইলে যেখানে কোনো হোভার ইভেন্ট নেই), তাহলে এটি স্পেকুলেশন সম্পাদন করে।
conservative : এটি পয়েন্টার বা টাচ ডাউন নিয়ে অনুমান করে।

eagerness সেটিংটি ইউআরএল-ভিত্তিক লিস্ট রুল এবং where -ভিত্তিক ডকুমেন্ট রুল, উভয় ক্ষেত্রেই ব্যবহার করা যায়। immediate এবং eager সেটিংগুলো সাধারণত লিস্ট রুলের জন্য বেশি উপযোগী, কারণ এক্ষেত্রে আপনি ইউআরএলগুলো জানেন এবং তাই সর্বাধিক লিড টাইম পাওয়ার জন্য যত তাড়াতাড়ি সম্ভব সেগুলো অনুমান করা যেতে পারে। moderate এবং conservative সাধারণত ডকুমেন্ট রুলের জন্য বেশি কার্যকর, যেখানে অনুমান করার জন্য সঠিক ইউআরএলটি সাধারণত জানা থাকে না।

কখন স্পেকুলেশনগুলো ঘটে তা দেখতে, DevTools ব্যবহার করে আপনার পেজগুলোতে বিভিন্ন ইগারনেস সেটিংস নিয়ে পরীক্ষা চালান।

১০. উপসংহার

অভিনন্দন, আপনি এই কোডল্যাবের শেষ প্রান্তে পৌঁছেছেন এবং এখন নিশ্চয়ই বুঝতে পেরেছেন যে স্পেকুলেশন রুলস এপিআই একটি শক্তিশালী এপিআই, যা মাত্র কয়েকটি কোডের লাইনের মাধ্যমেই সাইটগুলিতে যুক্ত করা যায়।

এই সংক্ষিপ্ত ভূমিকায় আপনি এই এপিআই-এর সম্ভাবনার কেবল সামান্যই তুলে ধরেছেন, কিন্তু আপনার ওয়েবসাইটে সমর্থন যোগ করার জন্য এটিই যথেষ্ট।

অ্যানালিটিক্স বা বিজ্ঞাপনের জন্য আপনার যে বিষয়গুলো বিবেচনায় রাখতে হতে পারে, সেগুলোসহ আরও উন্নত বিষয় জানতে নিচের 'আরও জানুন' লিঙ্কগুলো দেখুন।

আরও জানুন

প্রতিক্রিয়া

এই কোডল্যাবটি সম্পর্কে আপনার মতামত এবং কোনো প্রশ্ন বা জিজ্ঞাসা থাকলে আমরা তা জানতে আগ্রহী।

এই কোডল্যাবটি আপনার কেমন লাগবে?

আমার জন্য তেমন দরকারি নয়

মাঝারিভাবে দরকারী

সত্যিই দরকারী