Minificar CSS y JavaScript

Home   /   Minificar CSS y JavaScript

Minificar y unificar archivos de CSS y JavaScript

Minificar suena bastante mal, pero minimizar tampoco me suena bien. Minificar bien del techno verbo minify in english.

En cualquier caso, los navegadores no necesitan que tus archivos sean legibles, es decir, si eliminamos todos los espacios en blanco, será muy incómodo para trabajar pero a los navegadores les da absolutamente igual. Reduciendo longitud del contenido de los archivos, reduces byte, reduces transferencia, aumentas velocidad.

Minificar es justamente eso, sacar todo lo que no aporta pero amplia el tamaño, cómo los espacios en blanco y saltos de línea. Lo mismo para CSS que para Javascript.

Tampoco es bueno separar el CSS o JS en varios archivos, ya que eso significa n peticiones del navegador a tu servidor. Para optimizar CSS, hay que juntar todos los archivos CSS en un solo, mucho mejor. Eso es unificar o concatenar archivos. Lo mismo para el Javascript, un sólo archivo .js es lo ideal. Para optimizar la entrega de recursos cómo CSS o JS simplemente hay que hacer esto, minificar y unificar. Al menos la teoria ya la tienes, juntar archivos y borrar espacios y saltos de línea innecesarios (hablando en plata).

He probado casi todos los plugins existentes y me quedo con Auto Optimize.

Instalar y configurar Auto Optimize

Problemas al unificar y minificar Javascript

CSS no suele dar problemas, pero si que es posible que tengamos problemas al unificar archivos de JS, ya que el orden en que se cargan es importante, y ningún plugin tiene eso en cuenta porque casi significaría entender primero las líneas de Javascript. Se podría llegar a construir un plugin para realizar esta tarea automaticamente, pero por ahora no hay nada hecho y estable. Si una función de Javascript está llamando a otra que se carga más tarde, resultará en un bonito error en nuestra consola. Así que si estamos usando plantillas de otros, es posible que no podamos unificar todo el JS en un sólo archivo, dejaremos archivos.js separados pero siempre minificados.

Las opciones que verás activadas en las capturas, hacen referencia a la configuración más segura. No hay problema en activar las demás opciones (sobretodo las de javascript) si ves que algo se rompe o aparecen errores en la consola del navegador simplemente vuelve atrás y desactiva las opciones.

Optimizar CSS: Minificar y unificar archivos CSS

Auto Optimize nos ayudará a unificar todos los archivos CSS, incrustar imágenes pequeñas (menos peticiones desde el navegador al servidor) y a optimizar y minificar el código CSS.

Optimizar CSS WordPress

Optimizar JavaScript: Minificar y unificar archivos JS

Con Javascript Auto Optimize también es de gran ayuda. ¡Ojo! el javascript puede romperse. Activa las opciones de Optimizar el código Javascript y unificar archivos JS si ves que la página se rompe o aparecen errores en la consola del navegador.

Opcion optimizar Javascript Auto Optimize

Optimizar / minificar HTML

Opción optimizar / minify HTML de auto optimize

Optimizar Google Fonts y quitar emojis

Prueba antes la opción Combinar y cargar las fuentes asíncronamente con webfont.js, si te da problemas o algo se rompe en tu página, vuelve a la opción anterior.

Optimizar-google-fonts

Guardar copias estáticas y minificar archivos excluidos

optimizar HTML WordPress

Con esto ya tendríamos la entrega de recursos CSS y Javascript optimizados.

Continuamos con la parte de optimizar cache para wordpress.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Optimizando WP

Optimizando WP es una guía para optimizar y acelerar la velocidad de carga de tu página web WordPress en constante construcción.

Autor: @betoayesa
Última actualización: 13/04/2020

Si necesitas ayuda contacta con PhpNinja

Cualquier duda, escribe en los comentarios, trataremos de responder rapidamente.