Minificar y combinar archivos para que la web vaya como un cohete

Cuando hablamos de minificar y combinar archivos hablamos de una técnica avanzada de WPO (Web Performance Optimization) que se encarga de optimizar la entrega de los recursos CSS o JavaScript (JS) entre otros de tu web. Realizar esta técnica hoy en día es de lo más sencillo de hacer gracias a los avances de los plugins en WordPress. Lo que antes se hacía a mano antes, ahora se hace a golpe de clicks.

¿En que consiste minificar y combinar archivos?

Si alguna vez has abierto un archivo CSS o JavaScript seguramente sabrás lo que te voy a comentar ahora. Esa interminable hoja de estilos de lista de clases, identificadores y media querys que ocupan cientos y cientos de lineas. Cada plugin tiene su archivo CSS, JS, HTMl.. y cada plantilla tiene su archivo CSS, JS, HTML… por lo que Google pierde leyendo todos y cada uno de ellos.

La solución que se plantea es ahorrar lineas de espacio y combinar todos los archivos CSS, JS, HTML, etc en uno único para que Google cuando acceda con sus arañas a indexar nuestra web no pierda Crawl Budget (Presupuesto de rastreo). Son todo ventajas. Tú le pones las cosas fáciles a Google y este te premia con mejor posicionamiento. No hay cosa peor que estar o jugar en contra de las normas del motor si quieres posicionar tu página web.

Esta técnica WPO está muy ligada a la optimización en buscadores (SEO) debido a que cuanto mejor cargue una web (WPO) mejor posicionamiento web tendrás (SEO). Entonces es un win win, de hecho, hasta hace un año o así el tiempo de carga de una web te beneficiaba si lo hacías bien y si no, no pasaba nada. Ahora, con el Mobile First indexing aquella web que no cargue rápida no solo no será beneficiada sino que además podría ser penalizada.

Ejemplo de minificación y combinación de archivos

minificar y comprimir archivos ejemplo infografía

Como se puede apreciar, el antes y el después es notable. A mano izquierda el contenido tiene espacios en blanco, saltos de linea, llamada a muchos archivos CSS, etc. A mano derecha el contenido está junto, sin lineas en blanco ni saltos. De hecho, viendo el código fuente pone todo como si fueses una (1) única línea.

Ventajas de minificar y combinar archivos

  1. Compresión de archivos CSS, HTML, JS, etc en un único archivo
  2. Rebaja a una o pocas peticiones al servidor
  3. Aumento de velocidad de carga de la web
  4. A Google le cuesta mucho menos procesar las peticiones
  5. Se aprovecha muchísimo mejor el Crawl Budget

Como minificar y comprimir archivos

Ahora que ya sabes en que consiste minificar y comprimir archivos te voy a enseñar a llevarlo a cabo. Existen muchos plugins gratuitos y alguno de pago como WP Rocket (Que es uno o el que mejor lo hace, la inversión la merece). Como entiendo que la mayoría no está dispuesta a realizar una inversión voy a realizar el proceso de forma gratuita. Los resultados son óptimos pero comparado con plugins de pago dejan algo que desear.

Antes y después de tiempos de carga tras minificar y combinar archivos

Te voy a enseñar a continuación un ejemplo real de los tiempos de carga tras minificar y combinar archivos en esta misma web. Antes he hecho una prueba sin combinar archivos en un sitio web real de mi propiedad y el resultado ha sido:

minificar y combinar archivos resultado real de carga de la web sin comprimir ni minificar archivos

 

Puedes observar como el tiempo de la carga sin minificar ni combinar archivos ha sido de 1660 ms (1,66 segundos). Es un dato bastante bueno a la optimización base que tiene la web y que la estoy haciendo en un WordPress sin plugins, sin plantillas y casi ningún elemento que pueda ralentizar la carga. A continuación he minificado y combinado los archivos y el resultado es el siguiente. Los datos de la prueba:

minificar y combinar archivos resultado real de carga de la web con compresion y minificación de archivos

Como ves el resultado es notorio, he conseguido cargar la web en 0,694 ms o lo que es lo mismo, algo más de medio segundo. Y esto es caché a nivel de página. Imagina cuando te enseñe a habilitar la caché a nivel de servidor, tu web, como la mia, irá como un tiro. Lo que he hecho para obtener esos resultados ha sido:

  1. Optimizar las imagenes de la web manualmente para reducir su peso al máximo
  2. Minificar y combinar archivos como CSS y JS y HTML en un único archivo para cada uno
  3. Optimizar la carga de las imágenes con LazyLoad para que solo carguen bajo demanda (cuando se hace scrolling)
  4. Poner la vida útil de la caché a 0 horas, aunque si tu web no cambia y es contenido estático te recomiendo ponerlo a más tiempo.
  5. Suprimir los query string que solo dan problemas.
  6. Activar la entrega asíncrona de los archivos CSS y JS
  7. Precargar el sitemap nuevo tras el vaciado de la vida útil de la caché
  8. Optimizar datos basura de la base de datos como datos trasient, comentarios spam, comentarios borrados, etc…

Entre otras muchas más técnicas que nos proporciona el plugin WP Rocket (para mi, el mejor plugin de caché y WPO que hay aunque es de pago). Pero no te alarmes, lo que te voy a enseñar es como minificar y combinar archivos en plugins gratuitos que también son muy efectivos. ¡Empecemos!.

Minificar y combinar archivos con WP Rocket

minificar y combinar archivos wprocket plugin

Este es el plugin que he usado yo para Optimizar WordPress y enseñártelo a ti. Te voy a enseñar como lo he optimizado. Lo primero que tienes que acceder es a la sección de “Ajustes” > “WP Rocket” tras instalarlo y verás una pantalla parecida a esta:

minificar y combinar archivos wprocket pagina principal

Como ves, aunque no se vea la página entera, el plugin es muy intuitivo y te deja configurarlo de forma muy sencilla. Lo primero que tienes que haces es acceder a la sección de “Optimizar archivos” y verás una pantalla como esta:

minificar y combinar archivos wprocket pagina optimizar archivos

Por defecto vienen todas desmarcadas por lo que te enseño que es lo que tienes que marcar y cual no dependiendo de las características o necesidades de tu web:

  • Minificar HTML: Lo que hará esta opción es comprimir todo el HTML en una única línea (Que parecerán muchas en el código fuente, pero es solo 1 en verdad). La probabilidad de que tu web se vea mal es baja.
  • Combinar los archivos Google Fonts: Lo que hará esta opción es comprimir todas las peticiones a Google Fonts en una única petición. La probabilidad de que tu web se vea mal es baja.
  • Suprimir los query string: Lo que hará esta opción es eliminar los caracteres especiales que acompañan a los CSS y JS que suelen ser del estilo: style.css?ver=1.3.2. La probabilidad de que tu web se vea mal es baja.
  • Minificar archivos CSS: Lo que hará esta opción es eliminar los espacios en blanco de todos los archivos CSS para que se procese mucho más rápido la lectura en el navegador por el cliente o usuario. La probabilidad de que tu web se vea mal es media.
    • Combinar archivos CSS: Lo que hará esta opción, que solo está disponible si se marca antes la de minificar, será combinar todos los archivos CSS en un único archivo solamente. Así reducimos las peticiones en el servidor. La probabilidad de que tu web se vea mal es alta.
  • Optimizar entrega CSS: Lo que hará esta opción es cargar el archivo combinado o archivos no combinados de forma diferida. Es decir, se va a cargar en paralelo a la carga del código HTML y PHP por lo que es probable que durante unos milisegundos tu web se vea en blanco sin estilos hasta que se complete la carga de CSS .La probabilidad de que tu web se vea mal es alta.
  • Minificar JavaScript: Lo que hará esta opción es comprimir todo el JS en una única línea (Que parecerán muchas en el código fuente, pero es solo 1 en verdad). La probabilidad de que tu web se vea mal es alta.
    • Combinar los archivos javaScript: Lo que hará esta opción, que solo está disponible si se marca antes la de minificar, será combinar todos los archivos JS en un único archivo solamente. Así reducimos las peticiones en el servidor. La probabilidad de que tu web se vea mal es alta.
  • Cargar archivos JavaScript de forma diferida: Lo que hará esta opción es cargar el archivo combinado o archivos no combinados de forma diferida. Es decir, se va a cargar en paralelo a la carga del código HTML y PHP por lo que es probable que durante unos milisegundos tu web se vea algo mal sin los archivos JS hasta que se complete la carga de JS .La probabilidad de que tu web se vea mal es alta.

¿Por qué en algunos es baja, media o alta? Muy sencillo. No todas las webs pueden ser minificadas o combinadas o ambas debido a que cada web es un mundo. Igual tu plantilla de WordPress necesita que cargue el JS después del contenido y entonces no puedes diferir la carga de JS.

Muchos se obsesionan por tener el PageSpeed de Google en verde pero no entienden que no en todas las webs es posible hacerlo puesto que cada web es un mundo y trabaja de forma diferente. Hay que optimizar la web hasta donde se pueda (Tanto a nivel archivo como bases de datos). Trabaja en SEO Onpage, trata de optimizar WordPress todo lo que puedas y trata de optimizar el servidor todo lo que puedas. Así conseguirás carga la web al máximo de tus posibilidades y ofrecer una buena carga a tus visitantes. Más vale eso que nada.

Minificar y combinar archivos con W3 Total Caché

minificar y combinar archivos w3 total cache plugin

Si no dispones de presupuesto para una licencia de WP Rocket, W3 total caché es tu elección. Es gratuito y funciona muy bien. Lo único malo es que la configuración no es tan intuitiva como en WP Rocket y está pensando para personas que entiendan un poco sobre servidores y WPO. Si no es tu caso, me pensaría comprar WP Rocket.

Este plugin dispone de herramientas como la de minificar y combinar archivos como WP Rocket solo que es algo más lioso de explicar. Pero hace las cosas muy bien. Te da la opción de elegir donde guardar la caché; si en disco, memoria, etc… Todo depende de la configuración de tu servidor actual. Si quieres aprender a usar este plugin, te dejo una guía muy buena que escribió Álvaro Fontela (CEO de Raiola Networks) que explica muy bien como trabajar este plugin:

Enlace al tutorial de W3 Total Cachéhttps://raiolanetworks.es/blog/guia-basica-de-configuracion-de-w3-total-cache-en-wordpress/

Minificar y combinar archivos con WP Super caché

minificar y combinar archivos wp super cache plugin

Otra alternativa más a WP Rocket gratuita. Es un plugin de WordPress que tiene funcionalidades muy parecidas a las de WP Rocket y W3 Total caché. Le pasa igual que a W3 Total Caché. Tiene una interfaz algo tediosa pero su funcionalidad es igual de buena.

Con este plugin también podrás minificar y combinar archivos como con el resto. Al igual que con W3 Total Caché, Álvaro Fontela escribió en su día otra guía sobre como optimizar WordPress con este plugin. Álvaro es un destacado experto en WPO y explica muy bien en su artículo las mejores configuraciones.

Enlace al tutorial de WP Super Cache de Álvaro Fontela: https://raiolanetworks.es/blog/configurar-wp-super-cache-en-wordpress/

Conclusiones de minificar y combinar archivos en WordPress

Como comentaba un poco más arriba, no siempre es posible minificar y combinar archivos asique no hay que obsesionarse si tu web no consigue el 100% de optimización de PageSpeed o herramientas como PingDom Tools o parecidos. Trata de optimizar todo lo que te sea posible, pero no fuerces la maquinaria donde no puede llegar.

Déjate asesorar por un experto en WPO (Web Perfomance Optimization) para que te ayude a escalar la carga de tu página web a otro nivel. Jugar con parámetros que no conoces y que luego no sepas como volver atrás puede ser nefasto para tu proyecto. Minificar y combinar archivos hay que hacerlo con precaución.

Trata de valorar si realmente necesitas hacer esto puesto que entran en juego factores que no ves y optimizar WordPress llevando al servidor al 100% puede hacer que se caiga continuamente.