সমস্যা: “শিক্ষাবাতায়ন” নামে একটি শিক্ষামূলক ওয়েবসাইট Next.js দিয়ে তৈরি করা হয়েছে। সাইটটিতে Google Fonts থেকে ‘Noto Sans Bengali’ ফন্ট ব্যবহার করা হয়েছে। কিন্তু ওয়েবসাইট লোড হতে অনেক সময় নিচ্ছে। ব্যবহারকারীরা অভিযোগ করছেন যে প্রথমে টেক্সট অদৃশ্য থাকে, তারপর হঠাৎ করে দেখা যায় (FOIT – Flash of Invisible Text)। এছাড়া, ফন্ট লোড হওয়ার আগে ডিফল্ট ফন্টে টেক্সট দেখা যায়, তারপর ফন্ট লোড হলে টেক্সট “জাম্প” করে (FOUT – Flash of Unstyled Text)।
বর্তমান কোড:
// app/layout.tsx
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="bn">
<head>
{/* Google Fonts থেকে বাংলা ফন্ট লোড করা */}
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet"
/>
</head>
<body>
{children}
</body>
</html>
)
}/* globals.css */
body {
font-family: 'Noto Sans Bengali', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Noto Sans Bengali', sans-serif;
font-weight: 700;
}সমাধান: Next.js এর বিল্ট-ইন ফন্ট সিস্টেম ব্যবহার
Next.js এর বিল্ট-ইন ফন্ট সিস্টেম ব্যবহার করে এই সমস্যা সমাধান করা যায়। এটি ফন্ট ফাইল সার্ভার সাইডে অপটিমাইজ করে, CSS এবং ফন্ট ফাইল স্ট্যাটিক্যালি হোস্ট করে, এবং ফন্ট ফাইল প্রি-লোড করে।
ধাপ ১: next/font/google ইম্পোর্ট করা
// app/layout.tsx
import { Noto_Sans_Bengali } from 'next/font/google'
import './globals.css'ধাপ ২: ফন্ট কনফিগার করা
// app/layout.tsx
import { Noto_Sans_Bengali } from 'next/font/google'
import './globals.css'
// ফন্ট অপটিমাইজেশন
const notoSansBengali = Noto_Sans_Bengali({
subsets: ['bengali'], // শুধু বাংলা ক্যারেক্টার লোড করা
weight: ['400', '500', '700'], // শুধু প্রয়োজনীয় ওয়েট লোড করা
display: 'swap', // ফন্ট লোড হওয়ার আগে ফলব্যাক ফন্ট দেখানো
fallback: ['system-ui', 'Arial', 'sans-serif'], // ফলব্যাক ফন্ট
preload: true, // ফন্ট প্রি-লোড করা
variable: '--font-bengali', // CSS ভেরিয়েবল তৈরি করা
adjustFontFallback: 'Arial', // বাংলা সাপোর্ট করে এমন ফন্ট
})ধাপ ৩: ফন্ট ব্যবহার করা
// app/layout.tsx
import { Noto_Sans_Bengali } from 'next/font/google'
import './globals.css'
// ফন্ট অপটিমাইজেশন
const notoSansBengali = Noto_Sans_Bengali({
subsets: ['bengali'],
weight: ['400', '500', '700'],
display: 'swap',
fallback: ['system-ui', 'Arial', 'sans-serif'],
preload: true,
variable: '--font-bengali',
adjustFontFallback: 'Arial',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="bn" className={notoSansBengali.variable}>
<body>
{children}
</body>
</html>
)
}ধাপ ৪: CSS ভেরিয়েবল ব্যবহার করা
/* globals.css */
:root {
--font-bengali: 'Noto Sans Bengali', system-ui, Arial, sans-serif;
}
body {
font-family: var(--font-bengali);
font-size-adjust: 0.5; /* ফন্ট সাইজ অ্যাডজাস্টমেন্ট */
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-bengali);
font-weight: 700;
}প্রতিটি সেটিং এর ব্যাখ্যা:
subsets: ['bengali']: এই সেটিং শুধু বাংলা ক্যারেক্টার লোড করে, যা ফন্ট ফাইল সাইজ কমায়। যদি আপনি শুধু বাংলা ক্যারেক্টার ব্যবহার করেন, তাহলে অন্যান্য ভাষার ক্যারেক্টার লোড করার দরকার নেই।weight: ['400', '500', '700']: এই সেটিং শুধু প্রয়োজনীয় ফন্ট ওয়েট লোড করে। ‘Noto Sans Bengali’ ফন্টের 9টি ওয়েট আছে (100 থেকে 900), কিন্তু আমরা শুধু 3টি ওয়েট ব্যবহার করছি, যা ফন্ট ফাইল সাইজ কমায়।display: 'swap': এই সেটিং ফন্ট লোড হওয়ার আগে ফলব্যাক ফন্ট দেখায়, যা FOIT (Flash of Invisible Text) দূর করে। ফন্ট লোড হলে ফলব্যাক ফন্ট থেকে কাস্টম ফন্টে স্উইচ করে।fallback: ['system-ui', 'Arial', 'sans-serif']: এই সেটিং ফন্ট লোড না হলে ফলব্যাক ফন্ট হিসেবে সিস্টেম ফন্ট ব্যবহার করে। এটি ফন্ট লোড হওয়ার আগে ব্যবহারকারীকে টেক্সট দেখতে সাহায্য করে।preload: true: এই সেটিং ফন্ট ফাইল প্রি-লোড করে, যা ফন্ট লোড টাইম কমায়। এটি<link rel="preload">ট্যাগ যোগ করে, যা ব্রাউজারকে ফন্ট ফাইল আগে থেকে লোড করতে বলে।variable: '--font-bengali': এই সেটিং CSS ভেরিয়েবল তৈরি করে, যা ফন্ট ব্যবহার সহজ করে। এটিclassNameহিসেবে ব্যবহার করা হয় এবং CSS এvar(--font-bengali)হিসেবে ব্যবহার করা যায়।adjustFontFallback: 'Arial': এই সেটিং ফলব্যাক ফন্ট হিসেবে ‘Arial’ ব্যবহার করে, যা বাংলা ক্যারেক্টার সাপোর্ট করে। এটি ফন্ট লোড হওয়ার আগে বাংলা টেক্সট দেখাতে সাহায্য করে।
ফলাফল:
“শিক্ষাবাতায়ন” ওয়েবসাইটে এই অপটিমাইজেশন প্রয়োগ করার পর:
- ফন্ট ফাইল সাইজ 245KB থেকে 78KB এ কমেছে (68% কম)
- ফন্ট লোড টাইম 920ms থেকে 280ms এ কমেছে (70% কম)
- FCP (First Contentful Paint) 2.3s থেকে 0.8s এ কমেছে (65% কম)
- LCP (Largest Contentful Paint) 3.1s থেকে 1.2s এ কমেছে (61% কম)
- CLS (Cumulative Layout Shift) 0.32 থেকে 0.04 এ কমেছে (88% কম)
- Google PageSpeed স্কোর 62 থেকে 94 এ উন্নীত হয়েছে