রিসোর্স লোডিং অপ্টিমাইজ করুন

পূর্ববর্তী মডিউলে, ক্রিটিক্যাল রেন্ডারিং পাথের পেছনের কিছু তত্ত্ব এবং কীভাবে রেন্ডার-ব্লকিং ও পার্সার-ব্লকিং রিসোর্স একটি পেজের প্রাথমিক রেন্ডারিংয়ে বিলম্ব ঘটাতে পারে, তা আলোচনা করা হয়েছিল। এখন যেহেতু আপনি এর পেছনের কিছু তত্ত্ব বুঝতে পেরেছেন, আপনি ক্রিটিক্যাল রেন্ডারিং পাথ অপ্টিমাইজ করার কিছু কৌশল শিখতে প্রস্তুত।

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

রেন্ডার ব্লকিং

পূর্ববর্তী মডিউলে যেমন আলোচনা করা হয়েছে, CSS হলো একটি রেন্ডার-ব্লকিং রিসোর্স, কারণ এটি CSS অবজেক্ট মডেল (CSSOM) তৈরি না হওয়া পর্যন্ত ব্রাউজারকে কোনো কন্টেন্ট রেন্ডার করতে বাধা দেয়। ব্রাউজার ‘ফ্ল্যাশ অফ আনস্টাইলড কন্টেন্ট’ (FOUC) প্রতিরোধ করার জন্য রেন্ডারিং ব্লক করে, যা ব্যবহারকারীর অভিজ্ঞতার দৃষ্টিকোণ থেকে অনাকাঙ্ক্ষিত।

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

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

পার্সার ব্লকিং

একটি পার্সার-ব্লকিং রিসোর্স এইচটিএমএল পার্সারকে বাধা দেয়, যেমন async বা defer অ্যাট্রিবিউট ছাড়া একটি <script> এলিমেন্ট। যখন পার্সার একটি <script> এলিমেন্টের সম্মুখীন হয়, তখন এইচটিএমএল-এর বাকি অংশ পার্স করার আগে ব্রাউজারকে স্ক্রিপ্টটি মূল্যায়ন ও কার্যকর করতে হয়। এটি ইচ্ছাকৃতভাবেই করা হয়, কারণ DOM যখন নির্মাণাধীন থাকে, সেই সময়ে স্ক্রিপ্টগুলো এটিকে পরিবর্তন বা অ্যাক্সেস করতে পারে।

<!-- This is a parser-blocking script: -->
<script src="/script.js"></script>

এক্সটার্নাল জাভাস্ক্রিপ্ট ফাইল ব্যবহার করার সময় ( async বা defer ছাড়া — অথবা type=module যা ডিফল্টভাবে defer ), ফাইলটি খুঁজে পাওয়ার পর থেকে ডাউনলোড, পার্স এবং এক্সিকিউট না হওয়া পর্যন্ত পার্সারটি ব্লক হয়ে থাকে। ইনলাইন জাভাস্ক্রিপ্ট ব্যবহার করার ক্ষেত্রেও, ইনলাইন স্ক্রিপ্টটি পার্স এবং এক্সিকিউট না হওয়া পর্যন্ত পার্সারটি একইভাবে ব্লক হয়ে থাকে।

প্রিলোড স্ক্যানার

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

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

  • CSS-এর background-image প্রপার্টি ব্যবহার করে ছবিগুলো লোড করা হয়। এই ছবির রেফারেন্সগুলো CSS-এ থাকে এবং প্রিলোড স্ক্যানার দ্বারা এগুলো শনাক্ত করা যায় না।
  • জাভাস্ক্রিপ্ট ব্যবহার করে DOM-এ ইনজেক্ট করা <script> এলিমেন্ট মার্কআপের আকারে ডাইনামিকভাবে লোড হওয়া স্ক্রিপ্ট অথবা ডাইনামিক import() ব্যবহার করে লোড করা মডিউল।
  • জাভাস্ক্রিপ্ট ব্যবহার করে ক্লায়েন্টে এইচটিএমএল রেন্ডার করা হয়। এই ধরনের মার্কআপ জাভাস্ক্রিপ্ট রিসোর্সের স্ট্রিং-এর মধ্যে থাকে এবং প্রিলোড স্ক্যানার দ্বারা তা শনাক্ত করা যায় না।
  • CSS @import ডিক্লারেশন।

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

সিএসএস

CSS একটি পেজের উপস্থাপন এবং বিন্যাস নির্ধারণ করে। পূর্বে যেমন আলোচনা করা হয়েছে, CSS একটি রেন্ডার-ব্লকিং রিসোর্স, তাই আপনার CSS অপ্টিমাইজ করলে তা পেজ লোড হওয়ার সামগ্রিক সময়ের উপর উল্লেখযোগ্য প্রভাব ফেলতে পারে।

মিনিফিকেশন

CSS ফাইল মিনিফাই করলে CSS রিসোর্সের ফাইলের আকার কমে যায়, ফলে সেগুলো দ্রুত ডাউনলোড করা যায়। এটি মূলত করা হয় সোর্স CSS ফাইল থেকে স্পেস এবং অন্যান্য অদৃশ্য ক্যারেক্টারের মতো কন্টেন্ট সরিয়ে দিয়ে এবং ফলাফলটিকে একটি নতুন অপ্টিমাইজ করা ফাইলে আউটপুট করার মাধ্যমে।

/* Unminified CSS: */

/* Heading 1 */
h1 {
  font-size: 2em;
  color: #000000;
}

/* Heading 2 */
h2 {
  font-size: 1.5em;
  color: #000000;
}

/* Minified CSS: */
h1,h2{color:#000}h1{font-size:2em}h2{font-size:1.5em}

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

অব্যবহৃত CSS মুছে ফেলুন

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

বর্তমান পৃষ্ঠার অব্যবহৃত CSS খুঁজে বের করতে, Chrome DevTools-এর Coverage টুলটি ব্যবহার করুন।

ক্রোম ডেভটুলস-এর কভারেজ টুলের একটি স্ক্রিনশট। এর নিচের প্যানে একটি CSS ফাইল নির্বাচিত রয়েছে, যেখানে বর্তমান পেজ লেআউটে অব্যবহৃত বিপুল পরিমাণ CSS কোড দেখা যাচ্ছে।
ক্রোম ডেভটুলস-এর কভারেজ টুলটি বর্তমান পেজে অব্যবহৃত CSS (এবং জাভাস্ক্রিপ্ট) শনাক্ত করার জন্য উপযোগী। এটি ব্যবহার করে CSS ফাইলগুলোকে একাধিক রিসোর্সে বিভক্ত করা যায়, যা বিভিন্ন পেজ দ্বারা লোড করা হবে। এর ফলে একটি অনেক বড় CSS বান্ডেল পাঠানোর প্রয়োজন হয় না, যা পেজ রেন্ডার হতে বিলম্ব ঘটাতে পারে।

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

CSS @import ডিক্লারেশন এড়িয়ে চলুন

যদিও এটি সুবিধাজনক মনে হতে পারে, আপনার CSS-এ @import ডিক্লারেশন এড়িয়ে চলা উচিত:

/* Don't do this: */
@import url('style.css');

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

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

<!-- Do this instead: -->
<link rel="stylesheet" href="style.css">

বেশিরভাগ ক্ষেত্রে, আপনি @import কে একটি <link rel="stylesheet"> এলিমেন্ট ব্যবহার করে প্রতিস্থাপন করতে পারেন। <link> এলিমেন্টগুলো স্টাইলশিটগুলোকে একসাথে ডাউনলোড করার সুযোগ দেয় এবং সামগ্রিক লোড টাইম কমিয়ে দেয়, যা @import ডিক্লারেশনের বিপরীত, কারণ @import স্টাইলশিটগুলোকে ধারাবাহিকভাবে ডাউনলোড করে।

ইনলাইন ক্রিটিক্যাল সিএসএস

CSS ফাইল ডাউনলোড করতে যে সময় লাগে, তা একটি পেজের FCP (ফার্স্ট ক্লাস প্রিভিলেজ) বাড়িয়ে দিতে পারে। ডকুমেন্টের <head> এলিমেন্টের মধ্যে গুরুত্বপূর্ণ স্টাইলগুলো ইনলাইন করলে CSS রিসোর্সের জন্য নেটওয়ার্ক রিকোয়েস্টের প্রয়োজন হয় না, এবং—সঠিকভাবে করা হলে—ব্যবহারকারীর ব্রাউজার ক্যাশে প্রস্তুত না থাকলে পেজের প্রাথমিক লোড টাইম উন্নত করতে পারে। বাকি CSS অ্যাসিঙ্ক্রোনাসভাবে লোড করা যেতে পারে, অথবা <body> এলিমেন্টের শেষে যুক্ত করা যেতে পারে।

<head>
  <title>Page Title</title>
  <!-- ... -->
  <style>h1,h2{color:#000}h1{font-size:2em}h2{font-size:1.5em}</style>
</head>
<body>
  <!-- Other page markup... -->
  <link rel="stylesheet" href="non-critical.css">
</body>

অসুবিধার দিকটি হলো, প্রচুর পরিমাণে CSS ইনলাইন করলে প্রাথমিক HTML রেসপন্সে অতিরিক্ত বাইট যুক্ত হয়। যেহেতু HTML রিসোর্সগুলো প্রায়শই খুব বেশি সময়ের জন্য—বা আদৌ—ক্যাশ করা যায় না, এর মানে হলো ইনলাইন করা CSS পরবর্তী পেজগুলোর জন্য ক্যাশ করা হয় না, যেগুলো হয়তো এক্সটার্নাল স্টাইল শিটে একই CSS ব্যবহার করতে পারে। এই প্রচেষ্টার বিনিময়ে প্রাপ্ত সুবিধা-অসুবিধাগুলো সার্থক কিনা তা নিশ্চিত করতে আপনার পেজের পারফরম্যান্স পরীক্ষা ও পরিমাপ করুন।

সিএসএস ডেমো

জাভাস্ক্রিপ্ট

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

রেন্ডার-ব্লকিং জাভাস্ক্রিপ্ট

defer বা async অ্যাট্রিবিউট ছাড়া <script> ` এলিমেন্ট লোড করার সময়, স্ক্রিপ্টটি ডাউনলোড, পার্স এবং এক্সিকিউট না হওয়া পর্যন্ত ব্রাউজার পার্সিং ও রেন্ডারিং ব্লক করে রাখে। একইভাবে, ইনলাইন স্ক্রিপ্টগুলোও পার্স এবং এক্সিকিউট না হওয়া পর্যন্ত পার্সারকে ব্লক করে রাখে।

async বনাম defer

async এবং defer এইচটিএমএল পার্সারকে ব্লক না করেই এক্সটার্নাল স্ক্রিপ্ট লোড করার সুযোগ দেয়, অন্যদিকে type="module" যুক্ত স্ক্রিপ্ট (ইনলাইন স্ক্রিপ্ট সহ) স্বয়ংক্রিয়ভাবে ডেফার্ড হয়ে যায়। তবে, async এবং defer মধ্যে কিছু পার্থক্য রয়েছে যা বোঝা জরুরি।

বিভিন্ন স্ক্রিপ্ট লোডিং পদ্ধতির একটি চিত্রায়ন, যেখানে async, defer, type='module' এবং এই তিনটির সমন্বয়ের মতো ব্যবহৃত বিভিন্ন অ্যাট্রিবিউটের উপর ভিত্তি করে পার্সার, ফেচ এবং এক্সিকিউশনের ভূমিকা বিশদভাবে বর্ণনা করা হয়েছে।
https://html.spec.whatwg.org/multipage/scripting.html থেকে সংগৃহীত।

async দিয়ে লোড করা স্ক্রিপ্টগুলো ডাউনলোড হওয়ার সাথে সাথেই পার্স এবং এক্সিকিউট করা হয়, অন্যদিকে defer দিয়ে লোড করা স্ক্রিপ্টগুলো HTML ডকুমেন্ট পার্সিং শেষ হলে এক্সিকিউট হয়—এটি ব্রাউজারের DOMContentLoaded ইভেন্টের সাথে একই সময়ে ঘটে। এছাড়াও, async স্ক্রিপ্টগুলো এলোমেলোভাবে এক্সিকিউট হতে পারে, কিন্তু defer স্ক্রিপ্টগুলো মার্কআপে যে ক্রমে থাকে, সেই ক্রমেই এক্সিকিউট হয়।

ক্লায়েন্ট-সাইড রেন্ডারিং

সাধারণত, কোনো গুরুত্বপূর্ণ কন্টেন্ট বা পেজের LCP এলিমেন্ট রেন্ডার করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করা থেকে বিরত থাকা উচিত। এটি ক্লায়েন্ট-সাইড রেন্ডারিং নামে পরিচিত এবং এটি সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA)-এ ব্যাপকভাবে ব্যবহৃত একটি কৌশল।

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

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

মিনিফিকেশন

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

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

// Unuglified JavaScript source code:
export function injectScript () {
  const scriptElement = document.createElement('script');
  scriptElement.src = '/js/scripts.js';
  scriptElement.type = 'module';

  document.body.appendChild(scriptElement);
}

পূর্ববর্তী জাভাস্ক্রিপ্ট সোর্স কোডটিকে অগ্লিফাই করা হলে, ফলাফলটি নিম্নলিখিত কোড স্নিপেটের মতো দেখতে হতে পারে:

// Uglified JavaScript production code:
export function injectScript(){const t=document.createElement("script");t.src="/js/scripts.js",t.type="module",document.body.appendChild(t)}

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

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

জাভাস্ক্রিপ্ট ডেমো

আপনার জ্ঞান পরীক্ষা করুন

ব্রাউজারে একাধিক CSS ফাইল লোড করার সেরা উপায় কী?

CSS @import ডিক্লারেশন।
আবার চেষ্টা করুন।
একাধিক <link> উপাদান।
সঠিক!

ব্রাউজার প্রিলোড স্ক্যানার কী কাজ করে?

এটি একটি সেকেন্ডারি এইচটিএমএল পার্সার যা ডম পার্সারের আগেই রিসোর্সগুলি খুঁজে বের করার জন্য র মার্কআপ পরীক্ষা করে, যাতে সেগুলিকে আরও দ্রুত শনাক্ত করা যায়।
সঠিক!
একটি HTML রিসোর্সে <link rel="preload"> এলিমেন্ট সনাক্ত করে।
আবার চেষ্টা করুন।

জাভাস্ক্রিপ্ট রিসোর্স ডাউনলোড করার সময় ব্রাউজার কেন ডিফল্টরূপে সাময়িকভাবে HTML পার্সিং ব্লক করে?

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

এরপরে: রিসোর্স ইঙ্গিতের মাধ্যমে ব্রাউজারকে সহায়তা করা

এখন যেহেতু আপনি বুঝতে পেরেছেন যে <head> এলিমেন্টে লোড হওয়া রিসোর্সগুলো কীভাবে পেজের প্রাথমিক লোড এবং বিভিন্ন মেট্রিককে প্রভাবিত করতে পারে, তাই সামনে এগোনোর সময় এসেছে। পরবর্তী মডিউলে রিসোর্স হিন্টস নিয়ে আলোচনা করা হবে; এবং কীভাবে এগুলো ব্রাউজারকে রিসোর্স লোড করা ও ক্রস-অরিজিন সার্ভারের সাথে সংযোগ স্থাপন শুরু করার জন্য মূল্যবান ইঙ্গিত দিতে পারে, যা ব্রাউজার অন্যথায় করত না।