Sign in Subscribe
By Thisara Priyamal in Next.js —

Next.js Font Optimization | next/font | Performance | CLS Sinhala Guide

Next.js Font Optimization | next/font | Performance | CLS Sinhala Guide

Next.js Font Optimization: `next/font` Sinhala Guide

ආයුබෝවන් යාළුවනේ! වෙබ් Development ලෝකයේදී Performance කියන්නේ රත්තරන් වගේ වටින දෙයක්. අපේ Users ලා ඉක්මනින්ම Load වෙන, හොඳ user experience එකක් දෙන වෙබ් අඩවි වලට තමයි කැමති. මේ Performance එකට ගොඩක් බලපාන අංශයක් තමයි Fonts. ලස්සන fonts ටිකක් දාලා අපි App එක හැඩ කළාට, ඒ fonts හොඳට Optimize කරලා නැත්නම් Page Load Speed එක අඩු වෙන්නත්, Layout Shifts (CLS - Cumulative Layout Shift) වෙලා Users ලා අපහසුතාවයට පත්වෙන්නත් පුළුවන්. ඒ වගේම SEO වලටත් මේක බලපානවා.

Next.js Developers ලා විදිහට, මේ ප්‍රශ්න වලට තියෙන Best Solution එක තමයි next/font. මේ Article එකෙන් අපි next/font කියන්නේ මොකක්ද, ඒකෙන් අපේ Next.js Project එකක Performance එක කොහොමද Boost කරන්නේ කියන එක පැහැදිලිව සිංහලෙන් ඉගෙන ගනිමු. අපි Theory, Practical Examples, Best Practices සහ Common Issues ගැනත් කතා කරනවා. එහෙනම් වැඩේට බහිමු!

1. next/font කියන්නේ මොකක්ද සහ ඇයි ඒක වැදගත්?

next/font කියන්නේ Next.js Framework එකේ Built-in Module එකක්. මේකෙන් වෙබ් Fonts Optimize කරන්න පුළුවන් පහසුම සහ කාර්යක්ෂමම ක්‍රමය සපයනවා. මේකෙදි Fonts Automatic විදිහට Self-host කරනවා, Subsetting කරනවා, Caching කරනවා, ඒ වගේම CSS Variables හරහා Fonts Manage කරන්නත් අවස්ථාව දෙනවා. මේ හැමදේම කරන්නේ Zero Layout Shift (CLS) එකක් සහතික කරමින්.

ඇයි මේක මෙච්චර වැදගත්?

  • Performance Improvement: සාමාන්‍යයෙන් Google Fonts වගේ Services වලින් Fonts Load කරනකොට External Request එකක් යනවා. next/font එකෙන් Fonts Download කරලා අපේ Server එකෙන්ම Serve කරන නිසා (Self-hosting) මේ Request එක අයින් වෙනවා. ඒකෙන් Font Loading Speed එක වැඩි වෙනවා.
  • Reduced CLS (Cumulative Layout Shift): Font Loading එක පරක්කු වුණාම Page එකේ Content එක Fonts Load වෙනකම් පැන පැන තියෙනවා. මේක CLS එකට හේතුවක්. next/font එකෙන් Font Metric Fallbacks හරහා මේ Layout Shifts සම්පූර්ණයෙන්ම වගේ නැති කරනවා.
  • Automatic Subsetting: අපිට ඕන කරන Characters ටික විතරක් (e.g., Latin characters) Font File එකෙන් Extract කරලා Size එක අඩු කරනවා. ඒකෙන් Download Size එක තවදුරටත් අඩු වෙනවා.
  • CSS Variables Support: Fonts Global විදිහට CSS Variables හරහා Manage කරන්න පුළුවන් නිසා Maintain කරන්න ලේසියි.
  • Better Developer Experience: Manual @font-face Rules ලියන එකෙන් සහ Font Files Manage කරන එකෙන් ඇතිවන කරදර අඩු කරනවා.

2. Google Fonts, next/font වලින් භාවිතා කරමු

next/font/google Module එකෙන් අපිට Google Fonts පහසුවෙන් අපේ Next.js Project එකට Add කරන්න පුළුවන්. මේකෙන් Google Fonts Download කරලා, Optimize කරලා, අපේ Application එකත් එක්කම Self-host කරනවා. ඒකෙන් Third-party Requests අඩු වෙනවා.

උදාහරණය: Poppins Font එක භාවිතා කිරීම

මුලින්ම, app/layout.js (App Router භාවිතා කරනවා නම්) නැත්නම් pages/_app.js (Pages Router භාවිතා කරනවා නම්) File එකට අපිට ඕන කරන Font එක Import කරගන්න ඕනේ. අපි Poppins Font එක භාවිතා කරමු.

// app/layout.js

import './globals.css';
import { Poppins } from 'next/font/google'; // Google Font එක import කරගන්නවා

// Font එක Configure කරනවා
const poppins = Poppins({
  subsets: ['latin'], // අපිට ඕන කරන character subsets විතරක් ගන්නවා. Latin default විදිහට තියෙනවා.
  weight: ['400', '700'], // අපිට ඕන කරන font weights විතරක් specify කරනවා.
  variable: '--font-poppins', // CSS Variable නමක් දෙනවා. මේකෙන් CSS වලට access කරන්න පුළුවන්.
  display: 'swap', // Font load වෙනකම් fallback font එක display කරන්න කියනවා.
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${poppins.variable}`}> {/* Font එක Global විදිහට Apply කරනවා */}
      <body>{children}</body>
    </html>
  );
}

subsets, weight, variable කියන Options ටික හොඳට මතක තියාගන්න. මේවා තමයි Font එක Optimize කරන්න උදව් වෙන්නේ.

  • subsets: අපිට ඕන කරන භාෂාවලට අදාල Characters විතරක් Load කරන්න මේකෙන් කියනවා. Size එක අඩු කරගන්න මේක වැදගත්.
  • weight: අපිට ඕන කරන Font Weights (e.g., Normal, Bold) විතරක් Specify කරන්න. අනවශ්‍ය Weights Load කරන එකෙන් වළක්වා ගන්නවා.
  • variable: CSS Variable එකක් විදිහට Font Family එක define කරන්න පුළුවන්. මේකෙන් CSS Files වල Font එක භාවිතා කරන එක පහසු වෙනවා.

CSS වල Font එක භාවිතා කරන ආකාරය

දැන් අපිට අපේ Global CSS File එකේ (e.g., app/globals.css) මේ Font එක භාවිතා කරන්න පුළුවන්.

/* app/globals.css */

/* Root level එකේදී font-family එක define කරන්න පුළුවන් */
:root {
  --font-poppins: 'Poppins', sans-serif;
}

body {
  font-family: var(--font-poppins); /* Global විදිහට Font එක Apply කරනවා */
}

h1, h2, h3 {
  font-family: var(--font-poppins); /* Headings වලටත් Apply කරන්න පුළුවන් */
  font-weight: 700; /* නිශ්චිත weight එකක් specify කරන්න */
}

p {
  font-family: var(--font-poppins);
  font-weight: 400;
}

මේ විදිහට CSS Variables භාවිතා කරන නිසා Font එක Manage කරන එක ගොඩක් Flexible වෙනවා.

3. Local Fonts, next/font වලින් භාවිතා කරමු

සමහර වෙලාවට Google Fonts වල නැති, අපේ Brand එකටම ගැලපෙන Custom Fonts භාවිතා කරන්න අපිට අවශ්‍ය වෙන්න පුළුවන්. ඒ වගේ වෙලාවට next/font/local Module එකෙන් Local Font Files Optimize කරලා භාවිතා කරන්න පුළුවන්.

උදාහරණය: Custom Local Font එකක් භාවිතා කිරීම

මුලින්ම, ඔබේ Font Files (WOFF2 Format එක භාවිතා කරන එක Best Practice එකක්) Project එකේ public/fonts වගේ Folder එකකට දාගන්න. අපි හිතමු අපිට MyFont-Regular.woff2 සහ MyFont-Bold.woff2 කියලා Files දෙකක් තියෙනවා කියලා.

දැන් අපි Font එක Define කරන්න වෙනම File එකක් හදාගනිමු. (e.g., fonts/my-local-font.js)

// fonts/my-local-font.js

import LocalFont from 'next/font/local';

const myLocalFont = LocalFont({
  src: [
    {
      path: '../public/fonts/MyFont-Regular.woff2', // Regular Font File එකේ Path එක
      weight: '400', // Weight එක Specify කරනවා
      style: 'normal', // Style එක Specify කරනවා
    },
    {
      path: '../public/fonts/MyFont-Bold.woff2', // Bold Font File එකේ Path එක
      weight: '700', // Weight එක Specify කරනවා
      style: 'normal', // Style එක Specify කරනවා
    },
  ],
  variable: '--font-my-local', // CSS Variable නමක් දෙනවා
  display: 'swap', // Font load වෙනකම් fallback font එක display කරන්න කියනවා.
});

export default myLocalFont;

දැන් මේ Local Font එක app/layout.js එකට Import කරලා Global විදිහට Apply කරන්න පුළුවන්.

// app/layout.js

import './globals.css';
import { Poppins } from 'next/font/google';
import myLocalFont from '../fonts/my-local-font'; // Local Font එක import කරගන්නවා

const poppins = Poppins({
  subsets: ['latin'],
  weight: ['400', '700'],
  variable: '--font-poppins',
  display: 'swap',
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${poppins.variable} ${myLocalFont.variable}`}> {/* Fonts දෙකම Apply කරනවා */}
      <body>{children}</body>
    </html>
  );
}

CSS වල Local Font එක භාවිතා කරන ආකාරය

Google Font එකට කළා වගේම Local Font එකත් CSS Variable එකක් විදිහට භාවිතා කරන්න පුළුවන්.

/* app/globals.css */

:root {
  --font-poppins: 'Poppins', sans-serif;
  --font-my-local: 'MyFont', sans-serif; /* Local Font එකේ නම */
}

body {
  font-family: var(--font-poppins);
}

/* Local Font එක අවශ්‍ය තැනට Apply කරන්න පුළුවන් */
h1 {
  font-family: var(--font-my-local);
  font-weight: 700;
}

4. Performance සහ CLS (Layout Shift) පරීක්ෂා කරමු

Fonts Optimize කිරීමෙන් පස්සේ ඇත්තටම Performance එක වැඩි වුණාද, CLS එක නැති වුණාද කියලා පරීක්ෂා කරන එක ගොඩක් වැදගත්. මේ සඳහා අපි Tools කිහිපයක් භාවිතා කරමු.

Lighthouse Report

Chrome DevTools වලට ගිහින් Lighthouse Tab එකෙන් Report එකක් Generate කරගන්න. next/font භාවිතා කරපු Project එකක Reports වල Core Web Vitals (විශේෂයෙන්ම LCP - Largest Contentful Paint සහ CLS - Cumulative Layout Shift) හොඳ Scores පෙන්නන්න ඕනේ. CLS Score එක 0.1 ට වඩා අඩු වෙන්න ඕනේ.

Chrome DevTools Performance Tab

Performance Tab එකට ගිහින් Page එක Reload කරලා Record කරන්න. Network Requests වල Fonts Load වෙන විදිහ බලන්න පුළුවන්. next/font එකෙන් Fonts Local විදිහට Serve කරන නිසා External Requests අඩුයි. ඒ වගේම Layout Shifts (Red Blocks) අඩු වෙන්න ඕනේ.

Fonts Loaded විදිහ Verify කරන්නේ කොහොමද?

  1. Chrome DevTools Open කරලා Network Tab එකට යන්න.
  2. Filter එකේ "Font" කියලා Type කරන්න.
  3. Page එක Reload කරන්න.
  4. ඔබේ Fonts Load වෙනවා නම්, ඒවායේ Source එක Local (e.g., _next/static/media/...) විදිහට පෙන්විය යුතුයි. External CDN එකකින් (e.g., fonts.googleapis.com) Load වෙනවා නම්, ඔබ next/font නිවැරදිව Implement කරලා නැහැ කියන එක තේරුම් ගන්න පුළුවන්.

5. Best Practices සහ පොදු ගැටළු

next/font භාවිතා කරනකොට මතක තියාගන්න ඕන වැදගත් දේවල් කිහිපයක් සහ පොදු ගැටළු ටිකක් ගැන බලමු.

Best Practices:

  • හැමවිටම next/font භාවිතා කරන්න: ඔබේ Next.js Project එකක Fonts භාවිතා කරනවා නම්, හැමවිටම next/font Module එක භාවිතා කරන්න. මේක තමයි Performance සහ User Experience එකට හොඳම ක්‍රමය.
  • WOFF2 Format එකට මුල් තැන දෙන්න: Local Fonts භාවිතා කරනවා නම්, WOFF2 (Web Open Font Format 2) File Format එකට මුල් තැන දෙන්න. මේක අනෙක් Formats වලට වඩා Smaller File Sizes දෙනවා.
  • අවශ්‍ය Weights සහ Subsets විතරක් Load කරන්න: ඔබේ Design එකට අවශ්‍ය කරන Font Weights (e.g., 400, 700) සහ Character Subsets (e.g., 'latin') විතරක් specify කරන්න. අනවශ්‍ය දේවල් Load කරන එකෙන් Font File Size එක වැඩි වෙනවා.
  • CSS Variables භාවිතා කරන්න: Fonts Manage කරන්න CSS Variables භාවිතා කරන එකෙන් Code එක Maintain කරන්න පහසු වෙනවා. Global විදිහට Fonts Change කරන්න අවශ්‍ය වුණොත්, එක තැනකින් Change කරන්න පුළුවන්.
  • Fallback Fonts: sans-serif, serif, monospace වගේ Generic Font Families ටිකක් CSS Variable එකට පස්සේ Default විදිහට දාන්න. Font එක Load වෙන්න පරක්කු වුණොත්, මේ Fallback Font එක Display වෙනවා. (e.g., var(--font-poppins), sans-serif;)
  • display: 'swap' භාවිතා කරන්න: Font එක Load වෙනකම් Browser එක විසින් Fallback Font එක Display කරන එකට display: 'swap' කියන Option එක උදව් වෙනවා. ඒකෙන් Blank Text (FOIT - Flash of Invisible Text) Display වෙන එක වළක්වා ගන්නවා.

පොදු ගැටළු සහ විසඳුම්:

  • Font එක Load නොවීම හෝ වැරදි Font එකක් Load වීම:
    • app/layout.js (හෝ pages/_app.js) File එකේදී className={`${myFont.variable}`} විදිහට <html> Tag එකට Class එක Add කරලා තියෙනවද කියලා Check කරන්න.
    • CSS File එකේදී font-family: var(--font-my-font); කියලා හරියට Variable එක භාවිතා කරලා තියෙනවද බලන්න.
    • Local Fonts වලදී src Path එක නිවැරදිද කියලා දෙපාරක් Check කරන්න.
  • CLS (Layout Shifts) තවමත් තිබීම:
    • next/font එකෙන් Fonts නිසා ඇතිවන CLS එක නැති කරනවා. නමුත් Image, Video, Ads වගේ වෙනත් Elements නිසාත් CLS ඇති වෙන්න පුළුවන්. Lighthouse Report එකෙන් හෝ Chrome DevTools වලින් CLS එකට හේතුවන Elements මොනවාද කියලා බලන්න.
    • display: 'swap' Option එක භාවිතා කරන්න.
  • Fonts වල Size එක වැඩි වීම:
    • subsets සහ weight Options හරියට specify කරලා තියෙනවද බලන්න. අවශ්‍ය කරන දේවල් විතරක් Load කරන්න.
    • Local Fonts වලදී WOFF2 Format එක භාවිතා කරන්න.

නිගමනය

next/font කියන්නේ Next.js Framework එකේ තියෙන බලගතුම Features වලින් එකක්. මේකෙන් Font Optimization එක ගොඩක් පහසු කරනවා වගේම, අපේ Web Applications වල Performance එක සහ User Experience එක සැලකිය යුතු ලෙස වැඩි දියුණු කරනවා. විශේෂයෙන්ම Core Web Vitals වලට අනුකූල වෙලා, Zero CLS එකක් සහිතව Fonts Load කරන්න next/font එකෙන් ලැබෙන සහය අපිට අතිශයින්ම වැදගත්.

ඉතින් යාළුවනේ, මේ Article එකෙන් next/font ගැන මූලික දැනුමක් සහ Practical Implementations ටිකක් ඔයාලට ලැබෙන්න ඇති කියලා මම හිතනවා. ඔබේ Next.js project එකට මේක implement කරලා බලන්න. ඒ වගේම, මේ ගැන ඔයාගේ අත්දැකීම්, ප්‍රශ්න හෝ අදහස් තියෙනවා නම්, Comment එකක් දාලා අපිට කියන්න. අනිවාර්යයෙන්ම අපි කතා කරමු! Keep Coding!

Previous

Next.js Code Splitting & Dynamic Imports | Bundle Optimization Sinhala Guide

 Next

Docker Networking Essentials Sinhala Guide | Bridge, Host, Port Mapping | Docker ජාලකරණය

You might also like...