---
title: Lazy loading y optimizacion del front
section: performance
slug: lazy-loading
description: "Tecnicas de lazy loading en PrestaShop: imagenes, modulos, JavaScript diferido, Core Web Vitals y optimizacion del front."
keywords: prestashop lazy loading imagenes defer async javascript core web vitals LCP CLS FID optimizacion front
last_updated: 2024-12-01
source_url: "https://ayudaprestashop.es/performance/lazy-loading"
---
# Lazy loading y optimizacion del front
> Tecnicas de lazy loading en PrestaShop: imagenes, modulos, JavaScript diferido, Core Web Vitals y optimizacion del front.
El rendimiento del front impacta directamente en conversiones y SEO. Google mide Core Web Vitals (LCP, CLS, FID/INP) y penaliza tiendas lentas. Lazy loading y carga diferida son tecnicas esenciales.
## Lazy loading de imagenes
*Implementar lazy loading nativo*
```text
METODO 1: ATRIBUTO NATIVO loading="lazy"
- Soportado en todos los navegadores modernos
- En templates .tpl del tema:
- NO usar en imagenes above-the-fold (hero, logo, primer producto)
→ Estas deben cargar inmediatamente
METODO 2: INTERSECTION OBSERVER (JS)
- Para control mas fino o navegadores legacy
- Usa data-src en lugar de src
- JS detecta cuando la imagen entra en viewport
- Reemplaza data-src por src
EN PRESTASHOP CLASSIC
- Las imagenes de listado de productos NO tienen lazy loading por defecto
- Hay que modificar el template:
themes/classic/templates/catalog/_partials/miniatures/product.tpl
- Añadir loading="lazy" al tag ![]()
EN HUMMINGBIRD (PS 9)
- Lazy loading nativo incluido por defecto
- Tambien usa srcset para imagenes responsive
- Formato WebP automatico si esta disponible
```
## JavaScript defer y async
*Carga diferida de JavaScript*
```php
context->controller->registerJavascript(
'mymodule-analytics',
'modules/' . $this->name . '/views/js/analytics.js',
[
'position' => 'bottom', // Antes de
'priority' => 200, // Baja prioridad
'attribute' => 'defer', // defer = ejecutar despues del parse
]
);
// async = descargar en paralelo, ejecutar cuando este listo
$this->context->controller->registerJavascript(
'mymodule-chat',
'modules/' . $this->name . '/views/js/chat.js',
[
'position' => 'bottom',
'priority' => 300,
'attribute' => 'async',
]
);
}
// ── DIFERENCIA defer vs async ──
// defer: descarga en paralelo, ejecuta EN ORDEN despues del HTML parse
// async: descarga en paralelo, ejecuta INMEDIATAMENTE (sin orden)
// → defer para scripts que dependen de otros
// → async para scripts independientes (analytics, chat)
// ── Inline JS critico ──
$this->context->controller->registerJavascript(
'mymodule-critical',
'modules/' . $this->name . '/views/js/critical.js',
[
'position' => 'head', // En