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

প্রিফেচ করার দুটি উপায়: <link> ট্যাগ এবং HTTP হেডার

Demián Renzulli

এই কোডল্যাবে, আপনি দুটি উপায়ে প্রিফেচিং প্রয়োগ করবেন: <link rel="prefetch"> এবং HTTP Link শিরোনাম সহ।

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

কর্মক্ষমতা যাচাই

প্রথমে বেসলাইন কর্মক্ষমতা স্থাপন করুন:

প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷
সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .
DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
নেটওয়ার্ক ট্যাবে ক্লিক করুন।
থ্রটলিং ড্রপ-ডাউন তালিকায়, একটি ধীর সংযোগের ধরন অনুকরণ করতে দ্রুত 3G নির্বাচন করুন।
পণ্য পৃষ্ঠা লোড করতে, নমুনা অ্যাপে এখন কিনুন ক্লিক করুন।

product-details.html পৃষ্ঠাটি লোড হতে প্রায় 600 ms লাগে:

পণ্য-details.html এর জন্য লোডের সময় দেখানো নেটওয়ার্ক প্যানেল

`<link rel="prefetch">` দিয়ে পণ্যের পৃষ্ঠাটি প্রিফেচ করুন৷

নেভিগেশন উন্নত করতে, product-details.html পৃষ্ঠাটি প্রিফেচ করতে ল্যান্ডিং পৃষ্ঠায় একটি prefetch ট্যাগ সন্নিবেশ করুন:

views/index.html ফাইলের মাথায় নিম্নলিখিত <link> উপাদান যোগ করুন:

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">

      <link rel="prefetch" href="/product-details.html" as="document">
      ...
</head>

as বৈশিষ্ট্য ঐচ্ছিক কিন্তু সুপারিশ করা হয়; এটি ব্রাউজারটিকে সঠিক শিরোনাম সেট করতে এবং সংস্থানটি ইতিমধ্যে ক্যাশে রয়েছে কিনা তা নির্ধারণ করতে সহায়তা করে। এই বৈশিষ্ট্যের উদাহরণ মানগুলির মধ্যে রয়েছে: document , script , style , font , image এবং অন্যান্য ।

প্রিফেচিং কাজ করছে তা যাচাই করতে:

সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .
DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
নেটওয়ার্ক ট্যাবে ক্লিক করুন।
থ্রটলিং ড্রপ-ডাউন তালিকায়, একটি ধীর সংযোগের ধরন অনুকরণ করতে দ্রুত 3G নির্বাচন করুন।
অক্ষম ক্যাশে চেকবক্স সাফ করুন।
অ্যাপটি পুনরায় লোড করুন।

এখন যখন ল্যান্ডিং পৃষ্ঠা লোড হয়, product-details.html পৃষ্ঠাটিও লোড হয়, তবে সর্বনিম্ন অগ্রাধিকারে:

নেটওয়ার্ক প্যানেল পণ্য-বিস্তারিত.html প্রিফেচড দেখাচ্ছে৷

পৃষ্ঠাটি পাঁচ মিনিটের জন্য HTTP ক্যাশে রাখা হয়, তারপরে নথির জন্য সাধারণ Cache-Control নিয়ম প্রযোজ্য হয়। এই ক্ষেত্রে, product-details.html একটি cache-control হেডার রয়েছে যার মান public, max-age=0 , যার অর্থ হল পৃষ্ঠাটি মোট পাঁচ মিনিটের জন্য রাখা হয়।

কর্মক্ষমতা পুনর্মূল্যায়ন

অ্যাপটি পুনরায় লোড করুন।
পণ্য পৃষ্ঠা লোড করতে, নমুনা অ্যাপে এখন কিনুন ক্লিক করুন।

নেটওয়ার্ক প্যানেলটি একবার দেখুন। প্রাথমিক নেটওয়ার্ক ট্রেসের তুলনায় দুটি পার্থক্য রয়েছে:

সাইজ কলামটি "প্রিফেচ ক্যাশে" দেখায়, যার অর্থ এই সংস্থানটি নেটওয়ার্কের পরিবর্তে ব্রাউজারের ক্যাশে থেকে পুনরুদ্ধার করা হয়েছিল৷
টাইম কলাম দেখায় যে নথিটি লোড হতে যে সময় লাগে তা এখন প্রায় 10 ms।

এটি পূর্ববর্তী সংস্করণের তুলনায় প্রায় 98% হ্রাস, যা প্রায় 600 ms নিয়েছে।

প্রিফেচ ক্যাশে থেকে প্রোডাক্ট-বিস্তারিত.html পুনরুদ্ধার করা নেটওয়ার্ক প্যানেল।

অতিরিক্ত ক্রেডিট: প্রগতিশীল বর্ধন হিসাবে `prefetch` ব্যবহার করুন

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

অভিযোজিত প্রিফেচিং বাস্তবায়ন করতে, প্রথমে views/index.html থেকে <link rel="prefetch"> ট্যাগটি সরান :

<!doctype html>
  <html>
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
       <link rel="prefetch" href="/product-details.html" as="document">
       ...
    </head>

তারপর একটি ফাংশন ঘোষণা করতে নিম্নলিখিত কোডটি public/script.js এ যুক্ত করুন যা ব্যবহারকারী দ্রুত সংযোগে থাকাকালীন prefetch ট্যাগকে গতিশীলভাবে ইনজেক্ট করে:

function injectLinkPrefetchIn4g(url) {
    if (window.navigator.connection.effectiveType === '4g') {
        //generate link prefetch tag
        const linkTag = document.createElement('link');
        linkTag.rel = 'prefetch';
        linkTag.href = url;
        linkTag.as = 'document';

        //inject tag in the head of the document
        document.head.appendChild(linkTag);
    }
}

ফাংশনটি নিম্নরূপ কাজ করে:

ব্যবহারকারী একটি 4G (বা দ্রুত) সংযোগে আছে কিনা তা নির্ধারণ করতে এটি নেটওয়ার্ক ইনফরমেশন API- এর কার্যকরী প্রকার বৈশিষ্ট্য পরীক্ষা করে।
যদি সেই শর্তটি পূরণ করা হয়, তাহলে এটি ইঙ্গিতের ধরন হিসাবে prefetch সহ একটি <link> ট্যাগ তৈরি করে, URLটি পাস করে যা href অ্যাট্রিবিউটে প্রিফেচ করা হবে এবং নির্দেশ করে যে সম্পদটি as মধ্যে একটি HTML document ।
অবশেষে, এটি পৃষ্ঠার head গতিশীলভাবে স্ক্রিপ্টটি ইনজেক্ট করে।

পরবর্তীতে script.js যোগ করুন views/index.html , ক্লোজিং </body> ট্যাগের ঠিক আগে:

<body>
      ...
      <script src="/script.js"></script>
</body>

পৃষ্ঠার শেষে script.js অনুরোধ করা নিশ্চিত করে যে পৃষ্ঠাটি পার্স এবং লোড হওয়ার পরে এটি লোড এবং কার্যকর করা হবে।

প্রিফেচিং বর্তমান পৃষ্ঠার জন্য গুরুত্বপূর্ণ সংস্থানগুলিতে হস্তক্ষেপ না করে তা নিশ্চিত করতে, window.load ইভেন্টে injectLinkPrefetchIn4g() কল করতে নিম্নলিখিত কোড স্নিপেট যোগ করুন:

<body>
      ...
      <script src="/script.js"></script>
      <script>
           window.addEventListener('load', () => {
                injectLinkPrefetchIn4g('/product-details.html');
           });
      </script>
</body>

ল্যান্ডিং পৃষ্ঠাটি এখন শুধুমাত্র দ্রুত সংযোগে product-details.html প্রিফেচ করে। এটি যাচাই করতে:

সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .
DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
নেটওয়ার্ক ট্যাবে ক্লিক করুন।
থ্রটলিং ড্রপ-ডাউন তালিকায়, অনলাইন নির্বাচন করুন।
অ্যাপটি পুনরায় লোড করুন।

নেটওয়ার্ক প্যানেলে আপনাকে product-details.html দেখতে হবে:

নেটওয়ার্ক প্যানেল পণ্য-বিস্তারিত.html প্রিফেচড দেখাচ্ছে৷

পণ্য পৃষ্ঠাটি ধীর সংযোগে প্রিফেচ করা হয়নি তা যাচাই করতে:

থ্রটলিং ড্রপ-ডাউন তালিকায়, স্লো 3G নির্বাচন করুন।
অ্যাপটি পুনরায় লোড করুন।

নেটওয়ার্ক প্যানেলে product-details.html ছাড়া ল্যান্ডিং পৃষ্ঠার জন্য শুধুমাত্র সম্পদ অন্তর্ভুক্ত করা উচিত:

নেটওয়ার্ক প্যানেল পণ্য-details.html প্রিফেচ করা হচ্ছে না দেখাচ্ছে।

HTTP `Link` শিরোনাম সহ পণ্য পৃষ্ঠার জন্য স্টাইলশীট প্রিফেচ করুন

HTTP Link শিরোনামটি link ট্যাগের মতো একই ধরণের সংস্থান প্রিফেচ করতে ব্যবহার করা যেতে পারে। কখন একটি বা অন্যটি ব্যবহার করবেন তা নির্ধারণ করা বেশিরভাগই আপনার পছন্দের উপর নির্ভর করে, কারণ কর্মক্ষমতার পার্থক্যটি নগণ্য। এই ক্ষেত্রে, আপনি পণ্য পৃষ্ঠার প্রধান CSS প্রিফেচ করতে, এর রেন্ডারিংকে আরও উন্নত করতে এটি ব্যবহার করবেন।

ল্যান্ডিং পৃষ্ঠার সার্ভার প্রতিক্রিয়াতে style-product.css এর জন্য একটি HTTP Link শিরোনাম যোগ করুন:

server.js ফাইলটি খুলুন এবং root url: / এর জন্য get() হ্যান্ডলারটি সন্ধান করুন।
হ্যান্ডলারের শুরুতে নিম্নলিখিত লাইন যোগ করুন:

app.get('/', function(request, response) {
    response.set('Link', '</style-product.css>; rel=prefetch');
    response.sendFile(__dirname + '/views/index.html');
});

সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন .
DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
নেটওয়ার্ক ট্যাবে ক্লিক করুন।
অ্যাপটি পুনরায় লোড করুন।

ল্যান্ডিং পৃষ্ঠা লোড হওয়ার পরে style-product.css এখন সর্বনিম্ন অগ্রাধিকারে প্রিফেচ করা হয়েছে:

নেটওয়ার্ক প্যানেল দেখাচ্ছে style-product.css প্রিফেচড।

পণ্যের পৃষ্ঠায় নেভিগেট করতে, এখনই কিনুন ক্লিক করুন। নেটওয়ার্ক প্যানেলটি একবার দেখুন:

নেটওয়ার্ক প্যানেল দেখানো হচ্ছে style-product.css প্রিফেচ ক্যাশে থেকে পুনরুদ্ধার করা হয়েছে।

style-product.css ফাইলটি "প্রিফেচ ক্যাশে" থেকে পুনরুদ্ধার করা হয়েছে এবং এটি লোড হতে মাত্র 12 ms সময় নিয়েছে৷

দ্রষ্টব্য: HTTP Link শিরোনাম ব্যবহার করার সময়, আপনি ক্লায়েন্ট ইঙ্গিতগুলিতে উপলব্ধ তথ্যের উপর ভিত্তি করে নেটওয়ার্ক অবস্থার উপর নির্ভর করে প্রিফেচ করবেন কিনা তা নির্ধারণ করতে পারেন।