Saltar al contenido principal
Tiempo de lectura de 6 minutos (1143 palabras)

Cómo agrupar y minimizar recursos en WordPress

file-group-and-minify

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

WP Speed of Light es la mejor solución para realizar tu sitio de wordpress porque tiene muchas opciones para que tu sitio se cargue rápido con un tablero realmente amigable y sí, una de estas opciones es agrupar y minificar recursos. La inclusión / exclusión de un solo archivo del grupo y el proceso de minificación es clave para una optimización personalizada sin conflictos.

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

 

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

Aprendamos cómo hacer una minificación de WordPress js y CSS, pero primero, necesitamos saber qué significa la minificación "La minificación se refiere al proceso de eliminar datos innecesarios o redundantes sin afectar la forma en que el navegador procesa el recurso, por ejemplo, comentarios de código y formatear, eliminar el código no utilizado, usar nombres de funciones y variables 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 usando un sitio con woocommerce y algunos productos, por lo que la primera vez se cargará un poco lentamente.

 

antes de la prueba

 

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

 

grupo-y-minify-dashboard

 

Las opciones del complemento PRO son: Excluir secuencias de comandos en línea (excluir secuencias de comandos en línea de la minificación), mover secuencias de comandos al pie de página (le permite acelerar su sitio moviendo todas las secuencias de comandos minificadas al pie de página), fuente de grupo y fuentes de Google (fuentes locales de grupo y fuentes de Google en un solo archivo para que se entregue más rápido) y Exclusión avanzada de archivos.
 
Tienes la opción de minificar, como puedes ver, JS, CSS y también el HTML ahora solo activa estas opciones, haz clic en guardar y todos tus recursos se minimizarán de inmediato, podría tener problemas ya que es una configuración avanzada pero todo. se puede solucionar con la exclusión de algunos códigos y archivos (con el complemento pro).

 

minify-resources

 

 

Ahora todo el trabajo de desarrollador que podría llevar horas se realiza en solo unos segundos.

 

Siguiente paso, WordPress optimiza CSS y JS

Con este complemento, permitiremos que WordPress optimice CSS y js simplemente habilitando las opciones de grupo en el panel, vaya a WP Speed of Light > SpeedUp > Group & Minify , podrá ver un panel con las opciones para agrupar. CSS y js.

Estas opciones le permiten:

  • Grupo JS: agrupar varios archivos Javascript en un solo archivo minimizará el número de solicitudes HTTP
  • CSS grupal: Agrupar varios archivos CSS en un solo archivo minimizará el número de solicitudes HTTP.

Solicitudes HTTP: 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 y scripts puede agrupar en su sitio web, simplemente abra la consola de su navegador (haga clic derecho > Inspeccionar o F12) y abra el panel de red .

 

list-script-chrome

Luego puede enumerar todos los archivos cargados por tipo, aquí, en este ejemplo, he hecho clic en la lista de archivos JS solamente.

Ahora que estamos en esta configuración, solo habilite las opciones de grupo (Group CSS y Group 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 .

 

Seamos 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, simplemente ve a WP Speed of Light > SpeedUp > Group & Minify > Group fonts y la opción Google Fonts .
La opción Agrupar fuentes y fuentes de Google le permitirá agruparlas en un solo archivo para que se publiquen más rápido, esto es bastante útil ya que la mayoría de los temas y diseños de WordPress vienen con 2 o fuentes de forma predeterminada con todas las declinaciones (normal, negrita, cursiva). ...)

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

 

fuente de grupo

 


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, verifiquemos la velocidad.

 

prueba después

 

¡Qué diferencia, de 2,8 a 0,56 segundos! Como te contamos al principio de este post, 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 similares, nombre de clase. Es por eso que con la opción "exclusión de minificación de archivos", podrá excluir archivos del proceso de minificación y grupo, vaya a WP Speed of Light > SpeedUp > Group & Minify , podrá ver la de exclusión avanzada de archivos .

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.

 

alerta-de-conflicto-de-recursos-de-grupo


 Para poder enumerar los scripts cargados en su sitio web, WP Speed of Light necesita escanear su carpeta para enumerarlos. Por lo general, todos están contenidos en su carpeta /wp-content que agrupa todos sus complementos y temas. Seleccione esa carpeta (al menos) y haga clic en "Escanear ahora"

 

seleccionar-carpetas-para-escanear

 

Ejecutará un análisis y, finalmente, haga clic en ver resultados cuando se complete el análisis.

 

escaneado

 

A continuación se mostrará una lista de archivos clasificados por tipo (Todos, JS, CSS, Fuente). Si ha identificado un archivo que causa problemas, al activar el grupo de archivos y la minificación, puede excluirlo de aquí usando un simple conmutador ON/OFF .

 

excluir archivos

 

Esto te ayudará a excluir archivos y, de esta manera, solucionar 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 el esfuerzo, y lo harás. Siempre podrás probar cómo funciona ejecutando la prueba de velocidad directamente desde WP Speed of Light .
 
Continúe y pruebe WP Speed of Light : https://www.joomunited.com/wordpress-products/wp-speed-of-light

5
Mantente informado

Cuando se suscriba al blog, le enviaremos un correo electrónico cuando haya nuevas actualizaciones en el sitio para que no se las pierda.

Artículos Relacionados

 

Comentarios

Aún no se han realizado comentarios. Sé el primero en enviar un comentario
¿Ya registrado? Entre aquí
jueves, 26 de diciembre de 2024

Imagen CAPTCHA