Descarga gratis mi checklist WPO con 50 puntos a analizar y optimiza tu WordPress.

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.

¿Cuanto mejora la velocidad la minificación y la combinación?

La minificación y la combinación mejoran mucho la velocidad.

La minificación hace que los archivos pesen mucho menos y como siempre recomiendo, la web debe pesar menos de 1 MB.

La combinación hace que estos archivos se carguen de forma mucho más rápida, al no tener que hacer tantas peticiones.

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.

Este contenido solo está disponible para miembros. Si ya eres miembro entra.

Resumiendo

Espero que ye haya gustado el tutorial 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.

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

Descarga gratis mi checklist WPO con 50 puntos a analizar y optimiza tu WordPress.

Centro de preferencias de privacidad

Cookies imprescindibles

Su usan para el correcto funcionamiento de la web como mostrar formularios, cerrar pestañas, etc.

wordpress, gdpr, cppro-ft, cppro-ft-style, cppro-ft-style-temp, cp-pro-page-views, cp-pro-session-init, tocplus_hidetoc

Cookies de analítica

Se utilizan para analizar las visitas y el comportamiento del usuario en la web.

_ga, _gid
_ga, _gid

Cookies de marketing

Se usan para herramientas de email marketing y saber si estás apuntado a mi newsletter.

cmp649171025
cmp649171025

Ir arriba