რა არის პროგრესული რენდერინგი?

ප්‍රගතිශීලී රෙන්ඩරින් යනු, පරිශීලකයාට අන්තර්ගතය පියවරෙන් පියවර පෙන්වීම මඟින් වෙබ් පිටුවක කාර්ය සාධනය වැඩිදියුණු කිරීම සඳහා අරමුණු කර ඇති තාක්ෂණ කට්ටලයකි, එය සම්පූර්ණ බාගත කිරීම අවසන් වන තුරු. මෙය වේගවත් බාගත කිරීමේ අභ්‍යාසයක් නිර්මාණය කරයි සහ හැඟවෙන කාර්ය සාධනය වැඩිදියුණු කරයි.

ප්‍රධාන තාක්ෂණ:

• අහිතකර බාගත කිරීම (Lazy Loading): සම්පත් (රූප, වීඩියෝ, ස්ක්‍රිප්ට්) පමණක් පෙනෙන ප්‍රදේශයට හෝ පරිශීලකයා සමඟ අන්තර්ක්‍රියාවක් සිදු වන විට පමණක් බාගත කිරීම.

  // Intersection Observer API භාවිතා කර රූප අහිතකර බාගත කිරීමේ උදාහරණයක්
  const images = document.querySelectorAll('img[data-src]');
  
  const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src;
        observer.unobserve(entry.target);
      }
    });
  });
  
  images.forEach(image => {
    observer.observe(image);
  });
  

• සර්වර්-සයිඩ් රෙන්ඩරින් (Server-Side Rendering - SSR): මුල් HTML එක සර්වර් එකේ රෙන්ඩරින් කිරීම, එය පසුව ගනුදෙනුකරුවාට යැවීම. මෙය පරිශීලකයාට අන්තර්ගතය වේගවත් දැකීමට ඉඩ දෙයි, බ්‍රවුසරය JavaScript බාගත කර විශ්ලේෂණය කරන අතර.

• අවශ්‍යතා මත CSS මූලික (Critical CSS): අන්තර්ගතය පෙන්වීමට අවශ්‍ය CSS එක ආනයනය කිරීම සහ අන්තර්ගතය ඉහළ කොටස (above-the-fold content) පෙන්වීම සඳහා, බ්‍රවුසරයට මුල් දර්ශනය වේගවත් සිදු කිරීමට. අනෙක් CSS අසින්ක්‍රොනස්ව ලෙස බාගත වේ.

  <!-- මූලික CSS ආනයනය කිරීමේ උදාහරණයක් -->
  <style>
    /* ඉහළ කොටස සඳහා මූලික CSS */
    body { margin: 0; }
    h1 { වර්ණය: නිල්; }
  </style>
  <link rel="stylesheet" href="async.css" media="print" onload="this.media='all'">
  

• කේත බෙදාහැරීම (Code Splitting): JavaScript බෑන්ඩලය කුඩා කොටස්වලට බෙදා හැරීම, අවශ්‍ය විට බාගත කිරීම. මෙය ආරම්භක බාගතීමේ ප්‍රමාණය අඩු කරයි. React, Vue, Angular වැනි SPA ෆ්‍රේම්වර්ක්වල ජනප්‍රිය.

ප්‍රගතිශීලී රෙන්ඩරින්ගේ වාසි:

• අවබෝධය වැඩි දියුණු කිරීම: පරිශීලකයාට අන්තර්ගතය වේගවත් දැකිය හැක, එමඟින් වේගවත් බාගතීමේ හැඟීමක් නිර්මාණය වේ.
• First Contentful Paint (FCP) සහ Largest Contentful Paint (LCP) මැනුම්කරණ අඩු කිරීම: බාගතීමේ වේගය පෙන්වන මැනුම්කරණ.
• SEO වැඩි දියුණු කිරීම: සෙවුම් යන්ත්‍රයන්ට අන්තර්ගතය වේගවත් අන්කඩ කිරීමේ හැකියාව.
• ට්‍රැෆික් සුරක්ෂිත කිරීම: විශේෂයෙන් අහිතකර බාගත කිරීමේදී.

ප්‍රධාන අදහස — පරිශීලකයාට හැකි ඉක්මනින් ප්‍රයෝජනවත් අන්තර්ගතය ලබා දීම, පසුව අනිත් කොටස් මන්දගාමීව බාගත කිරීම, පිටුවේ රෙන්ඩරින් බාධා නොවීම සඳහා.