জাভাস্ক্রিপ্ট ইকোসিস্টেম জুড়ে সবচেয়ে বড় কন্টেন্টফুল পেইন্ট উন্নত করা।
প্রোজেক্ট অরোরার অংশ হিসেবে, কোর ওয়েব ভাইটাল অনুযায়ী ভালো পারফরম্যান্স নিশ্চিত করতে Google জনপ্রিয় ওয়েব ফ্রেমওয়ার্কের সাথে কাজ করছে। Angular এবং Next.js ইতিমধ্যেই ফন্ট ইনলাইনিং করেছে, যা এই নিবন্ধের প্রথম অংশে ব্যাখ্যা করা হয়েছে। দ্বিতীয় অপ্টিমাইজেশানটি আমরা কভার করব তা হল সমালোচনামূলক CSS ইনলাইনিং যা এখন কৌণিক CLI তে ডিফল্টরূপে সক্রিয় করা হয়েছে এবং Nuxt.js-এ বাস্তবায়নের কাজ চলছে।
ফন্ট ইনলাইনিং
শত শত অ্যাপ্লিকেশন বিশ্লেষণ করার পর, অরোরা দল দেখতে পেয়েছে যে বিকাশকারীরা প্রায়শই তাদের অ্যাপ্লিকেশনগুলিতে ফন্টগুলিকে index.html এর <head> উপাদানে উল্লেখ করে অন্তর্ভুক্ত করে। উপাদান আইকনগুলি অন্তর্ভুক্ত করার সময় এটি কেমন দেখাবে তার একটি উদাহরণ এখানে রয়েছে:
<!doctype html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
...
</html>
যদিও এই প্যাটার্নটি সম্পূর্ণ বৈধ এবং কার্যকরী, এটি অ্যাপ্লিকেশনটির রেন্ডারিংকে ব্লক করে এবং একটি অতিরিক্ত অনুরোধ প্রবর্তন করে। কী ঘটছে তা আরও ভালভাবে বোঝার জন্য, উপরের HTML এ উল্লেখ করা স্টাইলশীটের উত্স কোডটি দেখুন:
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/font.woff2) format('woff2');
}
.material-icons {
/*...*/
}
লক্ষ্য করুন কিভাবে font-face সংজ্ঞা fonts.gstatic.com এ হোস্ট করা একটি বহিরাগত ফাইলকে উল্লেখ করে। অ্যাপ্লিকেশন লোড করার সময়, ব্রাউজারটিকে প্রথমে মাথায় উল্লেখ করা মূল স্টাইলশীটটি ডাউনলোড করতে হবে।
এরপরে, ব্রাউজারটি woff2 ফাইলটি ডাউনলোড করে, তারপর অবশেষে, এটি অ্যাপ্লিকেশনটি রেন্ডার করার সাথে এগিয়ে যেতে সক্ষম হয়।
অপ্টিমাইজেশনের একটি সুযোগ হল বিল্ড টাইমে প্রাথমিক স্টাইলশীট ডাউনলোড করা এবং index.html এ ইনলাইন করা। এটি রানটাইমে CDN-এ পুরো রাউন্ড ট্রিপ এড়িয়ে যায়, ব্লক করার সময় কমিয়ে দেয়।
অ্যাপ্লিকেশনটি তৈরি করার সময়, CDN-এ একটি অনুরোধ পাঠানো হয়, এটি স্টাইলশীটটি নিয়ে আসে এবং এটিকে HTML ফাইলে ইনলাইন করে, ডোমেনে একটি <link rel=preconnect> যোগ করে। এই কৌশলটি প্রয়োগ করে, আমরা নিম্নলিখিত ফলাফল পেতে পারি:
<!doctype html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin >
<style type="text/css">
@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/font.woff2) format('woff2');}.material-icons{/*...*/}</style>
...
</html>
ফন্ট ইনলাইনিং এখন Next.js এবং Angular এ উপলব্ধ
যখন ফ্রেমওয়ার্ক ডেভেলপাররা অন্তর্নিহিত টুলিং-এ অপ্টিমাইজেশান প্রয়োগ করে, তখন তারা বিদ্যমান এবং নতুন অ্যাপ্লিকেশনগুলির জন্য এটি সক্ষম করা সহজ করে তোলে, যা সমগ্র ইকোসিস্টেমের উন্নতি নিয়ে আসে।
এই উন্নতিটি ডিফল্টরূপে Next.js v10.2 এবং Angular v11 থেকে সক্রিয় করা হয়েছে। উভয়েরই Google এবং Adobe ফন্ট ইনলাইন করার জন্য সমর্থন রয়েছে। কৌণিক v12.2 এ পরেরটি চালু করার আশা করছে।
আপনি GitHub-এ Next.js-এ ফন্ট ইনলাইনিং এর বাস্তবায়ন খুঁজে পেতে পারেন এবং কৌণিক প্রসঙ্গে এই অপ্টিমাইজেশন ব্যাখ্যা করে ভিডিওটি দেখুন।
ইনলাইন সমালোচনামূলক CSS
আরেকটি বর্ধনের মধ্যে গুরুত্বপূর্ণ CSS ইনলাইন করে ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) এবং সবচেয়ে বড় কনটেন্টফুল পেইন্ট (LCP) মেট্রিক্সের উন্নতি করা জড়িত। একটি পৃষ্ঠার সমালোচনামূলক CSS এর প্রাথমিক রেন্ডারিং এ ব্যবহৃত সমস্ত শৈলী অন্তর্ভুক্ত করে। বিষয়টি সম্পর্কে আরও জানতে, ডিফার অ-সমালোচনামূলক CSS দেখুন।
আমরা লক্ষ্য করেছি যে অনেক অ্যাপ্লিকেশন সিঙ্ক্রোনাসভাবে স্টাইল লোড করছে, যা অ্যাপ্লিকেশন রেন্ডারিংকে ব্লক করে। একটি দ্রুত সমাধান হল অ্যাসিঙ্ক্রোনাসভাবে শৈলী লোড করা। media="all" দিয়ে স্ক্রিপ্টগুলি লোড করার পরিবর্তে, print media অ্যাট্রিবিউটের মান সেট করুন এবং একবার লোডিং সম্পূর্ণ হলে, অ্যাট্রিবিউটের মানটি all সাথে প্রতিস্থাপন করুন:
<link rel="stylesheet" href="..." media="print" onload="this.media='all'">
তবে এই অভ্যাসটি স্টাইল না করা বিষয়বস্তুর ঝাঁকুনি সৃষ্টি করতে পারে।
উপরের ভিডিওটি একটি পৃষ্ঠার রেন্ডারিং দেখায়, যা তার শৈলীগুলিকে অ্যাসিঙ্ক্রোনাসভাবে লোড করে৷ ফ্লিকার ঘটে কারণ ব্রাউজার প্রথমে স্টাইল ডাউনলোড করা শুরু করে, তারপর এইচটিএমএল রেন্ডার করে যা অনুসরণ করে। ব্রাউজার শৈলীগুলি ডাউনলোড করার পরে, এটি লিঙ্ক উপাদানটির onload ইভেন্টটিকে ট্রিগার করে, media বৈশিষ্ট্যগুলিকে আপডেট করে এবং DOM-এ শৈলীগুলি প্রয়োগ করে all
এইচটিএমএল রেন্ডারিং এবং শৈলী প্রয়োগের মধ্যে সময়কালে পৃষ্ঠাটি আংশিকভাবে আনস্টাইল করা হয়। যখন ব্রাউজারটি শৈলী ব্যবহার করে, তখন আমরা ফ্লিকারিং দেখতে পাই, যা ব্যবহারকারীর একটি খারাপ অভিজ্ঞতা এবং এর ফলে Cumulative Layout Shift (CLS) এ রিগ্রেশন হয়।
সমালোচনামূলক CSS ইনলাইনিং , অ্যাসিঙ্ক্রোনাস স্টাইল লোডিং সহ, লোডিং আচরণকে উন্নত করতে পারে। একটি স্টাইলশীটে নির্বাচকদের দেখে এবং এইচটিএমএল-এর সাথে মিলে যাওয়ার মাধ্যমে ক্রিটারস টুলটি খুঁজে বের করে যে পৃষ্ঠায় কোন স্টাইল ব্যবহার করা হয়েছে। যখন এটি একটি মিল খুঁজে পায়, তখন এটি সংশ্লিষ্ট শৈলীগুলিকে সমালোচনামূলক CSS-এর অংশ হিসাবে বিবেচনা করে এবং সেগুলিকে ইনলাইন করে।
আসুন একটি উদাহরণ দেখি:
<head>
<link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">
</head>
<body>
<section>
<button class="primary"></button>
</section>
</body>
/* styles.css */
section button.primary {
/* ... */
}
.list {
/* ... */
}
ইনলাইন করার আগে উদাহরণ।
উপরের উদাহরণে, ক্রিটাররা styles.css এর বিষয়বস্তু পড়বে এবং পার্স করবে, তারপর এটি HTML-এর বিপরীতে দুটি নির্বাচকের সাথে মেলে এবং আবিষ্কার করবে যে আমরা section button.primary ব্যবহার করি। অবশেষে ক্রিটাররা পৃষ্ঠার <head> এ সংশ্লিষ্ট শৈলীগুলিকে ইনলাইন করবে যার ফলে:
<head>
<link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">
<style>
section button.primary {
/* ... */
}
</style>
</head>
<body>
<section>
<button class="primary"></button>
</section>
</body>
ইনলাইন করার পরে উদাহরণ।
HTML-এ সমালোচনামূলক CSS ইনলাইন করার পরে আপনি দেখতে পাবেন যে পৃষ্ঠার ফ্লিকারিং চলে গেছে:
সমালোচনামূলক CSS ইনলাইনিং এখন অ্যাঙ্গুলারে উপলব্ধ এবং v12-এ ডিফল্টরূপে সক্রিয়। আপনি v11-এ থাকলে, angular.json এ inlineCritical প্রপার্টি true হিসেবে সেট করে এটি চালু করুন। Next.js-এ এই বৈশিষ্ট্যটি বেছে নিতে experimental: { optimizeCss: true } আপনার next.config.js এ।
উপসংহার
এই পোস্টে আমরা Chrome এবং ওয়েব ফ্রেমওয়ার্কের মধ্যে কিছু সহযোগিতার উপর স্পর্শ করেছি। আপনি যদি একজন ফ্রেমওয়ার্ক লেখক হন এবং আপনার প্রযুক্তিতে আমরা যে সমস্যাগুলি মোকাবেলা করেছি তার কিছু চিনতে পেরেছি, আমরা আশা করি আমাদের ফলাফলগুলি আপনাকে অনুরূপ কর্মক্ষমতা অপ্টিমাইজেশান প্রয়োগ করতে অনুপ্রাণিত করবে৷
উন্নতি সম্পর্কে আরও জানুন । কোর ওয়েব ভাইটালসের জন্য আমরা যে অপ্টিমাইজেশান কাজ করছি তার একটি বিস্তৃত তালিকা আপনি অরোরার পরিচয় পোস্টে খুঁজে পেতে পারেন৷