Optimizando la carga frontend, ¿cómo combino y comprimo correctamente mi JS?

8

Mi sitio web para un cliente empresarial tiene aproximadamente 90 activos que se descargan al cargar, 35 más o menos son archivos JS. Incluso las extensiones de "optimización" que están hechas para Joomla solo parecen reducirme a aproximadamente 31 archivos JS y comprimir solo los css / js combinados y no los que parecen ejecutarse de forma deshonesta.

He probado algunos de los complementos gratuitos de optimización, y soy reacio a gastar dinero en los pagados si van a hacer muy poco por mis tiempos de carga.

Mi plantilla es una base de Rockettheme con mucha personalización, por lo que tiene Gantry js, bootstrap js, un par de extensiones como mi reproductor de video usan un archivo js, ​​etc., y parecen extenderse a un par por extensión en lugar de solo uno.

¿Qué funciona y qué no para mejorar esta parte de la carga frontal?

Toni Marie
fuente

Respuestas:

9

No será fácil lidiar con todos estos archivos. Combinar, minimizar y comprimir todos estos elementos probablemente traerá problemas. Se necesitará mucho esfuerzo y una combinación de técnicas para alcanzar un nivel de optimización satisfactorio.

Mi enfoque general para lograr un sitio de carga rápida.

Un sitio web rápido es esencial. La optimización de la velocidad de un sitio web, aunque suele tener lugar al final del desarrollo, es algo que debe considerarse desde el principio. Comienza con la plantilla adecuada.

Además, la instalación de todas y cada una de las extensiones, y el uso de cualquier tipo de módulos sofisticados, probablemente resulte en un sitio web pesado, que será muy difícil de hacer más ligero más adelante.

Sé ecléctico: mantente minimalista

Personalmente, cuando se trata de la optimización de la velocidad, trato de ser muy ecléctico con las extensiones que uso. Yo investigo y experimento para la mayoría de los eficientes y de calidad para cada tarea, y siempre trato de evitar utilizar cualquier extensión, si hay cosas que se pueden conseguir de forma manual dentro del núcleo.

Además, si tengo que decidir usar una función de front-end sofisticada que no es realmente importante, lo que me causa problemas para optimizar la velocidad del sitio web, generalmente la descartaré o buscaré otra forma de implementar la característica sofisticada.

También trato de evitar el uso de plantillas comerciales, ya que generalmente vienen con muchas características adicionales para satisfacer muchos gustos diferentes. Prefiero crear la plantilla e incluir solo lo que necesito.

Su trabajo manual

Sugeriría revisar todas las extensiones que tiene para ver cómo cargan sus archivos de activos, y si es posible evitar cargarlas en páginas donde no las necesita, por ejemplo, podría crear anulaciones de plantillas donde sea posible controlarlas por su cuenta La carga de los archivos de activos.

Puede encontrar que hay extensiones que no necesita , pero que aún están cargadas, o que no tiene la configuración óptima sobre cómo deberían funcionar.
Por ejemplo, JCE Mediabox ofrece la opción de cargarse solo en elementos de menú específicos.

También vea si es posible fusionar archivos en uno. Por ejemplo, no permita que ningún módulo cargue su CSS, intente fusionarlo con el archivo CSS de la plantilla.

Herramientas de optimización

COMPRESIÓN Y CONTROL CSS / JAVASCRIPT
En cuanto a las herramientas / complementos de optimización, estoy bastante contento con el complemento JCH Optimize . Es gratis, pero también tiene una versión comercial con soporte por unos pocos dólares. Con los ajustes adecuados, puede producir excelentes resultados y el desarrollador es bastante útil si necesita soporte.

Otra herramienta que podría resultar útil es el complemento JQuery Easy . Puede ayudar a organizar y controlar mejor la carga de varios archivos javascript, en caso de que entren en conflicto entre sí y faciliten la optimización con JCH_Optimize Plugin.

CACHE
También uso Jot Cache , para tener un mejor control sobre el Cache, ya que muchas extensiones tienen problemas con el caché central.

CDN
Usar CDN para entregar contenido estático es la siguiente herramienta: uso NoNumber CDN para Joomla

HTACCESS
Finalmente, grandes beneficios que obtendrá al usar un htaccess para comprimir y agregar encabezados Expire a los archivos.

FFrewin
fuente
5

No existe una solución simple para más de 30 archivos JS.

Anibal
fuente
Hice clic en la sugerencia completa anterior como "respuesta", pero también debo tener en cuenta que RokBooster funcionó mucho mejor para mí que JCH Optimize porque estoy usando una plantilla y extensiones basadas en el pórtico. ¡Gracias! Desearía poder hacer clic en ambos.
Toni Marie
Genial, me alegro de ser útil
Anibal