সমস্যা: “ডিজাইন হাব” নামে একটি ডিজাইন এজেন্সির Next.js ওয়েবসাইটে ‘Montserrat’ ফন্টের বিভিন্ন ওয়েট (300, 400, 500, 600, 700) ব্যবহার করা হয়েছে। প্রতিটি ওয়েট আলাদা ফন্ট ফাইল হিসেবে লোড হচ্ছে, যা ওয়েবসাইটের লোড টাইম বাড়িয়ে দিচ্ছে। এছাড়া, ডিজাইন টিম চায় যে ওয়েবসাইটে বিভিন্ন ফন্ট ওয়েট ব্যবহার করা হোক, কিন্তু পারফরম্যান্স ইস্যু এড়াতে চায়।
বর্তমান কোড:
// app/layout.tsx
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<head>
{/* Google Fonts থেকে Montserrat ফন্টের বিভিন্ন ওয়েট লোড করা */}
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body>
{children}
</body>
</html>
)
}/* globals.css */
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
}
h1 {
font-weight: 700;
}
h2 {
font-weight: 600;
}
h3 {
font-weight: 500;
}
.light-text {
font-weight: 300;
}সমাধান: ভেরিয়েবল ফন্ট ব্যবহার
Next.js এর বিল্ট-ইন ফন্ট সিস্টেম ব্যবহার করে ভেরিয়েবল ফন্ট লোড করা যায়, যা একটি সিঙ্গেল ফন্ট ফাইলে বিভিন্ন ওয়েট সাপোর্ট করে।
ধাপ ১: next/font/google ইম্পোর্ট করা এবং ভেরিয়েবল ফন্ট কনফিগার করা
// app/layout.tsx
import { Montserrat } from 'next/font/google'
import './globals.css'
// ভেরিয়েবল ফন্ট কনফিগারেশন
const montserrat = Montserrat({
subsets: ['latin'],
// ভেরিয়েবল ফন্ট সাপোর্ট করে, তাই সব ওয়েট একটি ফাইলে থাকে
variable: '--font-montserrat',
display: 'swap',
})ধাপ ২: ফন্ট ব্যবহার করা
// app/layout.tsx
import { Montserrat } from 'next/font/google'
import './globals.css'
// ভেরিয়েবল ফন্ট কনফিগারেশন
const montserrat = Montserrat({
subsets: ['latin'],
variable: '--font-montserrat',
display: 'swap',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en" className={montserrat.variable}>
<body>
{children}
</body>
</html>
)
}ধাপ ৩: CSS ভেরিয়েবল ব্যবহার করা
/* globals.css */
:root {
--font-montserrat: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
font-family: var(--font-montserrat);
font-weight: 400;
}
h1 {
font-weight: 700;
}
h2 {
font-weight: 600;
}
h3 {
font-weight: 500;
}
.light-text {
font-weight: 300;
}প্রতিটি সেটিং এর ব্যাখ্যা:
Montserratফন্ট ইম্পোর্ট: Next.js এরnext/font/googleথেকেMontserratফন্ট ইম্পোর্ট করা হয়েছে। এটি Google Fonts থেকে ফন্ট লোড করে, কিন্তু Next.js এর বিল্ট-ইন ফন্ট সিস্টেম ব্যবহার করে।subsets: ['latin']: এই সেটিং শুধু লাতিন ক্যারেক্টার লোড করে, যা ফন্ট ফাইল সাইজ কমায়। যদি আপনি শুধু ইংরেজি ক্যারেক্টার ব্যবহার করেন, তাহলে অন্যান্য ভাষার ক্যারেক্টার লোড করার দরকার নেই।- ভেরিয়েবল ফন্ট:
Montserratফন্ট ভেরিয়েবল ফন্ট সাপোর্ট করে, তাই আমরাweightপ্রপার্টি সেট করিনি। ভেরিয়েবল ফন্ট একটি সিঙ্গেল ফন্ট ফাইলে বিভিন্ন ওয়েট সাপোর্ট করে, যা ফন্ট ফাইল সাইজ কমায়। variable: '--font-montserrat': এই সেটিং CSS ভেরিয়েবল তৈরি করে, যা ফন্ট ব্যবহার সহজ করে। এটিclassNameহিসেবে ব্যবহার করা হয় এবং CSS এvar(--font-montserrat)হিসেবে ব্যবহার করা যায়।display: 'swap': এই সেটিং ফন্ট লোড হওয়ার আগে ফলব্যাক ফন্ট দেখায়, যা FOIT (Flash of Invisible Text) দূর করে। ফন্ট লোড হলে ফলব্যাক ফন্ট থেকে কাস্টম ফন্টে স্উইচ করে।
ফলাফল:
“ডিজাইন হাব” ওয়েবসাইটে এই অপটিমাইজেশন প্রয়োগ করার পর:
- ফন্ট ফাইল সাইজ 500KB থেকে 120KB এ কমেছে (76% কম)
- নেটওয়ার্ক রিকোয়েস্ট 5টি থেকে 1টিতে কমেছে (80% কম)
- ফন্ট লোড টাইম 850ms থেকে 280ms এ কমেছে (67% কম)
- FCP (First Contentful Paint) 1.9s থেকে 0.8s এ কমেছে (58% কম)
- LCP (Largest Contentful Paint) 2.7s থেকে 1.1s এ কমেছে (59% কম)
- Google PageSpeed স্কোর 72 থেকে 95 এ উন্নীত হয়েছে