Next.js Script Optimization (next/script) Sinhala Guide - Performance Tips

ආයුබෝවන් යාළුවනේ! කොහොමද ඉතින්? අද අපි කතා කරන්න යන්නේ Next.js project එකක performance එක වැඩි දියුණු කරගන්න පුළුවන් ඉතා වැදගත් tool එකක් ගැන: ඒ තමයි next/script component එක.

අපි හැමෝම දන්නවා, වෙබ් අඩවියක වේගය කියන්නේ අද කාලේ ගොඩක් වැදගත් දෙයක් කියලා. Google එකේ Search Engine Optimization (SEO) වලට වගේම, අපේ user ලාට හොඳ user experience (UX) එකක් දෙන්නත් වෙබ්සයිට් එක fast වෙන එක අත්‍යවශ්‍යයි. සමහර වෙලාවට, අපේ වෙබ්සයිට් එකට Google Analytics, Stripe, Ads, Chat widgets වගේ third-party scripts එකතු කරද්දී, මේවා නිසා වෙබ්සයිට් එකේ වේගය අඩාල වෙන්න පුළුවන්. අන්න ඒ වගේ තත්ත්වයකදී, Next.js වල තියෙන next/script අපේ ජීවිතේට මාර පහසුවක් ගේනවා!

මේ tutorial එකෙන් අපි බලමු:

• next/script කියන්නේ මොකක්ද සහ ඒක සාමාන්‍ය <script> tag එකට වඩා වෙනස් වෙන්නේ කොහොමද කියලා.
• Scripts load කරන විවිධ strategies (beforeInteractive, afterInteractive, lazyOnload) මොනවාද සහ ඒවා භාවිතා කරන්නේ කොහොමද කියලා.
• ප්‍රායෝගික උදාහරණයක් විදිහට, Google Analytics එක next/script භාවිතා කරලා අපේ Next.js project එකට එකතු කරන්නේ කොහොමද කියලා.
• Scripts load වෙන හැටි verify කරගන්න සහ ගැටලු විසඳාගන්න (troubleshooting) පුළුවන් විදිහ.
• හොඳම භාවිතයන් (best practices) සහ පොදු ගැටලු.

හරි, එහෙනම් වැඩේට බහිමු!

1. Next.js වල next/script කියන්නේ මොකක්ද?

සාමාන්‍යයෙන් අපි වෙබ්සයිට් එකකට JavaScript script එකක් එකතු කරන්නේ HTML <script> tag එක භාවිතා කරලානේ. නමුත් මේ සාමාන්‍ය script tags වල තියෙන ප්‍රධානම ගැටලුව තමයි, ඒවා බොහෝ විට වෙබ්සයිට් එක load වෙන එක block කරනවා. ඒ කියන්නේ, browser එක script එක load කරලා execute කරනකම්, පිටුවේ අනිත් content render කරන එක නවත්වනවා. මේ නිසා Largest Contentful Paint (LCP) සහ First Input Delay (FID) වගේ core web vitals වලට අහිතකර විදිහට බලපානවා.

Next.js මේකට විසඳුමක් විදිහට next/script component එක හඳුන්වා දීලා තියෙනවා. මේක සාමාන්‍ය <script> tag එකේ advanced version එකක් වගේ. next/script භාවිතා කරාම Next.js automatically මේ scripts load කරන එක optimize කරනවා. ඒ කියන්නේ, browser එකේ main thread එක block නොකර, user experience එකට අවම බලපෑමක් ඇති වෙන විදිහට මේ scripts load කරන්න Next.js උදව් කරනවා. මේක Next.js වල තියෙන built-in performance features වල තවත් එක් වැදගත් කොටසක්.

next/script භාවිතා කරන්නේ මෙහෙමයි:

import Script from 'next/script';

function MyPage() {
  return (
    <div>
      <h1>Welcome to My Page</h1>
      
      {/* සාමාන්‍ය script tag එකක් වගේම තමයි, නමුත් next/script! */}
      <Script src="https://example.com/my-script.js" />

    </div>
  );
}

export default MyPage;

දැන් බලමු මේ scripts load කරන විවිධ strategies මොනවාද කියලා.

2. Script Loading Strategies: strategy prop එකෙන් වැඩ ගන්න හැටි

next/script වල තියෙන ප්‍රධානම සහ බලගතුම feature එක තමයි strategy prop එක. මේකෙන් අපිට කියන්න පුළුවන් script එකක් load වෙන්න ඕන කොයි වෙලාවටද කියලා. මේකෙන් තමයි performance එකට ලොකු වෙනසක් කරන්න පුළුවන් වෙන්නේ. ප්‍රධාන strategies 3ක් තියෙනවා:

2.1. beforeInteractive

මේ strategy එක භාවිතා කරන්නේ වෙබ් පිටුව interactive (එනම්, user ට click කරන්න, form submit කරන්න වගේ දේවල් කරන්න පුළුවන් වෙන්න) කලින් load වෙන්න ඕන scripts සඳහායි. මේ scripts Next.js page එක hydration වෙන්න කලින්, server side එකේදී pre-load වෙනවා. මේ නිසා critical scripts සඳහා මේක ගොඩක් වැදගත්. උදාහරණයක් විදිහට, Google Tag Manager වගේ analytics scripts, හෝ user interactive වෙන්න කලින්ම data capture කරන්න ඕන scripts වලට මේක පාවිච්චි කරන්න පුළුවන්.

සැලකිය යුතුයි: මේක page එකේ initial render එක block කරන්න පුළුවන්. ඒ නිසා, මේ strategy එක පාවිච්චි කරන්න ඕන, script එකේ content එක critical නම් විතරයි.

<Script
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"
  strategy="beforeInteractive"
/>

2.2. afterInteractive

මේක තමයි default strategy එක. සාමාන්‍යයෙන් අපේ third-party scripts වලින් 90% කටත් වඩා මේ strategy එක ගැලපෙනවා. afterInteractive කියන්නේ වෙබ් පිටුව interactive (hydration) වුනාට පස්සේ, නමුත් browser එක idle වෙන්න කලින්, script එක load කරන්න කියලා.

මේකෙන් වෙන්නේ, වෙබ් පිටුවේ ප්‍රධාන content එක ඉක්මනින්ම user ට දර්ශනය වෙන්න සලස්වලා, අනිත් scripts (analytics, ads, etc.) ටික පස්සේ load කරන එක. මේ නිසා First Input Delay (FID) වගේ metrics වලට හොඳ බලපෑමක් ඇති වෙනවා. බොහෝ analytics scripts, social media plugins, comment systems වගේ දේවල් වලට මේක කදිමයි.

<Script
  src="https://connect.facebook.net/en_US/sdk.js"
  strategy="afterInteractive"
/>

2.3. lazyOnload

lazyOnload strategy එක භාවිතා කරන්නේ, වෙබ් පිටුව සම්පූර්ණයෙන්ම load වෙලා, browser එක idle වෙලා, නැත්නම් script එක තියෙන component එක user ගේ viewport එකට එන වෙලාවට විතරක් script එක load කරන්නයි. මේක ගොඩක්ම ප්‍රයෝජනවත් වෙන්නේ ගොඩක් බර (heavy) scripts සඳහා, නැත්නම් page එකේ පහළට scroll කරද්දී විතරක් අවශ්‍ය වෙන scripts සඳහායි. උදාහරණයක් විදිහට, chat widgets, consent banners, video players වගේ ඒවා.

මේකෙන් වෙබ්සයිට් එකේ initial load time එකට කිසිම බලපෑමක් වෙන්නේ නැති නිසා, performance එකට විශාල වාසියක් ලැබෙනවා.

<Script
  src="https://platform.twitter.com/widgets.js"
  strategy="lazyOnload"
/>

සාරාංශයක් විදිහට:

• beforeInteractive: page එක interactive වෙන්න කලින් (critical scripts).
• afterInteractive: page එක interactive වුනාට පස්සේ, idle වෙන්න කලින් (most common scripts).
• lazyOnload: page එක load වෙලා, browser idle වෙලාවට, හෝ viewport එකට එද්දී (non-critical, heavy scripts).

3. ප්‍රායෝගික උදාහරණයක්: Google Analytics එකතු කරමු

දැන් අපි බලමු කොහොමද Google Analytics (GA) එක next/script භාවිතා කරලා අපේ Next.js project එකට එකතු කරන්නේ කියලා. අපි මේ සඳහා afterInteractive strategy එක භාවිතා කරමු, මොකද GA script එක initial page render එක block නොකර, user interactive වුනාට පස්සේ load වෙන එක performance එකට හොඳයි.

3.1. GA Measurement ID එක ලබා ගැනීම

මුලින්ම ඔයාලා Google Analytics ගිණුමක් හදලා, ඒකෙන් Measurement ID (G-XXXXXXX) එක ලබා ගන්න ඕන. ඒක කොහොමද කරන්නේ කියලා දැනටමත් දන්නවා ඇති කියලා හිතනවා. ඒ ID එක අපි .env.local file එකක environment variable එකක් විදිහට save කරගනිමු, මොකද ඒක production build වලට විතරක් නෙවෙයි, development වලදීත් පාවිච්චි කරන්න පුළුවන් වෙන්න ඕන.

ඔබේ project root folder එකේ .env.local කියන file එක හදලා, මේ code එක paste කරන්න:

NEXT_PUBLIC_GA_ID=G-YOUR_MEASUREMENT_ID

G-YOUR_MEASUREMENT_ID කියන එකට ඔයාගේ ඇත්ත GA Measurement ID එක ආදේශ කරන්න. මතක තියාගන්න, Next.js වල client-side එකේදී access කරන්න පුළුවන් environment variables වලට NEXT_PUBLIC_ prefix එක අනිවාර්යයි.

3.2. next/script භාවිතා කරලා GA එකතු කිරීම

දැන් අපි _app.js file එක modify කරමු (ඔබට pages/_app.js file එකක් නැත්නම් හදාගන්න). මේ file එකේ script එක දැම්මම, අපේ වෙබ්සයිට් එකේ හැම page එකකටම GA script එක automatically load වෙනවා.

// pages/_app.js
import Script from 'next/script';
import '../styles/globals.css'; // ඔබේ global styles මෙතනට

function MyApp({ Component, pageProps }) {
  return (
    <>
      {/* Google Analytics Global Site Tag (gtag.js) */}
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
      />

      {/* Google Analytics initialization script */}
      <Script
        id="google-analytics-init"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}', {
              page_path: window.location.pathname,
            });
          `,
        }}
      />

      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

මෙතන මොකද වෙන්නේ කියලා ටිකක් පැහැදිලි කරමු:

• පළවෙනි <Script> එක: මේකෙන් Google Analytics වල gtag.js library එක load කරනවා. අපි strategy="afterInteractive" භාවිතා කරනවා, ඒ නිසා page එක interactive වුනාට පස්සේ තමයි මේක load වෙන්නේ. src attribute එකට අපි environment variable එකෙන් ලබාගත්ත GA ID එක භාවිතා කරනවා.
• දෙවෙනි <Script> එක: මේකෙන් Google Analytics initialize කරන actual JavaScript code එක contain කරනවා. අපි මෙතන id="google-analytics-init" එකක් දීලා තියෙනවා. මේ id එක script එකට අනන්‍ය නමක් දෙනවා, ඒක next/script එකට වැදගත් වෙනවා. dangerouslySetInnerHTML කියන prop එක භාවිතා කරන්නේ HTML වලට කෙලින්ම JavaScript code එකක් embed කරන්නයි. මේක භයානකයි වගේ පෙනුනත් (ඒකයි නම), අපි විශ්වාසවන්ත sources වලින් එන code වලට මේක භාවිතා කරන්න පුළුවන්. මෙතනත් අපි afterInteractive strategy එකම භාවිතා කරනවා.

දැන් ඔයාගේ Next.js project එක start කරලා බලන්න (npm run dev හෝ yarn dev). Google Analytics දැන් ඔබේ වෙබ්සයිට් එකට සාර්ථකව integrate වෙලා ඇති.

4. Loading Behavior එක Check කරමු (Review & Troubleshooting)

Script එකක් හරියට load වෙනවද නැද්ද කියලා check කරන එක ගොඩක් වැදගත්. මේක කරන්න අපිට browser එකේ Developer Tools භාවිතා කරන්න පුළුවන්. අපි බලමු කොහොමද Network Tab එක භාවිතා කරන්නේ කියලා.

1. Developer Tools Open කරන්න: ඔබේ වෙබ්සයිට් එක browser එකේ open කරලා, F12 ඔබන්න, නැත්නම් right-click කරලා "Inspect" තෝරන්න.
2. Network Tab එකට යන්න: Developer Tools වල තියෙන "Network" tab එක select කරන්න.
3. Filter කරන්න: Network tab එකේ filter box එකේ "gtag" කියලා type කරන්න. එතකොට Google Analytics script එක විතරක් filter වෙලා පෙන්වයි.
4. Script එකේ status එක බලන්න: gtag.js script එක load වෙලාද කියලා බලන්න. ඒකේ status code එක 200 (OK) වෙන්න ඕන.
5. Timing සහ Initiator බලන්න: script එක load වුන වෙලාව සහ initiator (ඒ කියන්නේ script එක load වුනේ කොහෙන්ද) බලන්න. afterInteractive strategy එකේදී, මේ script එක page එකේ අනිත් resources load වුනාට පස්සේ load වෙනවා කියලා පෙනෙයි.

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

• Script එක load වෙන්නේම නැත්නම්:
  • src path එක නිවැරදිද කියලා check කරන්න.
  • Environment variable එක (NEXT_PUBLIC_GA_ID) හරියට set කරලාද කියලා බලන්න. project එක restart කරන්නත් අමතක කරන්න එපා.
  • Browser එකේ cache එක clear කරලා බලන්න.
  • Developer Console එකේ errors තියෙනවද කියලා බලන්න.
• Script එක ඕනෑවට වඩා ඉක්මනින් හෝ පසුව load වෙනවා නම්:
  • strategy prop එක නිවැරදිද කියලා බලන්න. සමහර වෙලාවට beforeInteractive දාන්න ඕන එකකට afterInteractive දාලා වෙන්න පුළුවන්.
• Script එකේ functionality වැඩ කරන්නේ නැත්නම්:
  • Script එක load වුනාට පස්සේ execute වෙන code එකේ මොකක් හරි error එකක් තියෙන්න පුළුවන්. dangerouslySetInnerHTML එක ඇතුළේ තියෙන code එක හොඳින් review කරන්න.
  • තව script එකක් එක්ක conflict වෙනවාද කියලා බලන්න.

5. හොඳම Practices සහ පොදු ගැටලු (Best Practices & Common Issues)

next/script භාවිතා කරද්දී මතක තියාගන්න ඕන හොඳම practices සහ පොදු ගැටලු කිහිපයක් මෙන්න:

Best Practices:

• හැම third-party script එකකටම next/script භාවිතා කරන්න: සාමාන්‍ය <script> tags භාවිතා කරනවා වෙනුවට, හැම වෙලාවෙම next/script භාවිතා කරන්න පුරුදු වෙන්න. මේකෙන් Next.js වල built-in optimization වලින් උපරිම ප්‍රයෝජන ගන්න පුළුවන්.
• නියමිත strategy එක තෝරන්න: script එකේ වැදගත්කම සහ user experience එකට බලපාන විදිහ අනුව නිවැරදි strategy එක තෝරන්න. අනවශ්‍ය විදිහට beforeInteractive භාවිතා කිරීමෙන් වළකින්න.
• id attribute එක භාවිතා කරන්න: ඔබ dangerouslySetInnerHTML භාවිතා කරනවා නම්, හෝ එකම script එක multiple times load වෙනවා නම් (Next.js මේක automatically de-duplicate කරනවා, ඒත්), id attribute එකක් දෙන එක හොඳයි.
• Environment variables භාවිතා කරන්න: API keys, Measurement IDs වගේ sensitive data හෝ third-party IDs environment variables (.env.local) වල save කරලා, process.env.NEXT_PUBLIC_YOUR_VAR විදිහට access කරන්න.
• Test කරන්න: ඔබේ වෙබ්සයිට් එක वेगवेगळ्या browsers සහ devices වල test කරලා බලන්න. Script එක load වෙන විදිහ සහ performance එක වෙනස් වෙන්න පුළුවන්.

Common Issues:

• වැරදි strategy එකක් භාවිතා කිරීම:
  • beforeInteractive එක අනවශ්‍ය විදිහට භාවිතා කිරීමෙන් initial page load එක block වෙලා performance අඩාල වෙන්න පුළුවන්.
  • lazyOnload එකක් දාන්න ඕන තැනක afterInteractive දැම්මොත්, user ට අවශ්‍ය නැති වෙලාවක script එක load වෙන්න පුළුවන්.
• dangerouslySetInnerHTML අනිසි ලෙස භාවිතා කිරීම: මේක security risk එකක් වෙන්න පුළුවන්. විශ්වාසවන්ත sources වලින් එන code වලට විතරක් මේක භාවිතා කරන්න.
• Scripts page transitions වලින් පස්සේ වැඩ නොකිරීම: සමහර legacy scripts, Next.js වගේ SPA (Single Page Application) frameworks වල page transitions වලින් පස්සේ හරියට initialize වෙන්නේ නැති වෙන්න පුළුවන්. මේ සඳහා script එකේ initialization logic එක page changes වලට react කරන විදිහට modify කරන්න සිද්ධ වෙන්න පුළුවන්. (උදා: router events වලට listen කරලා re-initialize කරන එක). නමුත් _app.js එකේ දාන scripts බොහෝ විට මේ ගැටලුවෙන් තොරයි.
• Blocking resources: beforeInteractive strategy එක ප්‍රවේශමෙන් භාවිතා කරන්න. මේකෙන් critical path එක block වෙලා Core Web Vitals වලට අහිතකර විදිහට බලපෑම් කරන්න පුළුවන්.

අවසන් වශයෙන්

ඉතින් යාළුවනේ, මේ tutorial එකෙන් next/script භාවිතා කරලා Next.js project එකක third-party scripts optimize කරන හැටි ගැන හොඳ අවබෝධයක් ලැබෙන්න ඇති කියලා මම හිතනවා. වෙබ් අඩවියක performance කියන්නේ අද කාලේ අත්‍යවශ්‍ය දෙයක්, ඒ නිසා මේ වගේ tools භාවිතා කරලා ඒක වැඩි දියුණු කරගන්න එක ගොඩක් වැදගත්.

ඔබේ project වලට next/script integrate කරලා බලන්න. strategy options එක්ක අත්හදා බලලා, ඔබේ වෙබ්සයිට් එකට හොඳම performance එක ලැබෙන විදිහ හොයාගන්න. මේ ගැන ඔයාලගේ අත්දැකීම් මොනවාද? මොනවා හරි ගැටලුවක් ආවොත් comment section එකේ අහන්න. අපි හැමෝටම උදව් කරගනිමු!

Next.js එක්ක තවදුරටත් ඉගෙන ගන්න, අලුත් දේවල් හදන්න මේක ඔයාලට උදව් වෙයි කියලා හිතනවා! ජයවේවා!