Mantys Core
Fundador de MantysLAB

Maxime

Maxime fundó MantysLAB y desarrolla Mantys Core, un plugin de rendimiento para WordPress basado en la nube.

Con Mantys Media, su actividad freelance, trabaja directamente en sitios WordPress de clientes: maquetadores como Divi y Elementor, tiendas WooCommerce, configuraciones de seguimiento y consentimiento.

Las guías de este sitio salen de ese trabajo: problemas encontrados en sitios reales, medidos en el navegador, y las soluciones que funcionaron.

Áreas de especialidad

  • Core Web Vitals
  • WordPress
  • Critical CSS
  • JavaScript
  • Cache
  • WebP
  • Divi
  • Elementor
  • WooCommerce

Guías de Maxime

Core Web Vitals · 11 min

Cómo optimizar un sitio WordPress: por dónde empezar y en qué orden

Acelerar WordPress no es una lista de treinta trucos que se activan de golpe, es un diagnóstico: leer los datos de sus visitantes, encontrar qué métrica falla en qué plantilla, corregir la causa en el orden correcto (servidor, imágenes, CSS, JavaScript) y cambiar una sola cosa cada vez.

JavaScript · 9 min

Retrasar la ejecución de JavaScript rompió mi sitio: cómo encontrar el script culpable

Retrasar JavaScript rompe un sitio de cinco maneras mecánicas (una dependencia que falta, un evento de página que ya se disparó, un primer clic que se pierde, una cadena atascada en un script, un visitante que nunca se cuenta), y cada una deja una firma que puede leer en el navegador, así que puede excluir un solo script en lugar de desactivar toda la opción.

Core Web Vitals · 8 min

Cómo corregir los desplazamientos de diseño (CLS) en Divi y Elementor

En los maquetadores visuales, la mayoría de los desplazamientos de diseño vienen de seis fuentes (imágenes sin dimensiones, estilos que llegan después del primer pintado, fuentes web que se intercambian, cabeceras y banners añadidos por scripts, sliders antes de arrancar, contenidos incrustados), y cada una se corrige reservando el espacio antes de que llegue el contenido.

Imágenes · 7 min

Mi hero es una imagen de fondo: por qué ralentiza el LCP y cómo solucionarlo (Divi, Elementor)

Una imagen de fondo CSS es invisible para el navegador hasta que la hoja de estilos se descarga y se aplica, no tiene srcset, y los maquetadores a menudo le aplican lazy load con JavaScript, así que el hero arranca tarde; la mejor solución es una imagen real, y la siguiente, un preload por dispositivo y nada de lazy load en esa sección.

Imágenes · 7 min

La imagen LCP no es la misma en móvil y en escritorio: cómo hacer el preload de la correcta

Cuando la imagen más grande difiere entre el móvil y el escritorio, un único preload hace que uno de los dos descargue una imagen que no va a mostrar, o que descargue el hero dos veces, y la solución es un preload por dispositivo, con el mismo srcset y sizes que la imagen, colocado justo después de la etiqueta viewport.

Core Web Vitals · 8 min

PageSpeed y Search Console no coinciden: cómo leer los datos de laboratorio y de campo

La puntuación de PageSpeed es una única visita simulada en un teléfono y una red deliberadamente lentos, mientras que Search Console refleja lo que vivieron sus visitantes reales durante 28 días, así que ambos pueden discrepar en los dos sentidos: datos de laboratorio en verde con datos de campo deficientes cuando su audiencia es más lenta que la prueba, y datos de laboratorio mediocres con datos de campo en verde cuando es más rápida.

CSS · 8 min

Eliminar el CSS no utilizado rompió mi diseño: cómo encontrar los estilos que faltan

Una pasada de CSS utilizado conserva solo las reglas que vio en uso en una única captura de la página, así que todo lo que no estaba en pantalla en ese momento (un estado abierto, el otro dispositivo, contenido cargado más tarde, una fuente de iconos, una animación de entrada) pierde sus estilos, y cada uno de estos huecos tiene una firma que le indica qué regla debe restituir.

JavaScript · 8 min

Cómo hacer que Axeptio cargue más rápido (sin romper el consentimiento)

Un banner de Axeptio rara vez llega tarde por culpa del propio Axeptio, llega tarde porque su cadena de peticiones (ajustes, SDK, configuración del proyecto, fuente) hace cola detrás de todo lo demás que carga la página, así que las soluciones son aligerar la competencia, no retrasar nunca la herramienta de consentimiento, cargarla pronto, prescindir de la fuente que no usa y personalizarla sin pelearse con su marcado.

Caché · 11 min

Cómo acelerar una tienda WooCommerce sin romper el carrito

Una tienda WooCommerce son dos sitios en uno, un catálogo que se puede cachear y optimizar a fondo, y una transacción (carrito, pago, mi cuenta) que nunca debe cachearse ni recortarse, así que una tienda rápida empieza por trazar esa línea y después corrige la caché, los cart fragments, las imágenes de producto y los scripts a cada lado de ella.

Imágenes · 8 min

SVG en línea: perfecto para un icono, veneno para una ilustración

Un SVG no es un único tipo de imagen. Un icono pequeño en línea es ideal, una ilustración pesada en línea infla tu página, y una foto raster escondida dentro de un SVG es lo peor de las tres. Aquí tienes cómo distinguirlos y elegir el formato correcto cada vez.

JavaScript · 8 min

Cómo elegir un tema, y detectar los que entregan un único archivo JavaScript gigante

Antes de tu primera línea de contenido, tu tema decide lo que un navegador debe descargar, analizar y ejecutar. La decisión que más pesa es cómo entrega su JavaScript: un conjunto divisible de archivos pequeños, o un único bloque gigante que ata toda la página a su parte más lenta.

CSS · 6 min

¿Por qué mi minicarrito de WooCommerce deja de mostrarse cuando activo Remove Unused CSS?

El panel del minicarrito está oculto hasta que alguien pasa el cursor sobre él, así que un proceso de used-CSS elimina sus estilos y un retraso de JavaScript impide que se abra. Vuelve a funcionar en cuanto mantiene sus estilos en una safelist y deja que sus scripts, incluidos los cart fragments, se ejecuten.

Core Web Vitals · 9 min

Cómo acelerar un sitio Divi y mejorar sus Core Web Vitals (paso a paso)

Un sitio Divi puede ser rápido si se optimiza en el orden correcto, primero las imágenes, luego el CSS y después el JavaScript, empezando por las palancas que no pueden romper nada antes de tocar las que sí pueden.

JavaScript · 5 min

¿Por qué mi menú de hamburguesa solo se abre al segundo clic?

Si activó un retraso de JavaScript (cargar los scripts en el primer clic o tras un temporizador), el primer toque en la hamburguesa despierta la carga del script, no abre el menú. El menú solo responde al segundo toque. La solución: aislar el script del menú y sus dependencias fuera del retraso, o mejor aún, darle un menú vanilla sin dependencias.

Core Web Vitals · 6 min

¿Qué optimizaciones puede activar sin ningún riesgo de romper su sitio?

Existe toda una familia de optimizaciones que no pueden romper su sitio, porque reducen el peso de los archivos o dan pistas al navegador, sin cambiar nunca lo que se ejecuta. Empiece por ahí: le ganan lo esencial, con los ojos cerrados.

CSS · 6 min

¿Por qué mi critical CSS rompió mi menú / superposición (aparece abierto al cargar)?

Los generadores de critical CSS solo conservan los estilos de lo que es visible en la parte superior de la página al cargar. Sus elementos ocultos por defecto y que se abren al hacer clic (menú móvil, superposición de búsqueda, modal, panel lateral) se consideran inútiles y se eliminan. El resultado: al cargar, aparecen abiertos, rotos, sin estilo.

Imágenes · 5 min

¿Por qué PageSpeed Insights sigue diciendo “Properly size images” si ya tengo un srcset?

Srcset le ofrece al navegador una lista de tamaños, pero es el atributo sizes el que le indica cuál elegir. Si sizes falta, es incorrecto o se ignora, el navegador descarga la imagen más grande de la lista, y PageSpeed lo marca, haya o no srcset.

Mi cuentaObtener licencia →