যখন আপনি একটি ওয়েব পেজ খোলেন, তখন ব্রাউজার সার্ভার থেকে HTML ডকুমেন্টটির জন্য অনুরোধ করে, এর বিষয়বস্তু পার্স করে এবং উল্লেখিত যেকোনো রিসোর্সের জন্য আলাদা অনুরোধ পাঠায়। একজন ডেভেলপার হিসেবে, আপনার পেজের জন্য প্রয়োজনীয় সমস্ত রিসোর্স এবং সেগুলোর মধ্যে সবচেয়ে গুরুত্বপূর্ণ কোনটি, তা আপনি আগে থেকেই জানেন। এই জ্ঞান ব্যবহার করে আপনি আগে থেকেই গুরুত্বপূর্ণ রিসোর্সগুলোর জন্য অনুরোধ করতে পারেন এবং লোডিং প্রক্রিয়াকে দ্রুততর করতে পারেন। এই পোস্টে ব্যাখ্যা করা হয়েছে কীভাবে <link rel="preload"> ব্যবহার করে তা করা যায়।
প্রিলোডিং কীভাবে কাজ করে
প্রি-লোডিং সেইসব রিসোর্সের জন্য সবচেয়ে উপযুক্ত, যেগুলো ব্রাউজার সাধারণত দেরিতে খুঁজে পায়।
@font-face রুল ব্যবহার করে প্যাসিফিকো ফন্টটি সংজ্ঞায়িত করা হয়েছে। ব্রাউজারটি স্টাইলশিটটি ডাউনলোড এবং পার্স করা শেষ করার পরেই কেবল ফন্ট ফাইলটি লোড করে।কোনো নির্দিষ্ট রিসোর্স প্রি-লোড করার মাধ্যমে আপনি ব্রাউজারকে জানিয়ে দেন যে, আপনি সেটিকে স্বাভাবিক সময়ের আগেই খুঁজে নিতে চান, কারণ আপনি নিশ্চিত যে এটি বর্তমান পেজটির জন্য গুরুত্বপূর্ণ।
ক্রিটিক্যাল রিকোয়েস্ট চেইন হলো সেইসব রিসোর্সের ক্রম, যেগুলোকে ব্রাউজার অগ্রাধিকার দিয়ে ফেচ করে। লাইটহাউস এই চেইনের তৃতীয় স্তরে থাকা অ্যাসেটগুলোকে লেট-ডিসকভার্ড হিসেবে চিহ্নিত করে। কোন রিসোর্সগুলো প্রি-লোড করতে হবে তা শনাক্ত করার জন্য আপনি প্রি-লোড কী রিকোয়েস্ট অডিট ব্যবহার করতে পারেন।
আপনার HTML ডকুমেন্টের হেডে rel="preload" সহ একটি <link> ট্যাগ যোগ করে আপনি রিসোর্সগুলি প্রি-লোড করতে পারেন:
<link rel="preload" as="script" href="critical.js">
ব্রাউজার আগে থেকে লোড করা রিসোর্সগুলো ক্যাশ করে রাখে, যাতে প্রয়োজনের সময় সেগুলো তাৎক্ষণিকভাবে পাওয়া যায়। (এটি স্ক্রিপ্টগুলো এক্সিকিউট করে না বা স্টাইলশিটগুলো প্রয়োগ করে না।)
রিসোর্স হিন্টস, যেমন preconnect এবং prefetch , ব্রাউজারের প্রয়োজন অনুযায়ী কার্যকর করা হয়। অন্যদিকে, preload ব্রাউজারের জন্য বাধ্যতামূলক। আধুনিক ব্রাউজারগুলো রিসোর্সকে অগ্রাধিকার দেওয়ার ক্ষেত্রে ইতিমধ্যেই বেশ পারদর্শী, একারণে preload মিতব্যয়ীভাবে ব্যবহার করা এবং শুধুমাত্র সবচেয়ে গুরুত্বপূর্ণ রিসোর্সগুলো প্রিলোড করা জরুরি।
অব্যবহৃত প্রিলোডগুলো load হওয়ার প্রায় ৩ সেকেন্ড পর ক্রোমের কনসোলে একটি সতর্কবার্তা দেখায়।
ব্যবহারের ক্ষেত্র
CSS-এ সংজ্ঞায়িত রিসোর্স প্রি-লোড করা হচ্ছে
@font-face নিয়ম দিয়ে নির্ধারিত ফন্ট অথবা CSS ফাইলে সংজ্ঞায়িত ব্যাকগ্রাউন্ড ইমেজগুলো ততক্ষণ পর্যন্ত খুঁজে পাওয়া যায় না, যতক্ষণ না ব্রাউজার সেই CSS ফাইলগুলো ডাউনলোড ও পার্স করে। এই রিসোর্সগুলো প্রি-লোড করলে তা CSS ফাইলগুলো ডাউনলোড হওয়ার আগেই ফেচ করা নিশ্চিত হয়।
CSS ফাইল প্রি-লোড করা হচ্ছে
আপনি যদি ক্রিটিক্যাল সিএসএস পদ্ধতি ব্যবহার করেন, তাহলে আপনার সিএসএস দুটি অংশে বিভক্ত করতে হয়। অ্যাবাভ-দ্য-ফোল্ড কন্টেন্ট রেন্ডার করার জন্য প্রয়োজনীয় ক্রিটিক্যাল সিএসএস ডকুমেন্টের <head> ট্যাগের মধ্যে ইনলাইন করা হয় এবং নন-ক্রিটিক্যাল সিএসএস সাধারণত জাভাস্ক্রিপ্টের মাধ্যমে লেজি-লোড করা হয়। নন-ক্রিটিক্যাল সিএসএস লোড করার আগে জাভাস্ক্রিপ্ট এক্সিকিউট হওয়ার জন্য অপেক্ষা করলে ব্যবহারকারীরা স্ক্রল করার সময় রেন্ডারিংয়ে বিলম্ব হতে পারে, তাই ডাউনলোডটি দ্রুত শুরু করার জন্য <link rel="preload"> ব্যবহার করা একটি ভালো উপায়।
জাভাস্ক্রিপ্ট ফাইল প্রি-লোড করা হচ্ছে
যেহেতু ব্রাউজারগুলো প্রি-লোডেড ফাইলগুলো এক্সিকিউট করে না, তাই ফেচিং এবং এক্সিকিউশনকে আলাদা করার জন্য প্রি-লোডিং কার্যকর, যা টাইম টু ইন্টারেক্টিভ-এর মতো মেট্রিকগুলোকে উন্নত করতে পারে। প্রি-লোডিং সবচেয়ে ভালোভাবে কাজ করে যদি আপনি আপনার জাভাস্ক্রিপ্ট বান্ডেলগুলোকে ভাগ করে শুধু ক্রিটিক্যাল চাঙ্কগুলো প্রি-লোড করেন।
rel=preload কীভাবে প্রয়োগ করবেন
preload প্রয়োগ করার সবচেয়ে সহজ উপায় হলো ডকুমেন্টের <head> অংশে একটি <link> ট্যাগ যোগ করা:
<head>
<link rel="preload" as="script" href="critical.js">
</head>
` as অ্যাট্রিবিউটটি সরবরাহ করলে ব্রাউজার প্রিফেচ করা রিসোর্সের ধরন অনুযায়ী তার অগ্রাধিকার নির্ধারণ করতে, সঠিক হেডার সেট করতে এবং রিসোর্সটি ক্যাশে আগে থেকেই আছে কিনা তা নির্ণয় করতে পারে। এই অ্যাট্রিবিউটের জন্য গৃহীত মানগুলো হলো: script , style , font , image এবং `others` ।
কিছু ধরণের রিসোর্স, যেমন ফন্ট, অ্যানোনিমাস মোডে লোড হয়। সেগুলোর জন্য আপনাকে preload সহ crossorigin অ্যাট্রিবিউটটি সেট করতে হবে:
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin>
<link> এলিমেন্টগুলো একটি type অ্যাট্রিবিউটও গ্রহণ করে, যাতে লিঙ্ক করা রিসোর্সের MIME টাইপ থাকে। ব্রাউজারগুলো ` type অ্যাট্রিবিউটের মান ব্যবহার করে এটা নিশ্চিত করে যে, রিসোর্সগুলো কেবল তখনই প্রি-লোড হবে যখন সেগুলোর ফাইলের ধরন সমর্থিত হবে। যদি কোনো ব্রাউজার নির্দিষ্ট রিসোর্সের ধরন সমর্থন না করে, তবে এটি <link rel="preload"> এলিমেন্টটিকে উপেক্ষা করবে।
আপনি Link HTTP হেডার ব্যবহার করে যেকোনো ধরনের রিসোর্স প্রি-লোড করতে পারেন:
Link: </css/style.css>; rel="preload"; as="style"
HTTP হেডারে preload উল্লেখ করার একটি সুবিধা হলো, এটি খুঁজে বের করার জন্য ব্রাউজারকে ডকুমেন্ট পার্স করতে হয় না, যা কিছু ক্ষেত্রে সামান্য উন্নতি ঘটাতে পারে।
ওয়েবপ্যাক দিয়ে জাভাস্ক্রিপ্ট মডিউল প্রি-লোড করা
আপনি যদি এমন কোনো মডিউল বান্ডলার ব্যবহার করেন যা আপনার অ্যাপ্লিকেশনের বিল্ড ফাইল তৈরি করে, তবে আপনাকে পরীক্ষা করে দেখতে হবে যে এটি প্রিলোড ট্যাগ ইনজেকশন সমর্থন করে কিনা। ওয়েবপ্যাক সংস্করণ 4.6.0 বা তার পরবর্তী সংস্করণগুলিতে, import() ভিতরে ম্যাজিক কমেন্ট ব্যবহারের মাধ্যমে প্রিলোডিং সমর্থিত হয়:
import(_/* webpackPreload: true */_ "CriticalChunk")
আপনি যদি ওয়েবপ্যাকের পুরোনো সংস্করণ ব্যবহার করেন, তাহলে preload-webpack-plugin-এর মতো কোনো থার্ড-পার্টি প্লাগইন ব্যবহার করুন।
কোর ওয়েব ভাইটালস-এর উপর প্রিলোডিং-এর প্রভাব
প্রিলোডিং একটি শক্তিশালী পারফরম্যান্স অপটিমাইজেশন যা লোডিং স্পিডের উপর প্রভাব ফেলে। এই ধরনের অপটিমাইজেশন আপনার সাইটের কোর ওয়েব ভাইটালস -এ পরিবর্তন আনতে পারে, এবং এই বিষয়গুলো সম্পর্কে সচেতন থাকা জরুরি।
বৃহত্তম বিষয়বস্তুপূর্ণ পেইন্ট (LCP)
ফন্ট এবং ইমেজের ক্ষেত্রে লার্জেস্ট কন্টেন্টফুল পেইন্ট (LCP)- এর উপর প্রিলোডিং-এর একটি শক্তিশালী প্রভাব রয়েছে, কারণ ইমেজ এবং টেক্সট নোড উভয়ই LCP ক্যান্ডিডেট হতে পারে। হিরো ইমেজ এবং ওয়েব ফন্ট ব্যবহার করে রেন্ডার করা দীর্ঘ টেক্সট একটি সঠিক স্থানে দেওয়া প্রিলোড হিন্ট থেকে উল্লেখযোগ্যভাবে উপকৃত হতে পারে, এবং যখন ব্যবহারকারীর কাছে এই গুরুত্বপূর্ণ কন্টেন্টগুলো দ্রুত পৌঁছে দেওয়ার সুযোগ থাকে, তখনই এগুলো ব্যবহার করা উচিত।
তবে, প্রি-লোডিং—এবং অন্যান্য অপটিমাইজেশনের ক্ষেত্রে আপনাকে সতর্ক থাকতে হবে! বিশেষ করে, খুব বেশি রিসোর্স প্রি-লোড করা থেকে বিরত থাকুন। যদি খুব বেশি রিসোর্সকে অগ্রাধিকার দেওয়া হয়, তাহলে কার্যত কোনোটিই পাওয়া যায় না। অতিরিক্ত প্রি-লোড হিন্টসের প্রভাব ধীরগতির নেটওয়ার্ক ব্যবহারকারীদের জন্য বিশেষভাবে ক্ষতিকর হবে, যেখানে ব্যান্ডউইথের প্রতিযোগিতা আরও প্রকট হয়ে ওঠে।
এর পরিবর্তে, কয়েকটি উচ্চ-মূল্যের রিসোর্সের উপর মনোযোগ দিন, যেগুলো একটি সঠিক স্থানে প্রিলোড করলে উপকৃত হবে বলে আপনি জানেন। ফন্ট প্রিলোড করার সময়, রিসোর্স লোডের সময় যতটা সম্ভব কমাতে WOFF 2.0 ফরম্যাটে ফন্ট পরিবেশন করা নিশ্চিত করুন। যেহেতু WOFF 2.0-এর ব্রাউজার সাপোর্ট চমৎকার , তাই WOFF 1.0 বা TrueType (TTF)-এর মতো পুরোনো ফরম্যাট ব্যবহার করলে আপনার LCP বিলম্বিত হবে, যদি LCP ক্যান্ডিডেটটি একটি টেক্সট নোড হয়।
LCP এবং জাভাস্ক্রিপ্টের ক্ষেত্রে, ব্রাউজারের প্রিলোড স্ক্যানার যাতে সঠিকভাবে কাজ করতে পারে, সেজন্য আপনাকে সার্ভার থেকে সম্পূর্ণ মার্কআপ পাঠানো নিশ্চিত করতে হবে। আপনি যদি এমন কোনো অভিজ্ঞতা প্রদান করেন যা মার্কআপ রেন্ডার করার জন্য সম্পূর্ণরূপে জাভাস্ক্রিপ্টের উপর নির্ভর করে এবং সার্ভার-রেন্ডার করা HTML পাঠাতে না পারেন, তবে ব্রাউজারের প্রিলোড স্ক্যানার যেখানে পৌঁছাতে পারে না, সেখানে হস্তক্ষেপ করা এবং এমন রিসোর্সগুলো প্রিলোড করা সুবিধাজনক হবে, যা অন্যথায় শুধুমাত্র জাভাস্ক্রিপ্ট লোড ও এক্সিকিউট হওয়া শেষ হওয়ার পরেই খুঁজে পাওয়া যেত।
ক্রমসঞ্চয়ী বিন্যাস স্থানান্তর (CLS)
ওয়েব ফন্টের ক্ষেত্রে কিউমুলেটিভ লেআউট শিফট (CLS) একটি বিশেষভাবে গুরুত্বপূর্ণ মেট্রিক, এবং যেসব ওয়েব ফন্ট তাদের লোড হওয়ার পদ্ধতি নিয়ন্ত্রণ করতে font-display CSS প্রপার্টি ব্যবহার করে, তাদের সাথে CLS-এর একটি উল্লেখযোগ্য সম্পর্ক রয়েছে। ওয়েব ফন্ট-সম্পর্কিত লেআউট শিফট কমানোর জন্য, নিম্নলিখিত কৌশলগুলো বিবেচনা করুন:
-
font-displayজন্য ডিফল্টblockভ্যালু ব্যবহার করার সময় ফন্ট প্রি-লোড করুন। এটি একটি সূক্ষ্ম ভারসাম্য। কোনো ফলব্যাক ছাড়া ফন্টের প্রদর্শন ব্লক করাকে ব্যবহারকারীর অভিজ্ঞতার জন্য একটি সমস্যা হিসেবে বিবেচনা করা যেতে পারে। একদিকে,font-display: block;করে ফন্ট লোড করলে ওয়েব ফন্ট-সম্পর্কিত লেআউটের পরিবর্তন দূর হয়। অন্যদিকে, যদি সেই ওয়েব ফন্টগুলো ব্যবহারকারীর অভিজ্ঞতার জন্য অপরিহার্য হয়, তবে আপনি চাইবেন সেগুলো যত তাড়াতাড়ি সম্ভব লোড হোক। এক্ষেত্রে প্রি-লোডের সাথেfont-display: block;এর সমন্বয় একটি গ্রহণযোগ্য সমাধান হতে পারে। -
font-displayজন্যfallbackভ্যালু ব্যবহার করার সময় ফন্টগুলো প্রি-লোড করুন।fallbackহলোswapএবংblockমাঝামাঝি একটি ব্যবস্থা, কারণ এর ব্লকিং পিরিয়ড অত্যন্ত সংক্ষিপ্ত। - প্রিলোড ছাড়া
font-displayজন্যoptionalমানটি ব্যবহার করুন। যদি কোনো ওয়েব ফন্ট ব্যবহারকারীর অভিজ্ঞতার জন্য অপরিহার্য না হয়, কিন্তু পৃষ্ঠার একটি উল্লেখযোগ্য পরিমাণ টেক্সট রেন্ডার করার জন্য এটি ব্যবহৃত হয়, তবেoptionalমানটি ব্যবহার করার কথা বিবেচনা করুন। প্রতিকূল পরিস্থিতিতে,optionalপরবর্তী নেভিগেশনের জন্য ব্যাকগ্রাউন্ডে ফন্ট লোড করার সময় পৃষ্ঠার টেক্সট একটি ফলব্যাক ফন্টে প্রদর্শন করবে। এই পরিস্থিতিতে এর চূড়ান্ত ফলাফল হলো উন্নত CLS, কারণ সিস্টেম ফন্টগুলো তাৎক্ষণিকভাবে রেন্ডার হবে এবং পরবর্তী পৃষ্ঠা লোডের সময় লেআউটের কোনো পরিবর্তন ছাড়াই ফন্টটি সঙ্গে সঙ্গে লোড হবে।
ওয়েব ফন্টের ক্ষেত্রে CLS অপটিমাইজ করা একটি কঠিন মেট্রিক। বরাবরের মতোই, ল্যাবে পরীক্ষা-নিরীক্ষা করুন, কিন্তু আপনার ফন্ট লোডিং কৌশলগুলো CLS-এর উন্নতি করছে নাকি অবনতি ঘটাচ্ছে, তা নির্ধারণ করতে ফিল্ড ডেটার ওপর আস্থা রাখুন।
পরবর্তী পেইন্টের সাথে মিথস্ক্রিয়া (INP)
ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট হলো একটি মেট্রিক যা ব্যবহারকারীর ইনপুটের প্রতি রেসপন্সিভনেস পরিমাপ করে। যেহেতু ওয়েবের সিংহভাগ ইন্টারঅ্যাক্টিভিটি জাভাস্ক্রিপ্ট দ্বারা চালিত হয়, তাই গুরুত্বপূর্ণ ইন্টারঅ্যাকশনগুলো পরিচালনাকারী জাভাস্ক্রিপ্ট প্রি-লোড করলে একটি পেজের INP কম রাখতে সাহায্য হতে পারে। তবে, মনে রাখতে হবে যে স্টার্টআপের সময় খুব বেশি জাভাস্ক্রিপ্ট প্রি-লোড করলে তার অপ্রত্যাশিত নেতিবাচক পরিণতি হতে পারে, যদি অনেক বেশি রিসোর্স ব্যান্ডউইথের জন্য প্রতিযোগিতা করে।
কোড স্প্লিটিং কীভাবে করবেন, সে বিষয়েও আপনাকে সতর্ক থাকতে হবে। স্টার্টআপের সময় লোড হওয়া জাভাস্ক্রিপ্টের পরিমাণ কমানোর জন্য কোড স্প্লিটিং একটি চমৎকার অপটিমাইজেশন, কিন্তু ইন্টারঅ্যাকশন যদি ঠিক শুরুতেই লোড হওয়া জাভাস্ক্রিপ্টের উপর নির্ভর করে, তবে সেই ইন্টারঅ্যাকশন বিলম্বিত হতে পারে। এর প্রতিকারের জন্য, আপনাকে ব্যবহারকারীর উদ্দেশ্য খতিয়ে দেখতে হবে এবং ইন্টারঅ্যাকশন শুরু হওয়ার আগেই জাভাস্ক্রিপ্টের প্রয়োজনীয় অংশ(গুলো) প্রি-লোড করতে হবে। একটি উদাহরণ হতে পারে, ফর্মের যেকোনো ফিল্ডে ফোকাস করা হলে ফর্মের বিষয়বস্তু যাচাই করার জন্য প্রয়োজনীয় জাভাস্ক্রিপ্ট প্রি-লোড করা।
উপসংহার
পেজের গতি বাড়াতে, ব্রাউজারের দেরিতে খুঁজে পাওয়া গুরুত্বপূর্ণ রিসোর্সগুলো আগে থেকে লোড করে রাখুন। সবকিছু আগে থেকে লোড করাটা হিতে বিপরীত হবে, তাই পরিমিতভাবে preload ব্যবহার করুন এবং বাস্তব ক্ষেত্রে এর প্রভাব যাচাই করে দেখুন ।