Cómo minificar, comprimir y combinar archivos JS y CSS en WordPress

Minificar y combinar archivos JS y CSS en WordPress

¿Sabes que los archivos Javascript y CSS ralentizan tu web enormemente y que se deberían de minificar y combinar?

Pero también debes de saber que no es algo sencillo, ni que se pueda aplicar a cualquier página web.

Hoy voy a darte las claves de lo que deberías de saber para aplicar correctamente estas técnicas de optimización WPO.

Recuerda que la velocidad es un factor de posicionamiento y debes de optimizar WordPress todo lo que puedas.

Pero antes de nada voy a explicarte para qué sirve cada uno.

¿Qué es la minificación de archivos y para qué la necesitas?

Los archivos JS y CSS son archivos de código que los ejecuta el navegador de Internet.

Cualquier página web que veas está hecha como estos archivos, unos para dar el diseño (CSS) y otros para dar ciertas funcionalidades (JS).

Al ser códigos y además de texto plano, tienen espacios en blanco, saltos de linea y también hay comentarios.

La minificación de archivos consiste en coger estos archivos y eliminar todo lo que no sirve que te he comentado antes.

Osea coge el siguiente código.

body {
 background-color: #fff;
 color: #2a2a2a;
 font-family: 'Roboto', Helvetica, Arial, sans-serif;
 font-size: 18px;
 line-height: 1.5;
 -webkit-font-smoothing: antialiased;
 overflow-x: hidden !important;
}

Y lo transforma en:

body{background-color:#fff;color:#2a2a2a;font-family:'Roboto',Helvetica,Arial,sans-serif;font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden!important;}

Bueno, estos espacios y demás sirven para que el desarrollador pueda trabajar de forma cómoda y ordenada, pero al navegador no.

Al eliminar todo esto el script pesa mucho menos y se carga mucho antes, y obviamente la web también.

Por eso es importante minificar cualquier archivo de este tipo y aligerar nuestras webs.

¿Qué es la combinación de archivos o por qué puede ser útil?

Con la combinación hacemos lo que su nombre indica, combinar varios archivos en uno o varios.

Osea que si tenemos un archivo llamado style.css y otro que se llame style2.css los combinará en uno solo que se llame por ejemplo style-com.css por decir algo.

De este modo lo que conseguimos es que en vez de hacer 2 llamadas, pues que se haga solo una con lo que la web carga mas rápido.

Obviamente con 2 archivos no nos merece la pena, pero piensa si hubieran 20.

En ese caso sí que interesa que todos esos estén juntos en uno solo.

Puede que pienses y si no te lo digo yo, que si los juntamos en uno, este será mucho más grande y pesará más.

Tienes toda la razón.

Por eso muchas de las herramientas no fusionan todos estos archivos en uno, sino que crean varios para aprovechar la descarga paralela de los navegadores.

Errores comunes que te puedes encontrar

Ya te he explicado que estas funciones se aplican con archivos JS y CSS, así que lo más normal es que te encuentres con 2 problemas.

La web se ve mal o incluso no se ve

Si por algún motivo no se ha hecho correctamente la minificación o incluso si hay un error al combinar estos archivos, seguro que tu web dejará de verse.

Y con esto me refiero a que dejen de verse desde los iconos de redes sociales, hasta la web completa.

Puede fallarte cualquier cosa, así que debes de estar muy atento y realizar las pruebas adecuadamente si usas estas funciones.

Ha dejado de funcionar algo

Al igual que con lo anterior, al usar estas funciones con los archivos Javascript, puede que nos deje de funcionar algo.

Puede ser alguna función de la plantilla como menús especiales, la caja de artículos relacionados, formularios de suscripción y mil cosas más.

Hay que revisar a fondo la web y comprobar que todo funciona correctamente.

Plugins para minificar y combinar archivos

A la hora de optimizar estos archivos tienes 2 opciones.

Usar un plugin específico para ello o intentar usar algún plugin de caché que tenga esta función que los hay, para no tener que instalar otro.

Para plugins específicos puedes usar Better WordPress Minify y para plugins de caché que contengan esta función pueden ser W3 Total Cache o WP Rocket el plugin premium de caché más completo.

Como estas funciones son más o menos iguales en estos plugins, voy a hacerte una demostración con WP Rocket.

Minificando y combinando archivos

En mi caso voy a abrir WP Rocket y en la página principal o ajustes básicos voy a activar las funciones de minificación y combinación.

Puedes ver que tan sencillo como elegir los archivos a optimizar y combinar y darle a guardar.

Minificación y combinación con WP Rocket

En mi caso los he activado todos.

¿Quieres tener un WordPress rápido desde YA?
Descarga mi checklist WPO. ¡Es gratis!

La quiero

Desde los archivos HTML, los estilos CSS y scripts JS que se encuentran en el mismo archivo o inline, hasta las fuentes de Google.

En cuanto he activado los CSS y JS me ha avisado de que corro el riesgo de que la web no se vea bien, cosa que obviamente ya sé.

Guardamos los cambios y listo.

Una vez que tenemos activada esta función, hay que ir comprobando que todo funcione correctamente.

Así que voy a ello.

Solucionando los problemas que pueden surgir

He ido navegando por mi web para comprobar que todo funciona bien.

Desde probar formularios que tengo con Thrive Leads, que el formulario de contacto funcione bien, que todo esté en su sitio y todo lo que pueda.

Un fallo muy común suele ser que esos CSS queden guardados en la caché del navegador, con lo que NO veremos si algo falla.

Por eso es importante que cada cierto tiempo limpies la caché del navegador para ir comprobando sección por sección de la web.

En mi caso todo ha ido correctamente.

Pero si no es tu caso sigue leyendo.

Haciendo un listado completo de scripts

Si detectamos que algo va mal, obviamente hay que ver qué script está fallando.

Y si tienes una web con muchos plugins, ya te digo yo que serán muchos los que tengas.

Pero te voy a presentar una herramienta para detectar todos los scripts que usa tu web.

WP Rocket tiene una herramienta que se llama Debug tools que poniendo la url de tu web te sacará el listado entero de los scripts que usas.

Pones la url en la caja, pulsas el botón de Get CSS and JS files y te sacará el listado.

WP Rocket debug CSS & JS Files

Una vez que tienes el listado de scripts podrás hacerte una idea de lo que falla.

Si por ejemplo falla una función del plugin de compartir, ya sabemos que hay que sacar fuera el script JS de este plugin.

O el CSS si el fallo es que no se ve bien o no se muestra donde debe.

Excluir archivos de la minificación

Cualquier plugin que usemos tiene una función para excluir archivos en el caso de que nos fallen.

En WP Rocket nos vamos al apartado de ajustes avanzados y si hacemos un poco de scroll podremos ver unas cajas para ello.

Excluir archivos a minificar

En una podremos excluir los CSS y en otra los JS.

Para ello simplemente poner la url del archivo que falla y guardas los cambios.

Recuerda que debe de ser una url por linea y no te olvides de vaciar la caché y volver a comprobar que todo funcione bien.

Ahora ese script no se minificará, ni combinará, pero tampoco te fallará.

Alternativas que te recomiendo usar

La alternativa más directa es usar algún servicio que se encargue de servir estos archivos estáticos o lo que viene siendo un CDN .

Un CDN como por ejemplo Cloudflare, tiene repartidos servidores por todo el mundo y servirá estos archivos por ti.

También dispone de estas 2 funciones, pero si obviamente nos falla en plugins, aquí nos pasará lo mismo.

Puede ser una buena idea, aunque ya te digo que la curva de aprendizaje es hasta más compleja que la de un plugin.

Resumiendo

Espero que ye haya gustado el artículo y puedas mejorar un poquito más la velocidad de tu web.

Quédate con lo importante:

  • La minificación reduce considerablemente el tamaño del archivo.
  • La combinación une varios archivos en uno para reducir las llamadas.
  • No unas todos los archivos en uno para sacarle provecho a la descarga paralela del navegador.
  • Comprueba a fondo tu web para ver que todo funciona bien.
  • Y no te olvides de ir limpiando la caché para comprobar lo que tus usuarios ven.

¿Utilizas esta función? ¿Has tenido algún problema con tu web? Cuéntamelo en los comentarios.

Foto: https://es.123rf.com/profile_lbrienza

6
Deja un comentario

avatar
3 Hilos de comentario
3 Respuestas de hilo
1 Seguidores
 
Comentario más reaccionado
El hilo de comentarios más caliente
3 Autores de comentarios
Jose Gonzalez VillarrealRaúl GonzálezAlain Autores de comentarios recientes
el más nuevo el más antiguo el más votado
Jose Gonzalez Villarreal
Invitado
Jose Gonzalez Villarreal

Muchas gracias Raúl, voy a probar lo que has comentado. Mi mayor problema es que tengo una web con muchos plugins, en total 65, que son bastantes, a nivel frontend va bien, pero el backend se ha relentizado mucho, sabes alguna manera de poder hacer que el backend valla mas rapido ? un CDN afectaría también al backend o solo al frontend? en esto soy muy novato.

Alain
Invitado
Alain

Raúl. La verdad que ya esto es un poquito en chino, pero hay que tratar de entenderlo. Una duda que siempre he tenido. Si contrato Cloudflare Premium veo en Siteground que trae una serie de herramientas que incluso optimizan hasta las imágenes. En ese caso podría prescindir de WP Rocket e Imagify ?