La velocidad de carga de un sitio web puede tener un impacto en el posicionamiento en los motores de búsqueda. Más importante aún, los usuarios estarán agradecidos al ahorrar segundos de tiempo de carga de la página. Desde cualquier punto de vista, tener un sitio optimizado conlleva numerosas ventajas para los visitantes y los administradores. Los sitios desarrollados con Joomla no están exentos de la necesidad de implementar estas optimizaciones. Para esto, en el directorio oficial de extensiones de Joomla hay disponibles una gran variedad de extensiones que se enfocan en diferentes tipos de optimizaciones; sin embargo, hay una extensión que destaca por unificar decenas de optimizaciones en una sola herramienta. Esta es JCH Optimize y con una puntuación perfecta se ha convertido en el componente de optimización por excelencia para Joomla. En Ayuda Joomla queremos enseñarte a configurar esta extensión para ayudarte a mejorar el rendimiento de tu sitio; y todo sin necesidad de saber programar.
Instalación y configuración básica
El proceso de instalación es el habitual de las extensiones disponibles en el directorio oficial. Solamente es necesario buscar el plugin y hacer clic en Instalar:
Una vez instalado, toda la configuración podrá ser realizada desde los parámetros del plugin que puede ser ubicado en la lista respectiva en Joomla. Es importante recordar habilitarlo para que todos los cambios en la configuración sean aplicados al sitio web:
Al ingresar a la configuración del plugin se encuentran 6 pestañas que clasifican los diferentes parámetros de la extensión. La pestaña más importante es la de Opciones básicas e incluye los aspectos de configuración que mayor impacto van a generar sobre el rendimiento del sitio.
Solo habilitando las optimizaciones de esta sección es posible notar cambios importantes en la nota generada por servicios como Google PageSpeed Insights. El primer paso es activar la combinación de los archivos CSS y JavaScript. Esta optimización se puede dar en varios niveles.
Por ejemplo, la combinación de los archivos se habilita automáticamente al elegir cualquiera de los niveles, desde mínimo hasta óptimo. Por otro lado, optimizaciones cómo minificación del CSS, JavaScript y HTML no se habilitan sino hasta el nivel intermedio de configuración automática y la carga asíncrona de JavaScript únicamente se activa en el nivel óptimo. También, el posicionamiento de JavaScript al final de la página solo se habilita en el modo premiun y óptimo.
Pero ¿cómo logra JCH Optimiza aplicar estas optimizaciones? En muchos casos, el plugin utiliza expresiones regulares para identificar archivos CSS y JS en el HTML y combinarlos en un único archivo y almacenarlo en la caché. Para la minificación se identifican igualmente los archivos y se elimina contenido innecesario (por ejemplo, espacios y tabulaciones) reduciendo el tamaño del los archivos. Para cargar los archivos JavaScript de forma asíncrona añade el atributo async a los ficheros combinados y así previene bloqueo en el renderizado del contenido del sitio.
De forma independiente, es posible definir el nivel de minificación del HTML cada uno con distinta agresividad y así eliminando más o menos secciones del código.
Configuración miscelánea
Esta sección incluida dentro de la configuración básica contiene 4 herramientas de gran utilidad para optimizar el rendimiento del sitio web.
La primera optimiza el archivo “.htaccess” añadiendo una serie de reglas para aprovechar el almacenamiento caché del navegador. Esta es una de las recomendaciones con mucho impacto en la calificación de velocidad de carga dada por Google.
En la misma sección hay dos herramientas para fijar los permisos correctos a los archivos generados por el plugin y ordenar la carga del mismo. La primera es útil si al activar el plugin se han perdido los estilos en el sitio web y las páginas no cargan adecuadamente. La segunda también es útil en el caso de conflicto con otros plugins.
Cómo se mencionó anteriormente, el plugin genera una memoria caché de los archivos optimizados creados y estos son utilizados en la carga del sitio, si se realizan cambios en los archivos originales es posible que estos no sean visibles sino hasta la cuarta herramienta para limpieza de la caché.
¿Conflictos?
Existe la posibilidad de que algunos de los procedimientos descritos anteriormente generen algún tipo de conflicto ya sea con otras extensiones o plantillas. JCH Optimize cuenta con una sección dedicada a lidiar con este tipo de problemas. En la pestaña Opciones de exclusión es posible excluir:
- Archivos CSS individuales
- Archivos CSS de extensiones específicas
- Archivos JavaScript de extensiones específicas
- Elementos del menú específicos
- URLs específicos
Esto es posible hacerlo de dos formas distintas, la primera es excluyendo manteniendo el orden de ejecución original y otra sin mantener el orden.
Optimización de imágenes
JCH Optimize ofrece varias herramientas para optimizar la carga de imágenes. Y es que las imágenes suelen ser una parte importante del tamaño total de una página, por lo que mantenerlas optimizadas y mejorar el rendimiento en la carga es una tarea básica.
En la pestaña de características de la versión gratuita es posible combinar múltiples imágenes de fondo por medio de un generador sprite y así evitar la carga de múltiples imágenes, especialmente en fondos. En la misma sección es posible habilitar la opción para añadir los atributos de altura y ancho a las imágenes, un requerimiento en el análisis de velocidad de carga de Google.
En la versión de pago del plugin hay dos otras herramientas relacionadas con optimización de imágenes. Cargar las imágenes hasta que estas vayan a ser vistas por el usuario ha demostrado ser una buena opción para reducir tiempos de carga. Al habilitar esta opción, solo hasta que el visitante desplace la página hasta la ubicación de la imagen esta será cargada, evitando la carga de imágenes que nunca serán vistas. En esta sección también es posible excluir imágenes para que no sean afectadas por esta funcionalidad.
La última es un optimizador de imágenes basado en el servicio en línea kraken.io. Este servicio genera imágenes con un tamaño menor sin reducir la calidad de la misma y es compatible con los formatos más populares (JPEG, PNG y GIF). Al usar este optimizador todas las advertencias sobre el tamaño de las imágenes desaparecerán de servicios de análisis como Google PageSpeed Insights.
Otras funcionalidades
Sumado a todo lo anterior, la versión de pago también incluye la posibilidad de cargar recursos estáticos a través de un subdominio relacionado con un CDN, sin embargo este proceso requiere de un tutorial aparte debido a que requiere de pasos de configuración más allá de disponible en JCH Optimize.
Además, es posible optimizar la entrega del código CSS del sitio, el mismo código que ya fue optimizado puede ser cargado de forma diferida de forma que bloquee la carga del contenido visible del sitio. En la sección de número de elementos hay que elegir un número que no perjudique la carga del sitio provocando saltos durante el proceso pero que tampoco bloquee el contenido. Se recomienda probar con las diferentes opciones disponibles hasta encontrar la que mejorar se aplica al sitio.
En conclusión, JCH Optimize es una de las extensiones más completas disponibles en el directorio oficial y en su versión gratuita permite obtener claros beneficios que van a impactar directamente los tiempos de carga de las páginas del sitio web. Incluso, el costo de la versión profesional es muy razonable y se recomienda someter a consideración adquirir la licencia previo análisis de las necesidades del usuario. En cualquier caso, definitivamente es una extensión que vale la pena; cumple con su función, cuenta con un excelente servicio de atención de las dudas del usuario y es constantemente actualizada por su desarrollador.
