এই কোডল্যাবে, কিছু রিসোর্স প্রিলোড এবং প্রিফেচ করে নিম্নলিখিত ওয়েব পৃষ্ঠার কর্মক্ষমতা উন্নত করা হয়েছে:
পরিমাপ করা
কোন অপ্টিমাইজেশান যোগ করার আগে ওয়েবসাইটটি কীভাবে কাজ করে তা প্রথমে পরিমাপ করুন।
- সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন
.
আপনার গ্লিচের লাইভ সংস্করণে Lighthouse পারফরম্যান্স অডিট ( Lighthouse > Options > Performance ) চালান ( Lighthouse এর সাথে পারফরম্যান্সের সুযোগগুলিও দেখুন)।
লাইটহাউস দেরিতে পাওয়া একটি সংস্থানের জন্য নিম্নলিখিত ব্যর্থ অডিট দেখায়:
- DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
- নেটওয়ার্ক ট্যাবে ক্লিক করুন।
main.css ফাইলটি HTML নথিতে রাখা লিঙ্ক উপাদান ( <link> ) দ্বারা আনা হয় না, তবে একটি পৃথক জাভাস্ক্রিপ্ট ফাইল, fetch-css.js , window.onLoad ইভেন্টের পরে DOM-এ লিঙ্ক উপাদান সংযুক্ত করে। এর মানে হল যে ব্রাউজার JS ফাইলটি পার্সিং এবং এক্সিকিউট করা শেষ করার পরেই ফাইলটি আনা হয়। একইভাবে, main.css এর মধ্যে নির্দিষ্ট করা একটি ওয়েব ফন্ট ( K2D.woff2 ) শুধুমাত্র CSS ফাইল ডাউনলোড করা শেষ হলেই আনা হয়।
সমালোচনামূলক অনুরোধ চেইন সংস্থানগুলির ক্রম উপস্থাপন করে যা ব্রাউজার দ্বারা অগ্রাধিকার দেওয়া এবং আনা হয়। এই ওয়েব পৃষ্ঠার জন্য, এটি বর্তমানে এর মত দেখাচ্ছে:
├─┬ / (initial HTML file)
└── fetch-css.js
└── main.css
└── K2D.woff2
যেহেতু সিএসএস ফাইলটি অনুরোধ চেইনের তৃতীয় স্তরে রয়েছে, তাই লাইটহাউস এটিকে দেরিতে আবিষ্কৃত সম্পদ হিসেবে চিহ্নিত করেছে।
প্রিলোড সমালোচনামূলক সম্পদ
main.css ফাইলটি একটি গুরুত্বপূর্ণ সম্পদ যা পৃষ্ঠাটি লোড হওয়ার সাথে সাথেই প্রয়োজন। এই সম্পদের মতো গুরুত্বপূর্ণ ফাইলগুলির জন্য যেগুলি আপনার অ্যাপ্লিকেশনে দেরীতে আনা হয়েছে, একটি লিঙ্ক প্রিলোড ট্যাগ ব্যবহার করুন যাতে ব্রাউজারকে ডকুমেন্টের মাথায় একটি লিঙ্ক উপাদান যুক্ত করে তাড়াতাড়ি ডাউনলোড করতে জানান৷
এই অ্যাপ্লিকেশনের জন্য একটি প্রিলোড ট্যাগ যোগ করুন:
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
</head>
কোন ধরনের রিসোর্স আনা হচ্ছে তা চিহ্নিত করতে as অ্যাট্রিবিউট ব্যবহার করা হয় এবং as="style" স্টাইলশীট ফাইল প্রিলোড করতে ব্যবহার করা হয়।
অ্যাপ্লিকেশনটি পুনরায় লোড করুন এবং DevTools-এ নেটওয়ার্ক প্যানেলটি দেখুন।
লক্ষ্য করুন কিভাবে ব্রাউজার CSS ফাইল নিয়ে আসে তার আগে এটি আনার জন্য দায়ী JavaScript এমনকি পার্সিং শেষ হয়ে গেছে। প্রিলোডের সাথে, ব্রাউজারটি ওয়েব পৃষ্ঠার জন্য গুরুত্বপূর্ণ যে অনুমান সহ সংস্থানটির জন্য একটি অগ্রিম আনয়ন করতে জানে৷
সঠিকভাবে ব্যবহার না করা হলে, প্রিলোড ব্যবহার না করা সম্পদের জন্য অপ্রয়োজনীয় অনুরোধ করে কার্যক্ষমতার ক্ষতি করতে পারে। এই অ্যাপ্লিকেশনটিতে, details.css হল আরেকটি CSS ফাইল যা প্রজেক্টের রুটে অবস্থিত কিন্তু একটি পৃথক /details route জন্য ব্যবহৃত হয়। কীভাবে প্রিলোড ভুলভাবে ব্যবহার করা যেতে পারে তার একটি উদাহরণ দেখানোর জন্য, এই সংস্থানের জন্য একটি প্রিলোড ইঙ্গিতও যোগ করুন।
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
অ্যাপ্লিকেশনটি পুনরায় লোড করুন এবং নেটওয়ার্ক প্যানেলটি দেখুন। একটি অনুরোধ করা হয়েছে details.css পুনরুদ্ধার করার জন্য যদিও এটি ওয়েব পৃষ্ঠা দ্বারা ব্যবহার করা হচ্ছে না৷
ক্রোম কনসোল প্যানেলে একটি সতর্কতা প্রদর্শন করে যখন পৃষ্ঠাটি লোড হওয়ার কয়েক সেকেন্ডের মধ্যে একটি প্রিলোড করা সংস্থান ব্যবহার না করে।
আপনার ওয়েব পৃষ্ঠার দ্বারা অবিলম্বে ব্যবহার করা হচ্ছে না এমন কোনো প্রিলোড করা সংস্থান আছে কিনা তা সনাক্ত করতে এই সতর্কতাটি একটি সূচক হিসাবে ব্যবহার করুন৷ আপনি এখন এই পৃষ্ঠার জন্য অপ্রয়োজনীয় প্রিলোড লিঙ্ক সরাতে পারেন।
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
<link rel="preload" href="details.css" as="style">
</head>
অ্যাট্রিবিউট as ব্যবহার করা উচিত এমন সঠিক মানগুলির সাথে যে সমস্ত ধরণের সংস্থানগুলি আনা যেতে পারে তার একটি তালিকার জন্য, প্রিলোডিং এর উপর MDN নিবন্ধটি পড়ুন।
ভবিষ্যত সম্পদ প্রিফেচ করুন
প্রিফেচ হল আরেকটি ব্রাউজার ইঙ্গিত যা একটি ভিন্ন নেভিগেশন রুটের জন্য ব্যবহৃত সম্পদের জন্য অনুরোধ করতে ব্যবহার করা যেতে পারে কিন্তু বর্তমান পৃষ্ঠার জন্য প্রয়োজনীয় অন্যান্য গুরুত্বপূর্ণ সম্পদের তুলনায় কম অগ্রাধিকারে।
এই ওয়েবসাইটে, ছবিতে ক্লিক করলে আপনাকে একটি পৃথক details/ রুটে নিয়ে যাবে।
একটি পৃথক CSS ফাইল, details.css , এই সাধারণ পৃষ্ঠার জন্য প্রয়োজনীয় সমস্ত শৈলী ধারণ করে। এই সংস্থানটি প্রিফেচ করতে index.html এ একটি লিঙ্ক উপাদান যোগ করুন।
<head>
<!-- ... -->
<link rel="prefetch" href="details.css">
</head>
এটি কীভাবে ফাইলের জন্য একটি অনুরোধ ট্রিগার করে তা বোঝার জন্য, DevTools-এ নেটওয়ার্ক প্যানেল খুলুন এবং অক্ষম ক্যাশে বিকল্পটি আনচেক করুন৷
অ্যাপ্লিকেশনটি পুনরায় লোড করুন এবং লক্ষ্য করুন যে কীভাবে একটি খুব কম অগ্রাধিকারের অনুরোধ করা হয়েছে details.css জন্য অন্য সমস্ত ফাইল আনার পরে।
DevTools খোলার সাথে, details পৃষ্ঠাতে নেভিগেট করতে ওয়েবসাইটের ছবিতে ক্লিক করুন। যেহেতু একটি লিঙ্ক এলিমেন্ট details.html এ ব্যবহার করা হয় details.css আনতে, তাই প্রত্যাশিত রিসোর্সের জন্য অনুরোধ করা হয়।
details.css নেটওয়ার্ক অনুরোধের বিবরণ দেখতে DevTools-এ ক্লিক করুন। আপনি লক্ষ্য করবেন যে ফাইলটি ব্রাউজারের ডিস্ক ক্যাশে থেকে পুনরুদ্ধার করা হয়েছে।
ব্রাউজার নিষ্ক্রিয় সময়ের সদ্ব্যবহার করে, প্রিফেচ একটি ভিন্ন পৃষ্ঠার জন্য প্রয়োজনীয় একটি সংস্থানের জন্য প্রাথমিক অনুরোধ করে। এটি ব্রাউজারকে শীঘ্রই সম্পদ ক্যাশে করার অনুমতি দিয়ে ভবিষ্যতের নেভিগেশন অনুরোধের গতি বাড়ায় এবং প্রয়োজনে ক্যাশে থেকে এটি পরিবেশন করে।
ওয়েবপ্যাকের সাথে প্রিলোডিং এবং প্রিফেচিং
কোড স্প্লিটিং পোস্ট সহ জাভাস্ক্রিপ্ট পেলোড হ্রাস করুন একটি বান্ডিলকে একাধিক খণ্ডে বিভক্ত করতে গতিশীল আমদানির ব্যবহার অন্বেষণ করে। এটি একটি সাধারণ অ্যাপ্লিকেশনের মাধ্যমে প্রদর্শিত হয় যা একটি ফর্ম জমা দেওয়ার সময় গতিশীলভাবে Lodash থেকে একটি মডিউল আমদানি করে।
আপনি এখানে এই অ্যাপ্লিকেশনের জন্য ত্রুটি অ্যাক্সেস করতে পারেন।
কোডের নিম্নলিখিত ব্লক, যা src/index.js, বোতামটি ক্লিক করার সময় গতিশীলভাবে পদ্ধতিটি আমদানির জন্য দায়ী।
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
একটি বান্ডিল বিভক্ত করা পৃষ্ঠা লোড হওয়ার সময়কে এর প্রাথমিক আকার কমিয়ে উন্নত করে। ওয়েবপ্যাকের সংস্করণ 4.6.0 গতিশীলভাবে আমদানি করা অংশগুলিকে প্রিলোড বা প্রিফেচ করতে সহায়তা প্রদান করে। একটি উদাহরণ হিসাবে এই অ্যাপ্লিকেশন ব্যবহার করে, lodash পদ্ধতি ব্রাউজার নিষ্ক্রিয় সময়ে প্রিফেচ করা যেতে পারে; যখন একজন ব্যবহারকারী বোতাম টিপে, রিসোর্স আনার জন্য কোন বিলম্ব নেই।
একটি নির্দিষ্ট অংশ প্রিফেচ করতে একটি গতিশীল আমদানির মধ্যে নির্দিষ্ট webpackPrefetch মন্তব্য প্যারামিটার ব্যবহার করুন৷ এই বিশেষ অ্যাপ্লিকেশনের সাথে এটি দেখতে কেমন হবে তা এখানে।
form.addEventListener("submit", e => {
e.preventDefault()
import(/* webpackPrefetch: true */ 'lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
একবার অ্যাপ্লিকেশনটি পুনরায় লোড হয়ে গেলে, ওয়েবপ্যাক নথির মাথায় সম্পদের জন্য একটি প্রিফেচ ট্যাগ ইনজেক্ট করে। এটি DevTools-এর উপাদান প্যানেলে দেখা যাবে।
নেটওয়ার্ক প্যানেলে অনুরোধগুলি পর্যবেক্ষণ করা আরও দেখায় যে অন্যান্য সমস্ত সংস্থান অনুরোধ করার পরে এই অংশটি কম অগ্রাধিকারের সাথে আনা হয়েছে।
যদিও প্রিফেচ এই ব্যবহারের ক্ষেত্রে আরও অর্থপূর্ণ করে তোলে, ওয়েবপ্যাক গতিশীলভাবে আমদানি করা অংশগুলিকে প্রিলোড করার জন্য সমর্থনও প্রদান করে।
import(/* webpackPreload: true */ 'module')
উপসংহার
এই কোডল্যাবের সাহায্যে, আপনার একটি দৃঢ় ধারণা থাকা উচিত যে কীভাবে নির্দিষ্ট সম্পত্তি প্রিলোড করা বা প্রিফেচ করা আপনার সাইটের ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করতে পারে। এটি উল্লেখ করা গুরুত্বপূর্ণ যে এই কৌশলগুলি প্রতিটি সংস্থানের জন্য ব্যবহার করা উচিত নয় এবং সেগুলিকে ভুলভাবে ব্যবহার করা কর্মক্ষমতা ক্ষতি করতে পারে। শুধুমাত্র প্রিলোডিং বা বেছে বেছে প্রিফেচ করার মাধ্যমে সেরা ফলাফল লক্ষ্য করা যায়।
সংক্ষেপ:
- দেরিতে আবিষ্কৃত কিন্তু বর্তমান পৃষ্ঠার জন্য গুরুত্বপূর্ণ সম্পদগুলির জন্য প্রিলোড ব্যবহার করুন।
- ভবিষ্যতের নেভিগেশন রুট বা ব্যবহারকারীর ক্রিয়াকলাপের জন্য প্রয়োজনীয় সংস্থানগুলির জন্য প্রিফেচ ব্যবহার করুন৷
সমস্ত ব্রাউজার বর্তমানে প্রিলোড এবং প্রিফেচ উভয়ই সমর্থন করে না। এর মানে হল যে আপনার অ্যাপ্লিকেশনের সমস্ত ব্যবহারকারী কর্মক্ষমতা উন্নতি লক্ষ্য করতে পারে না।
প্রিলোডিং এবং প্রিফেচিং কীভাবে আপনার ওয়েব পৃষ্ঠাকে প্রভাবিত করতে পারে তার নির্দিষ্ট দিক সম্পর্কে আপনি যদি আরও তথ্য চান তবে এই নিবন্ধগুলি দেখুন: