Jifunze jinsi ya kutumia lazy loading na code splitting kuboresha performance ya web apps. Mbinu hizi husaidia kupunguza initial load time, kuongeza page speed, na kutoa better user experience kwa kupakia resources tu wakati zinahitajika.

1. Lazy Loading Images (HTML Native)

loading="lazy" inafanya image ipakie tu wakati iko kwenye viewport.

Hii inapunguza initial page load na bandwidth consumption.

2. Lazy Loading Scripts (JavaScript Dynamic Import)

// Lazy load module
button.addEventListener('click', async () => {
const module = await import('./heavyModule.js');
module.init();
});

Code ya heavyModule.js haipaki mpaka user a-click button.

3. React Example with Lazy & Suspense

import React, { Suspense, lazy } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
return (

}>