🚀 Lazy loading y optimizacion del front

Actualizado: 2024-12-01

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:
  <img src="{$product.cover.medium.url}" loading="lazy" alt="{$product.name}">
- 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 <img>

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

<?php

// ── Registrar JS con prioridad baja (se carga al final) ──
public function hookActionFrontControllerSetMedia(): void
{
    // priority: 200 = se carga despues de los scripts core
    $this->context->controller->registerJavascript(
        'mymodule-analytics',
        'modules/' . $this->name . '/views/js/analytics.js',
        [
            'position'  => 'bottom',   // Antes de </body>
            '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 <head>
        'priority' => 10,           // Alta prioridad
        'inline'   => true,         // Inline, sin request HTTP
    ]
);

#Core Web Vitals

Metrica	Que mide	Objetivo	Causa comun en PS
LCP (Largest Contentful Paint)	Tiempo hasta que el elemento mas grande es visible	< 2.5s	Imagenes grandes sin optimizar, TTFB lento
CLS (Cumulative Layout Shift)	Desplazamiento visual inesperado	< 0.1	Imagenes sin width/height, banners que aparecen tarde
INP (Interaction to Next Paint)	Respuesta a interacciones del usuario	< 200ms	JS bloqueante, handlers pesados en el carrito
FCP (First Contentful Paint)	Primer contenido pintado	< 1.8s	CSS render-blocking, fuentes externas
TTFB (Time to First Byte)	Tiempo hasta primer byte del servidor	< 0.8s	Queries lentas, sin cache de pagina, hosting lento

#Optimizaciones avanzadas

Checklist de optimizacion front

text

IMAGENES
✅ Formato WebP (30% menos que JPEG)
✅ Lazy loading en imagenes below-the-fold
✅ Atributos width y height en TODOS los <img> (evita CLS)
✅ srcset para imagenes responsive
✅ Comprimir con tinypng o squoosh

CSS
✅ Critical CSS inline en <head> (above-the-fold)
✅ Resto de CSS con media="print" onload (carga diferida)
✅ Eliminar CSS no usado (PurgeCSS)
✅ Activar CCC en PS (combinar + minificar)

JAVASCRIPT
✅ defer/async en scripts no criticos
✅ Mover JS al final del body
✅ Eliminar jQuery si usas Hummingbird
✅ Code splitting: cargar modulos JS solo donde se usan
✅ Minimizar third-party scripts (analytics, chat, ads)

SERVIDOR
✅ HTTP/2 o HTTP/3 habilitado
✅ Gzip o Brotli compresion
✅ Cache headers (Cache-Control, ETag)
✅ CDN para assets estaticos
✅ OPcache para PHP
✅ Redis o Memcached para cache de objetos

FUENTES
✅ font-display: swap (evita FOIT)
✅ Preload fuentes criticas: <link rel="preload" as="font">
✅ Alojar fuentes localmente (no Google Fonts externo)
✅ Subset: solo caracteres necesarios (latin vs full unicode)

← Anterior Cache de Smarty

Descargar en Markdown Pensado para pegar en ChatGPT, Claude u otra IA. Incluye solo el contenido de esta pagina.