// Inicializar Web Vitals después de que Google Analytics esté listo if (typeof window !== 'undefined') { // Implementación manual de Web Vitals sin dependencias externas function sendToGoogleAnalytics(metric) { if (typeof gtag !== 'undefined') { gtag('event', metric.name, { event_category: 'Web Vitals', event_label: metric.id, value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value), non_interaction: true, custom_map: { metric_rating: metric.rating, metric_delta: metric.delta, }, }); } } function handleWebVital(metric) { sendToGoogleAnalytics(metric); // Solo log en desarrollo (localhost) if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') { // eslint-disable-next-line no-console console.log('Web Vital:', { name: metric.name, value: metric.value, rating: metric.rating, delta: metric.delta, }); } } // Implementación manual de Core Web Vitals try { // LCP - Largest Contentful Paint if ('PerformanceObserver' in window) { const lcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const lastEntry = entries[entries.length - 1]; if (lastEntry) { handleWebVital({ name: 'LCP', value: lastEntry.startTime, rating: lastEntry.startTime < 2500 ? 'good' : lastEntry.startTime < 4000 ? 'needs-improvement' : 'poor', delta: lastEntry.startTime, id: 'lcp-' + Date.now() }); } }); lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] }); } // FID - First Input Delay (usando INP como alternativa) if ('PerformanceObserver' in window) { const fidObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); entries.forEach((entry) => { if (entry.processingStart && entry.startTime) { const fid = entry.processingStart - entry.startTime; handleWebVital({ name: 'FID', value: fid, rating: fid < 100 ? 'good' : fid < 300 ? 'needs-improvement' : 'poor', delta: fid, id: 'fid-' + Date.now() }); } }); }); fidObserver.observe({ entryTypes: ['first-input'] }); } // CLS - Cumulative Layout Shift if ('PerformanceObserver' in window) { let clsValue = 0; const clsObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); entries.forEach((entry) => { if (!entry.hadRecentInput) { clsValue += entry.value; } }); handleWebVital({ name: 'CLS', value: clsValue, rating: clsValue < 0.1 ? 'good' : clsValue < 0.25 ? 'needs-improvement' : 'poor', delta: clsValue, id: 'cls-' + Date.now() }); }); clsObserver.observe({ entryTypes: ['layout-shift'] }); } // FCP - First Contentful Paint if ('PerformanceObserver' in window) { const fcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); entries.forEach((entry) => { if (entry.name === 'first-contentful-paint') { handleWebVital({ name: 'FCP', value: entry.startTime, rating: entry.startTime < 1800 ? 'good' : entry.startTime < 3000 ? 'needs-improvement' : 'poor', delta: entry.startTime, id: 'fcp-' + Date.now() }); } }); }); fcpObserver.observe({ entryTypes: ['paint'] }); } // TTFB - Time to First Byte if ('PerformanceObserver' in window) { const ttfbObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); entries.forEach((entry) => { if (entry.entryType === 'navigation') { const ttfb = entry.responseStart - entry.requestStart; handleWebVital({ name: 'TTFB', value: ttfb, rating: ttfb < 800 ? 'good' : ttfb < 1800 ? 'needs-improvement' : 'poor', delta: ttfb, id: 'ttfb-' + Date.now() }); } }); }); ttfbObserver.observe({ entryTypes: ['navigation'] }); } } catch (error) { // Solo log en desarrollo (localhost) if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') { // eslint-disable-next-line no-console console.error('Error initializing Web Vitals:', error); } } }