Lazy loading: kuidas teha leht 3x kiiremaks ilma midagi ohverdamata

Mis on lazy loading?

Lazy loading = lae ainult see, mida kasutaja praegu näeb. Ülejäänu laadub, kui kasutaja keril alla.

Mõju: HTTP Archive andmetel on keskmine leht 2.4 MB. Lazy loading'iga laadub esmalt ainult 600 KB – 4x kiirem.

Mida laisalt laadida?

1. Pildid (kõige tähtsam)

Native HTML: `html <img src="hero.jpg" alt="Hero" loading="eager" /> <img src="below-fold.jpg" alt="..." loading="lazy" /> `

Reegel: above-the-fold = eager, ülejäänud = lazy.

2. Videod ```html <video preload="none" poster="thumbnail.jpg"> <source src="video.mp4" type="video/mp4"> </video> ```

3. iframe (YouTube, kaart) ```html <iframe src="..." loading="lazy"></iframe> ```

Veel parem YouTube'ile: lite-youtube-embed – kuvab thumbnail, laadib iframe alles klõpsul.

4. JS bundlid Code splitting React'is: ```tsx const Modal = React.lazy(() => import('./Modal')); ```

5. CSS Kriitilisust pole vaja kõigile CSS-ile. Inline'i above-fold CSS, ülejäänu lazy: ```html <link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'"> ```

Pildi optimeerimine

Lazy loading + õiged formaadid + responsive: `html <picture> <source srcset="hero.avif" type="image/avif"> <source srcset="hero.webp" type="image/webp"> <img src="hero.jpg" alt="Hero" loading="lazy" width="1280" height="720"> </picture> `

AVIF on 50% väiksem kui JPEG, WebP 30% väiksem.

Vt detailne piltide optimeerimise juhend.

Intersection Observer

Kohandatud lazy loading'iks: `js const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); });

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img)); `

Aga 2026. aastal native loading="lazy" piisab.

Mida MITTE laisalt laadida

• Above-the-fold sisu (LCP element!)
• Kriitiline CSS
• Põhi JS (interaktiivsuseks vajalik)
• Logod, ikoonid (väiksed)
• SEO-tähtsad pildid

Cumulative Layout Shift (CLS)

Lazy loading võib põhjustada layout shift'i, kui pildil pole määratud mõõtmeid.

❌ <img src="x.jpg" loading="lazy"> ✅ <img src="x.jpg" loading="lazy" width="800" height="600">

Vt ka Core Web Vitals juhend.

WordPress

WP 5.5+ kasutab native lazy loading'i automaatselt. Lisa eraldi pluginat tavaliselt mitte vaja: - ❌ Jätta lisaplugin: dubleerib funktsionaalsust - ✅ Kasuta native + optimeeri pilte

Sooritus enne/pärast

Tüüpiline e-pood: | Metric | Enne | Pärast | |--------|------|--------| | First Contentful Paint | 2.4s | 0.9s | | Largest Contentful Paint | 4.2s | 1.8s | | Total Page Size | 3.8 MB | 850 KB | | Time to Interactive | 5.1s | 2.3s |

Testimine

• PageSpeed Insights
• WebPageTest
• Chrome DevTools → Network → Throttling: Slow 3G

Kokkuvõte

Lazy loading on 2-tunnine optimeerimine, mis annab 50% jõudluse boost'i. Meie optimeerimisteenus sisaldab täielikku lazy loading auditit ja paigaldust. Küsi pakkumist.

Allikad

• web.dev – Browser-level Lazy Loading
• MDN – Loading Attribute
• HTTP Archive Web Almanac