web.dev Practice — Loading & Resource Optimization

• · WD1 — Split code by route/feature boundary, so navigating to a view doesn't download code for views the user hasn't visited.
• · WD2 — Lazy-load below-the-fold and non-critical resources (images via loading="lazy", heavy components via dynamic import), reserving eager loading for what's needed immediately.
• · WD3 — Serve modern image formats (AVIF/WebP) with fallbacks, sized to actual rendered dimensions via srcset/responsive images — never ship a source image far larger than its rendered size.
• · WD4 — Subset and preload critical fonts; limit font family/weight count to what's actually used — fewer families and weights load faster and render more predictably.
• · WD6 — Design loading states deliberately (skeleton screens matching eventual layout, progressive/blur-up images, optimistic UI) — perceived performance is a designed property, not a byproduct.

• · The "does this need to be in the main bundle" test: for any component/route, ask whether it's needed for the *first* interactive view — if not, dynamic-import it.
• · Image weight audit: sort a page's network requests by size; images are almost always in the top few — check format (AVIF/WebP available?), sizing (srcset matching actual display size?), and compression quality.
• · Font count audit: count distinct font-family + weight combinations loaded — more than 2-3 total is worth questioning.
• · Cache-header spot check: inspect response headers for static assets — are they cached for a long duration with content-hashed filenames, or re-fetched every visit?
• · The skeleton test: load the page on a throttled connection — does the loading state resemble the eventual layout (reducing perceived shift and improving perceived speed), or is it a blank screen/generic spinner?

• · Ver anti-patrones específicos del dominio en el pack.

• [ ] Routes/major features code-split; initial bundle contains only first-view needs. (WE1)
• [ ] Images sized via srcset to actual rendered dimensions, modern formats used. (WE3)
• [ ] Static assets cached long-lived with content-hashed filenames. (WE5)
• [ ] Third-party scripts async/defer, not blocking main content. (WE8)
• [ ] Below-the-fold images lazy-loaded; above-the-fold not. (WE2)
• [ ] Font families/weights limited to actually-used set. (WE4)

• web.dev — Learn Performance

Este pack cita las siguientes fuentes registradas en el índice bibliográfico:

• webFast load timesweb.dev
• webImage optimization guidesweb.dev
• webweb.dev — Learn PerformanceGoogle