T15: Dynamic Site - Polish

Performance is a feature. Users abandon sites that load slowly. Polishing your site means optimizing what loads, when it loads, and how it loads. Like a restaurant that prepares popular dishes in advance and only cooks rare orders on demand.

Lazy Loading

Load images and content only when they enter the viewport. The loading="lazy" attribute handles images natively.

<img src="photo.jpg" loading="lazy" alt="Lazy loaded">

// For custom lazy loading with Intersection Observer
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
        }
    });
});

Performance Techniques

Minimize render-blocking resources. Defer non-critical JavaScript. Use efficient selectors and reduce DOM size.

<!-- Defer non-critical JS -->
<script src="app.js" defer></script>

<!-- Preload critical resources -->
<link rel="preload" href="font.woff2" as="font" crossorigin>

Code Splitting

Load only the JavaScript needed for the current view. Import additional modules when the user navigates to them.

async function loadModule(name) {
    const module = await import(`./modules/${name}.js`);
    module.init();
}