Cómo agrupar y minimizar recursos en WordPress

Tener el mejor rendimiento posible es el sueño de todos los que gestionan un sitio web, agrupar y minificar recursos en WordPress es una de las mejores cosas que podemos hacer para eso, pero puede ser realmente difícil. Agrupar todos sus recursos (principalmente archivos css y js) puede exponer su sitio web si no es un desarrollador porque puede generar conflictos.

WP Speed of Light es la mejor solución para mejorar el rendimiento de tu sitio de WordPress porque tiene muchas opciones para hacer que tu sitio se cargue rápido con un panel de control muy amigable y sí, una de estas opciones es agrupar y minimizar recursos. La inclusión/exclusión de un solo archivo del proceso de agrupación y minimización es clave para una optimización personalizada sin conflictos.

Vamos a utilizar un sitio de WordPress de ejemplo para esta entrada del blog y aprenderemos cómo hacerlo para que el proceso de configuración sea más fácil.

Cómo hacer una minificación de JS y CSS de WordPress

Aprendamos cómo hacer una minificación de js y CSS de wordpress, pero primero, debemos saber qué significa la minificación «La minificación se refiere al proceso de eliminar datos innecesarios o redundantes sin afectar cómo el navegador procesa el recurso, por ejemplo, comentarios de código y formato, eliminar código no utilizado, usar nombres de variables y funciones más cortos, y así sucesivamente».

Ahora, lo que vamos a hacer es una prueba de velocidad en nuestra página para ver los cambios; para este ejemplo, estamos utilizando un sitio con woocommerce y algunos productos, por lo que la primera vez se cargará un poco lentamente.

Sí, 2,79 segundos para cargar la página, no está mal pero podría ser mejor, simplemente minifiquemos el js y CSS y veamos la diferencia, ve a WP Speed of light > SpeedUp > Group & Minify, podrás ver el menú con todas las opciones para minificar. La versión gratuita del plugin incluye la opción de agrupar y minificar, pero la exclusión visual de archivos solo está disponible en la versión PRO Addon.

Opciones del complemento PRO: Excluir script inline (Excluir script inline de la minificación), mover scripts al pie de página (permite acelerar su sitio moviendo todos los scripts minificados al pie), Agrupar fuentes y Google Fonts (Agrupar fuentes locales y Google Fonts en un solo archivo para servir más rápido) y Exclusión avanzada de archivos.
 
Tiene la opción de minificar, como puede ver, JS, CSS y también el HTML; ahora solo active estas opciones, haga clic en guardar y todos sus recursos se minificarán de inmediato, podría haber problemas ya que es una configuración avanzada pero todo puede solucionarse excluyendo algunos códigos y archivos (con el complemento pro).

Ahora todo el trabajo del desarrollador que podría tardar horas se hace en solo unos segundos.

Siguiente paso, WordPress optimiza CSS y JS

Con este plugin permitiremos que WordPress optimice CSS y js simplemente habilitando las opciones de agrupación en el panel de control, ve a WP Speed of Light > SpeedUp > Agrupar & Minificar, podrás ver un panel de control con las opciones para agrupar CSS y js.

Estas opciones le permiten:

• Agrupar JS: La agrupación de varios archivos Javascript en un solo archivo minimizará el número de solicitudes HTTP
• Agrupar CSS: La agrupación de varios archivos CSS en un solo archivo minimizará el número de solicitudes HTTP.

Solicitudes HTTP: estas son solicitudes que se realizan al servidor cada vez que seleccionamos algo o vamos a otra página en el mismo sitio, por lo que si podemos reducir estas solicitudes, el tiempo de carga se reduciría.

Para comprobar cuántos archivos, scripts puedes agrupar en tu sitio web, simplemente abre la consola de tu navegador (clic derecho > Inspeccionar o F12) y abre el panel de red.

Puede enumerar todos los archivos cargados por tipo; aquí, en este ejemplo, he hecho clic solo en la lista de archivos JS.

Ahora que estamos en esta configuración, simplemente habilite las opciones de grupo (Agrupar CSS y Agrupar JS) y haga clic en guardar; tenga en cuenta que estas opciones deben usarse con precaución y tendrá que probar su página porque puede causar conflictos.

Pongámonos serios y optimicemos el peso de la fuente

¿Qué? ¿Otra optimización? ¡Sí! podrás optimizar el peso de la fuente y será tan fácil como habilitar la opción en la configuración, solo ve a WP Speed of Light > SpeedUp > Group & Minify > Group fonts and Google Fonts opción.
La opción Group fonts and Google fonts permitirá agruparlas en un solo archivo para servirlas más rápido, lo cual es muy útil ya que la mayoría de los temas y diseños de WordPress vienen con 2 o fuentes por defecto con todas sus variantes (regular, negrita, cursiva...) 

Simplemente habilita esa opción, haz clic en guardar y todas las fuentes se agruparán.

Ahora que hemos activado todas las opciones para minimizar y agrupar los recursos, deberíamos ver una diferencia en el tiempo de carga de nuestro sitio, Comprobemos la velocidad.

¡Qué diferencia! De 2.8 a 0.56 segundos. Como les dijimos al principio de esta publicación, podemos mejorar el tiempo de carga ;)

Cómo utilizar la exclusión de minificación de archivos

La minificación podría causar problemas en su sitio, ocurre principalmente cuando agrupa ciertos archivos que contienen errores de sintaxis o variables, nombres de clase similares. Por eso, con la “exclusión de minificación de archivos” opción, podrá excluir archivos del proceso de minificación y agrupación, vaya a WP Speed of Light > Acelerar > Agrupar & Minificar, podrá ver el Exclusión avanzada de archivos opción.

Para utilizar la exclusión avanzada de archivos, primero deberá ejecutar un análisis, habilitar la opción y hacer clic en Ejecutar análisis.

 
Para poder listar los scripts cargados en su sitio web, WP Speed of Light necesita escanear su carpeta para listarlos. Normalmente están todos contenidos en su carpeta /wp-content que agrupa todos sus plugins y tema. Seleccione esa carpeta (al menos) y haga clic en “Escanear ahora”

Ejecutará un escaneo, finalmente, haga clic en ver resultados cuando el escaneo haya finalizado.

Una lista de archivos clasificados por tipo (Todos, JS, CSS, Fuente) se mostrará a continuación. Si 'has identificado un archivo que causa problemas, al activar el grupo de archivos y la minificación, puedes excluirlo desde aquí usando un simple interruptor ON/OFF.

Esto le ayudará a excluir archivos y, de esta manera, resolver fácilmente cualquier problema que pueda existir al minificar recursos… El proceso de agrupar y minificar aún requiere algo de trabajo, especialmente en las pruebas, pero definitivamente vale la pena, y siempre podrá probar cómo funciona al ejecutando la prueba de velocidad directamente desde WP Speed of Light.
 
Adelante y pruebe WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light