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

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

ප්‍රධාන ආකෘති:

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

  <!-- Lazy loading රූපයක් -->
  <img src="placeholder.jpg" data-src="actual-image.jpg" loading="lazy" alt="රූප විස්තරය">
  

• Streaming Rendering (ප්‍රවාහක රෙන්ඩරින්ග්): HTML කේතය කොටස්වලින් යවමින්, බ්‍රවුසරයට සම්පූර්ණ පිටුව ලබා ගැනීමට පෙර විශ්ලේෂණය කිරීම සහ රෙන්ඩරින්ග් ආරම්භ කිරීම.

• Server-side rendering (SSR) හෝ Hydration (Hydration): සර්වර් එකේ ආරම්භක HTML නිර්මාණය කිරීම, වේගවත් පෙන්වීම සඳහා, පසුව JavaScript මඟින් ස්ථායි මාර්ගෝපදේශය "ජීවිතය පිරවීම" සහ අන්තර්ක්‍රියාවන් සඳහා.

  // Hydration සංකල්පයේ උදාහරණයක්
  // පාරිභෝගිකයාගේ පැතිකඩ
  const appElement = document.getElementById('app');
  // Vue/React ආදිය භාවිතා කර, දැනට පවතින DOM ව්‍යුහයට මවුන්ට් කිරීම
  Vue.createApp(App).mount(appElement);
  // හෝ React.hydrate(<App />, appElement);
  

• දෘශ්‍යමය අන්තර්ගතය මතුපිටට තබා ගැනීම (Above-the-fold rendering): පළමු කොටසින් පෙනෙන අන්තර්ගතය බාගත කිරීම සහ රෙන්ඩරින්ග්, අනෙක් කොටස් පසුබැසීම.

ප්‍රගතිශීලී රෙන්ඩරින්ග් යෙදවීම Web Vitals මූලික මැනුම්කරණයන් වැඩිදියුණු කරයි:

• Largest Contentful Paint (LCP): විශාලතම අංගය ඉක්මනින් පෙන්වයි.
• First Contentful Paint (FCP): පළමු අන්තර්ගතය පෙනී සිටීම කාලය අඩු කරයි.
• Cumulative Layout Shift (CLS): නොසඳහසුව, placeholders සහ lazy loading භාවිතා කිරීම අකැමැති ස්ථානයේ අන්තර්ගතය ගමන් කිරීම අඩු කරයි.