এই কোডল্যাবে, কিছু রিসোর্স প্রিলোড ও প্রিফেচ করার মাধ্যমে নিম্নলিখিত ওয়েব পেজের পারফর্ম্যান্স উন্নত করা হয়েছে:
পরিমাপ করুন
কোনও অপ্টিমাইজেশন যোগ করার আগে ওয়েবসাইট কেমন পারফর্ম করছে তা পরিমাপ করুন।
- সাইটের প্রিভিউ দেখতে, অ্যাপ দেখুন বিকল্পে প্রেস করুন। তারপর
ফুল-স্ক্রিন
বিকল্পে প্রেস করুন।
আপনার Glitch-এর লাইভ ভার্সনে Lighthouse পারফর্ম্যান্স অডিট (Lighthouse > বিকল্প > পারফর্ম্যান্স) রান করুন (এছাড়াও Lighthouse-এর মাধ্যমে পারফর্ম্যান্সের সুযোগ খুঁজুন দেখুন)।
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
যেহেতু CSS ফাইলটি অনুরোধ চেনের তৃতীয় লেভেলে রয়েছে, তাই Lighthouse এটিকে দেরিতে-আবিষ্কৃত রিসোর্স হিসেবে শনাক্ত করেছে।
গুরুত্বপূর্ণ রিসোর্স আগে থেকে লোড করুন
main.css ফাইলটি একটি গুরুত্বপূর্ণ অ্যাসেট যা পৃষ্ঠা লোড হওয়ার সাথে সাথেই
প্রয়োজন হয়। এই রিসোর্সের মতো গুরুত্বপূর্ণ ফাইল যা আপনার অ্যাপ্লিকেশনে দেরিতে ফেচ করা হয়, সেগুলির জন্য লিঙ্ক প্রিলোড ট্যাগ ব্যবহার করুন যাতে ডকুমেন্টের হেডে লিঙ্ক এলিমেন্ট যোগ করে
ব্রাউজারকে সেটি তাড়াতাড়ি ডাউনলোড করার জন্য জানানো যায়।
এই অ্যাপ্লিকেশনের জন্য প্রিলোড ট্যাগ যোগ করুন:
<head>
<!-- ... -->
<link rel="preload" href="main.css" as="style">
</head>
as অ্যাট্রিবিউট ব্যবহার করে কোন ধরনের রিসোর্স ফেচ করা হচ্ছে তা শনাক্ত করা হয় এবং as="style" ব্যবহার করে স্টাইলশিট ফাইল প্রিলোড করা হয়।
অ্যাপ্লিকেশনটি আবার লোড করুন এবং DevTools-এ নেটওয়ার্ক প্যানেলটি দেখুন।
লক্ষ্য করুন, জাভাস্ক্রিপ্ট পার্সিং শেষ হওয়ার আগেই কীভাবে ব্রাউজার CSS ফাইল ফেচ করে। প্রিলোড করার মাধ্যমে, ব্রাউজার রিসোর্সের জন্য প্রি-এমপ্টিভ ফেচ করার কথা জানে, এই অনুমান করে যে এটি ওয়েব পৃষ্ঠার জন্য গুরুত্বপূর্ণ।
সঠিকভাবে ব্যবহার না করা হলে, প্রিলোড ফিচারটি রিসোর্সের জন্য অপ্রয়োজনীয় অনুরোধ করে পারফর্ম্যান্সের ক্ষতি করতে পারে,
যেগুলি ব্যবহার করা হয় না। এই অ্যাপ্লিকেশনে, 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 ফিরিয়ে আনার জন্য অনুরোধ করা হয়েছে, যদিও এটি ওয়েব পেজ ব্যবহার করছে না।
প্রিলোড করা রিসোর্স লোড হওয়ার কয়েক সেকেন্ডের মধ্যে পৃষ্ঠা সেটি ব্যবহার না করলে, Chrome Console প্যানেলে একটি সতর্কতা দেখায়।
আপনার ওয়েব পেজ অবিলম্বে ব্যবহার করছে না এমন কোনও প্রিলোড করা রিসোর্স আছে কিনা তা শনাক্ত করতে এই সতর্কতাটি একটি ইন্ডিকেটর হিসেবে ব্যবহার করুন। আপনি এখন এই পৃষ্ঠার জন্য অপ্রয়োজনীয় প্রিলোড লিঙ্ক সরিয়ে দিতে পারবেন।
<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.css আনার জন্য details.html-এ একটি লিঙ্ক এলিমেন্ট ব্যবহার করা হয়, তাই প্রত্যাশা অনুযায়ী রিসোর্সের জন্য
অনুরোধ করা হয়।
DevTools-এ details.css নেটওয়ার্ক অনুরোধে ক্লিক করে তার বিবরণ দেখুন। আপনি লক্ষ্য করবেন
যে ফাইলটি ব্রাউজারের ডিস্ক ক্যাশে থেকে ফিরিয়ে আনা হয়েছে।
ব্রাউজার আইডল টাইমের সুবিধা নিয়ে, প্রিফেচ অন্য পৃষ্ঠার জন্য প্রয়োজনীয় রিসোর্সের জন্য আগে থেকেই অনুরোধ করে। এটি ভবিষ্যতে নেভিগেশন অনুরোধের গতি বাড়ায় ব্রাউজারকে অ্যাসেট দ্রুত ক্যাশে করার অনুমতি দিয়ে এবং প্রয়োজন হলে ক্যাশে থেকে এটি পরিবেশন করে।
ওয়েবপ্যাকের মাধ্যমে প্রিলোড ও প্রিফেচ করা
কোড স্প্লিট করার মাধ্যমে JavaScript পেলোড কমান পোস্টটি একটি বান্ডেলকে একাধিক চাঙ্কে বিভক্ত করার জন্য ডাইনামিক ইম্পোর্টের ব্যবহার এক্সপ্লোর করে। এটি একটি সহজ অ্যাপ্লিকেশনের মাধ্যমে দেখানো হয়েছে যা একটি ফর্ম জমা দেওয়ার সময় Lodash থেকে ডাইনামিকভাবে একটি মডিউল ইমপোর্ট করে।
আপনি এই অ্যাপ্লিকেশনের জন্য Glitch এখানে অ্যাক্সেস করতে পারবেন।
src/index.js,-এ থাকা নিম্নলিখিত কোড ব্লকটি বোতামে ক্লিক করার সময়
ডায়নামিকভাবে পদ্ধতিটি ইমপোর্ট করার জন্য দায়ী।
form.addEventListener("submit", e => {
e.preventDefault()
import('lodash.sortby')
.then(module => module.default)
.then(sortInput())
.catch(err => { alert(err) });
});
বান্ডেল স্প্লিট করলে, প্রাথমিক সাইজ কমে যায় এবং
পৃষ্ঠা লোড হওয়ার সময়ও কমে। webpack-এর 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')
উপসংহার
এই কোডল্যাবের মাধ্যমে, নির্দিষ্ট অ্যাসেট প্রিলোড বা প্রিফেচ করলে কীভাবে আপনার সাইটের ব্যবহারকারীর অভিজ্ঞতা উন্নত হতে পারে সেই সম্পর্কে আপনার একটি স্পষ্ট ধারণা থাকা উচিত। এটি উল্লেখ করা গুরুত্বপূর্ণ যে এই কৌশলগুলি প্রতিটি রিসোর্সের জন্য ব্যবহার করা উচিত নয় এবং সেগুলি ভুলভাবে ব্যবহার করলে পারফর্ম্যান্সের ক্ষতি হতে পারে। শুধুমাত্র বেছে নিয়ে প্রিলোড বা প্রিফেচ করার মাধ্যমে সেরা ফলাফল লক্ষ্য করা যায়।
সারসংক্ষেপ করতে:
- যেসব রিসোর্স পরে খুঁজে পাওয়া যায় কিন্তু বর্তমান পৃষ্ঠার জন্য গুরুত্বপূর্ণ, সেগুলির জন্য প্রিলোড ব্যবহার করুন।
- ভবিষ্যতের নেভিগেশন রুট বা ব্যবহারকারীর অ্যাকশনের জন্য প্রয়োজনীয় রিসোর্সের ক্ষেত্রে প্রিফেচ ব্যবহার করুন।
বর্তমানে সব ব্রাউজার প্রিলোড ও প্রিফেচ, দুটিই সাপোর্ট করে না। এর অর্থ হল, আপনার অ্যাপ্লিকেশনের সব ব্যবহারকারী পারফর্ম্যান্সের উন্নতি লক্ষ্য নাও করতে পারেন।
প্রিলোড ও প্রিফেচ কীভাবে আপনার ওয়েব পেজকে প্রভাবিত করতে পারে সেই সম্পর্কে আরও তথ্য পেতে, এইসব নিবন্ধ দেখুন: