// ===== CÓDIGO DE OPTIMIZACIÓN PARA MÓVIL - ECWID ===== //
document.addEventListener('DOMContentLoaded', function() {
// 1. DETECCIÓN DE DISPOSITIVO MÓVIL
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (!isMobile) return;
// 2. SOLUCIÓN PARA LCP (3.4s → Meta <2.5s)
const optimizeLCP = () => {
// Priorizar imagen hero
const lcpCandidate = document.querySelector('.ecwid-productBrowser-image img, .ecwid-banner img');
if (lcpCandidate) {
lcpCandidate.loading = 'eager';
lcpCandidate.fetchpriority = 'high';
lcpCandidate.decoding = 'async';
lcpCandidate.width = lcpCandidate.width || 600;
lcpCandidate.height = lcpCandidate.height || 600;
}
// Precargar CSS crítico
const criticalCSS = document.createElement('link');
criticalCSS.rel = 'preload';
criticalCSS.href = 'https://cdn.ecwid.com/stylesheet.css';
criticalCSS.as = 'style';
document.head.appendChild(criticalCSS);
};
// 3. REDUCCIÓN DE CLS (0.37 → Meta <0.1)
const stabilizeLayout = () => {
// A. Reservar espacio para elementos dinámicos
document.querySelectorAll('.ecwid-widget, .ecwid-modal').forEach(el => {
el.style.minHeight = el.offsetHeight > 0 ? `${el.offsetHeight}px` : '300px';
});
// B. Fijar dimensiones de imágenes
document.querySelectorAll('.ecwid-img').forEach(img => {
if (!img.hasAttribute('width')) img.width = img.naturalWidth || 300;
if (!img.hasAttribute('height')) img.height = img.naturalHeight || 300;
img.style.objectFit = 'cover';
});
};
// 4. MEJORA DE INP (409ms → Meta <200ms)
const improveInteractions = () => {
// Diferir eventos pesados
const heavyButtons = document.querySelectorAll('.ecwid-btnAddToCart, .ecwid-btn--primary');
heavyButtons.forEach(btn => {
const originalClick = btn.onclick;
btn.onclick = null;
btn.addEventListener('click', function(e) {
setTimeout(() => originalClick(e), 100);
});
});
};
// 5. OPTIMIZACIÓN DE RECURSOS
const optimizeResources = () => {
// Retrasar widgets no críticos
setTimeout(() => {
const nonCritical = document.querySelectorAll('[data-lazy-load]');
nonCritical.forEach(el => el.style.display = 'block');
}, 2000);
// Limitar repetición de animaciones
document.querySelectorAll('*').forEach(el => {
el.style.animationIterationCount = '1';
});
};
// 6. MONITOREO CONTINUO
new MutationObserver((mutations) => {
stabilizeLayout();
}).observe(document.body, {
childList: true,
subtree: true
});
// EJECUTAR TODAS LAS OPTIMIZACIONES
optimizeLCP();
stabilizeLayout();
improveInteractions();
optimizeResources();
// DIAGNÓSTICO POR CONSOLA
console.log('[ECWID MOBILE OPTIMIZATIONS] ✅ Optimizaciones aplicadas');
});
// POLYFILL PARA NAVEGADORES ANTIGUOS
window.requestIdleCallback = window.requestIdleCallback || function(cb) {
return setTimeout(cb, 500);
};
