Tenemos muchos archivos CSS y JS pequeños y permitir la fusión parece ser una buena opción.
Muchos de los archivos CSS y JS se utilizan en cada página (página de inicio, página de categoría, página de detalles del producto).
Cada vez que vemos que un archivo fusionado diferente se carga nuevamente en cada página, incluso el CSS contenido debe superponerse.
¿Cómo podemos evitar esto y reutilizar más datos?
css
javascript
frontend
Alex
fuente
fuente
.css
y.js
archivos. En una instalación predeterminada de Magento, los.css
archivos son prácticamente iguales en todo el mundo, por lo que el archivo combinado tiene un hash idéntico. Pero.js
esto difiere mucho, por lo que hay un archivo recientemente combinado para las páginas de productos y para las páginas de categoría, etc., que siempre incluye la versión completa del prototipo.Respuestas:
Respuesta corta: nunca habilite la función de fusión JS / CSS de Magento. En general, es peor para el rendimiento a lo largo del ciclo de vida de una compra típica que enviar cada activo individualmente.
Respuesta larga: solo debe servir un archivo CSS a los usuarios. Varios archivos bloquean la representación hasta que se descargue todo el CSS. A menos que esté sirviendo una gran cantidad de CSS, es ventajoso enviarlo todo de una vez, entonces el navegador lo tiene en caché. El uso de un preprocesador como Sass o LESS puede llevar este paso a su proceso de compilación en lugar de dejar que Magento lo haga de manera ineficiente.
Para JS, idealmente no debería combinar estos del lado del servidor. Los cargadores de scripts del lado del cliente como AMD / RequireJS son mejores opciones y ayudan a administrar las dependencias, lo que no hace el XML de diseño de Magento. Sin embargo, en el mundo real, Magento cae en los scripts en varios puntos del flujo de pago. Todavía es mejor tomar la carga de la página inicial de múltiples solicitudes y tener activos separados pero en caché después.
La extensión Fooman Speedster Advanced es su mejor opción para combinar de manera inteligente los activos sin duplicación (hoy).
Usted está algo limitado por la arquitectura Magento 1.x que comienza con un montón de malas prácticas para el rendimiento de la interfaz. No es realista cambiar el curso de ese barco. Contribuir a Magento 2.
fuente
Hemos estado usando la extensión Fooman Speedster Magento . Es una extensión maravillosa que maneja la fusión de archivos CSS y JS para aumentar el rendimiento de su página.
De la página:
fuente
uglifyjs --compress
y manejar mejor los comentarios, podría obtener una mejora adicional de aproximadamente un 4% más pequeño con mi código. Estoy usando uglifyjs v3 del nodo.