rendimiento-web

Rendimiento web

Carga brand-guide (para que las correcciones de velocidad nunca cambien la apariencia de la marca) y sigue website-change-safety.

Método

1. Medición base con PageSpeed Insights en móvil, 2-3 ejecuciones por página, más datos de campo. Anota el elemento LCP.
2. Encuentra la causa en el informe: tareas largas, tiempo de arranque / resumen de terceros, solicitudes que bloquean el renderizado, desglose de LCP (retardo de carga vs retardo de renderizado), tamaño del DOM, reflujo forzado.
3. Corrige una causa a la vez, mide de nuevo, conserva solo lo que ayuda.
4. Si es posible, haz pruebas A/B localmente antes de publicar: sirve el nuevo JS/HTML/CSS mediante intercepción de solicitudes contra la página en vivo, y sirve AMBAS versiones de la misma manera (un archivo local sin comprimir vs un archivo en vivo comprimido con gzip distorsiona los tiempos simulados). Compara el tiempo del hilo principal, el tamaño del DOM y el tiempo de estilo/diseño.

Las correcciones que realmente movieron las puntuaciones (revísalas primero)

Peso de terceros y de la plataforma (normalmente lo más grande)

• Aplicaciones desinstaladas que siguen cargando. Elimina widgets de creadores de páginas y entradas de scripts sobrantes. Algunas plataformas siguen inyectando una integración después de eliminar la aplicación (por ejemplo, un editor visual con más de 50 archivos); busca un interruptor de "Desactivar" a nivel de canal/tienda, o pide ayuda al soporte de la plataforma.
• Carga bajo demanda, no en cada página: reproductores de video (muestra una imagen de póster + botón de reproducción, crea el iframe al hacer clic), captchas (carga cuando se abre el formulario), widgets de chat, widgets de fidelización/recompensas (solo en la página que los necesita), widgets de reseñas debajo del pliegue.
• Bloques de video incrustados añadidos a través de un creador de páginas no pueden diferirse desde el tema; mueve esos videos al área de video propia del tema que utiliza una fachada de carga al hacer clic.
• Duplicados: dos librerías de analíticas, la misma etiqueta dos veces, un píxel antiguo y uno nuevo.
• No retrases las etiquetas de anuncios/analíticas hasta la interacción sin la aprobación del propietario; cambia sus datos.

JavaScript que hace demasiado al cargar

• Carruseles/deslizadores: la configuración de deslizadores priorizando escritorio a menudo construye el diseño de escritorio y luego lo reconstruye para móviles; cambia a configuración mobile-first. Los modos "Infinito/bucle" clonan cada diapositiva 2-3 veces (cientos de elementos extra); desactiva el bucle donde no sea necesario. Inicializa los deslizadores que comienzan debajo de la primera pantalla solo cuando se acercan al viewport (IntersectionObserver), con CSS que muestre la fila no inicializada a la misma altura para que nada salte.
• Creadores de páginas y plugins (especialmente WordPress/Wix/Squarespace): cada plugin puede añadir su propio CSS/JS a cada página; desactiva lo que no se usa y carga el resto solo donde sea necesario.
• Marcado duplicado oculto: por ejemplo, páginas de listado que renderizan una cuadrícula Y una vista de lista oculta de cada producto. Renderiza solo una.
• Elimina la depuración sobrante y las rutas de código muerto que aún se ejecutan.

Mayor contenido con pintura (LCP)

• Identifica el elemento LCP real. Si es una imagen de fondo CSS, el navegador la encuentra tarde; añade <link rel="preload" as="image" fetchpriority="high"> solo en esa página, con la URL byte-idéntica a la que resuelve el CSS (de lo contrario se descarga dos veces).
• Solo la primera fila visible de imágenes obtiene fetchpriority="high" (por ejemplo, 2 en una cuadrícula de móvil de 2 columnas); más imágenes de alta prioridad dividen el ancho de banda con la imagen LCP real.
• Nunca cargues perezosamente la imagen LCP. Carga perezosamente todo lo que esté debajo del pliegue.
• Comprueba qué formato ya sirve la plataforma (muchos CDN convierten automáticamente a WebP/AVIF); volver a guardar imágenes puede no aportar nada. Las grandes mejoras provienen de imágenes de origen sobredimensionadas y de valores incorrectos de sizes.

Primera pintura / bloqueo de renderizado

• La hoja de estilo principal del tema suele ser el cuello de botella. El CSS específico de la página se puede separar o se puede incluir CSS crítico en línea, pero es un proyecto más grande y arriesgado; propónlo, no lo incluyas sin más.
• Cada hoja de estilo que bloquea el renderizado o script sincrónico adicional en <head> (a menudo inyectado por aplicaciones) añade retardo.
• Fuentes: mantén las elecciones de font-display intencionadas (las fuentes de iconos necesitan block; las fuentes de texto pueden usar swap solo si las métricas de la alternativa son lo suficientemente cercanas para evitar el cambio de diseño).

Cambio de diseño

• Reserva espacio para imágenes (ancho/alto), embehidos (caja de relación de aspecto), banners y widgets tardíos.
• Cualquier cosa inicializada por JS debe tener CSS previo a la inicialización del mismo tamaño.

Informe

Números antes/después por página (como rangos), estado de los datos de campo, qué cambió y qué queda pendiente de la decisión del propietario (compensaciones de terceros). Recuérdales que las puntuaciones de laboratorio varían; las tendencias y los datos de campo son más importantes que una sola ejecución.