Mantys CoreGuías y base de conocimiento
Rendimiento de WordPress en la práctica, explicado sin jerga.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
¿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.