Minificar / Combinar archivos CSS + Javascript de WordPress = Sitio más rápido

WordPress minimiza archivos JS y CSS

Una de las mejores cosas que aprendimos mientras investigábamos para nuestro artículo sobre cómo hacer que el sitio web de Joomla se cargue rápido (1.29 segundos para ser exactos), descubrimos una gran joya de herramienta. 

Como hacen muchas personas cuando se esfuerzan por que un sitio web se cargue más rápido, se refieren a la Sitio de recomendaciones de PageSpeed ​​de Googley con razón, porque si Google hace una declaración, generalmente vale la pena escucharla. Sin embargo, a veces es bastante complicado realizar todas las optimizaciones y es posible que no tenga las habilidades para realizar estos cambios.

Contenido[Mostrar]

Como sabrá, al hacer que su sitio de WordPress sea más rápido, hay un montón de optimizaciones que debe hacer. Uno de ellos es saber cómo aprovechar correctamente el almacenamiento en caché del navegador en WordPress, Algo lo cual CollectiveRay tiene un gran artículo sobre aquí.  

Pero eso no es suficiente si los archivos CSS y Javascript son bastante grandes. De eso se trata la minificación. 

¿Qué es la minificación? (y cómo puede beneficiar a su sitio)

La minificación es la función de tomar un fragmento de código y eliminar cualquier carácter de él (como espacios, saltos de línea, tabulaciones y otros) que no transmiten ningún significado, excepto para hacer que el texto sea más legible. Los archivos de WordPress minificados funcionan de la misma manera como el código original, con la única diferencia de que toman un poco less espacio porque eliminan información adicional. Por esta razón, el archivo se vuelve más pequeño para descargar, lo que resulta en un sitio web más rápido en general.

La minificación es particularmente importante y útil para scripts (como archivos Javascript), hojas de estilo CSS y otros componentes de sitios web similares.

Leer más: Cómo contratar (EXCELENTES) desarrolladores de Javascript - Los 5 mejores sitios, haga clic aquí - https://www.collectiveray.com/hire-javascript-developer

La razón principal para hacer esto y los beneficios para su sitio son:

  • Reducir los tiempos de carga y hacer que su sitio web sea más rápido en general. Dado que la mayoría de los sitios web utilizan varios scripts y archivos de hojas de estilo, lo que resulta en MUCHO espacio adicional. Si bien puede pensar que eliminar espacios no dará como resultado muchos cambios, el proceso de minificación completo de todos los archivos de una instalación de WordPress puede sumar un beneficio significativo.
  • Ocultación del código de lectores casuales. Si bien la minificación resultante no oculta el código de su sitio (es decir, esto es diferente de la ofuscación del código), hace que sea un poco más difícil de entender para los usuarios ocasionales, si eso es algo que le preocupa. 

Si bien es poco probable que la minimización de su código enorme diferencia a los tiempos de carga de su sitio, visto como parte de una estrategia de optimización completa, sería una de las muchas cosas que debería hacer. Puede reducir el tiempo de carga de su página en un par de puntos porcentuales, lo que lo convierte en una buena táctica para implementarless.

¿Qué sucede durante el proceso de minificación?

Esencialmente, el proceso de minificación pasa por dichos archivos de texto y elimina todo lo que esté destinado únicamente al consumo humano, porque después de todo, la máquina que analiza el archivo no hace que el archivo sea legible por humanos. El proceso de minificación de WordPress elimina cualquier elemento, como espacios en blanco adicionales (espacios, líneas nuevas, pestañas), comentarios o cualquier otro texto que aumente el tamaño del archivo sin disminuir la "semántica" del archivo para el navegador. El significado sigue ahí, los archivos son más pequeños.

Por ejemplo, así es como se vería un archivo CSS normal:

cuerpo {
margen: 30px;
padding: 30px;
color: # FFFFFF;
fondo: # f7f7f7;
}
h1 {
font-size: 12px;
color # 222222;
Margin-bottom: 5px;
}

Si bien la versión reducida de este código se vería así:

body{margin:30px;padding:30px;color:#fff;background:#f7f7f7}h1{font-size:12px}

Puede ver que la información textual es exactamente la misma, simplemente está despojada de las cosas que están allí para fines de legibilidad. El mismo concepto se aplica a los archivos Javascript.

El resultado final de usar complementos o medios para minimizar Javascript WordPress sería que la salida HTML, junto con los archivos CSS y archivos JS utilizados por su sitio web y sus complementos, se verían así:

código minificado

Si bien esto puede parecer un montón de basura, de hecho, todo el significado sigue ahí: simplemente se ha "minimizado" para eliminar cualquier cosa innecesaria que esté hinchando su tamaño.

Hay muchos complementos que pueden ayudarlo a lograr este proceso, que se mencionarán a continuación.

Minificar Javascript WordPress

El proceso para minificar Javascript WordPress es bastante sencillo. Simplemente necesita instalar uno de los complementos a continuación. También es posible que desee tener en cuenta que los archivos principales de WordPress Javascript ya están minificados de forma predeterminada.

De hecho, si echa un vistazo al código fuente de su sitio web de WordPress, verá la extensión .min.js, que muestra que los archivos reales ya están minificados.

core minify archivos de wordpress javascript

Este no es necesariamente el caso de los complementos y temas de terceros.

También es posible que desee dar el paso adicional de eliminar cualquier complemento que sea adicional y generar scripts que quizás no necesite.

Si está absolutamente obsesionado con el rendimiento, también puede optar por crear versiones de los archivos Javascript que SÓLO incluyan el script que utiliza su sitio web. Por defecto, la mayoría de los archivos de script tienen código adicional que se incluye "por si acaso" es necesario.

Es posible que desee aprender sobre cómo hacer esto aquí.

Minificar CSS WordPress

Una vez más, el proceso de Minify CSS WordPress es sencillo. Simplemente puede instalar un complemento y esto realizará la minificación de sus archivos CSS automáticamente. Si bien la mayoría de los archivos principales de WordPress tienen una versión reducida de los archivos CSS, esto no se aplica necesariamente a todos los complementos y temas.

Una vez más, también recomendamos realizar un ejercicio de cobertura de código CSS para eliminar cualquier código CSS superfluo que sea simplemente un peso muerto.

Mencionaremos una serie de complementos que minimizan CSS WordPress en la siguiente sección a continuación. 

Los 5 mejores complementos de WordPress Minify

Discutiremos tanto los productos genéricos que se utilizan en general para hacer que su sitio web sea más rápido mediante la minificación, como los complementos específicos cuya única característica es el proceso de minificación.

1. WP Rocket

Este es nuestro complemento favorito con diferencia.

La razón es simple, este es, con mucho, el mejor producto que puede realizar varias tareas de optimización de velocidad, de una manera realmente simple, pero con un excelente resultado al hacer que su sitio web sea más rápido, incluida la realización de una minificación de archivos CSS y JavaScript de WordPress.

Real y verdaderamente, es solo una de las cosas que hace este complemento, pero una vez que lo instale, encontrará que no necesita hacer nada más.

Como puede ver a continuación, esta minificación es una de las opciones básicas de optimización. Con eso, verá que hay concatenación, este es un proceso secundario de optimización, que crea un archivo de todos los archivos CSS y JS (porque esto también hace que sea más rápido descargar los archivos)

minify plugin de wordpress css de javascript

El complemento no es gratuito, pero el precio es muy económico de solo $ 49. Dado el tiempo que le ahorra y el resultado de hacer que su sitio web se cargue más rápido, literalmente en minutos, le recomendamos que opte por esto.

Testimonio de WP Rocket

Instalamos este complemento en todos los sitios web de WordPress que configuramos, simplemente porque nos ahorra mucho tiempo de optimización.

Haga clic aquí para obtener el precio más bajo en WP Rocket

2. JCH Optimizar

 

Aquí hay un pequeño truco para ayudarte mucho: utilizar JCH Optimize - esta es una herramienta que funciona en múltiples plataformas como WordPress, Joomla, Drupal y Magento.

Lo mejor de JCH Optimize es que implementa una gran cantidad de Google Page Speed y otras recomendaciones para que su sitio web se cargue lo más rápido posible.

Es genial porque necesita una configuración e intervención casi nulas por parte del usuario.

Si está buscando un servicio de alojamiento rápido, eche un vistazo a nuestro alojamiento, los hemos revisado completamente aquí: https://www.collectiveray.com/inmotion-hosting-review

JCH optimizar

Y no tiene que perder el tiempo con ningún código, todo esto lo hace el complemento: conserva toda su codificación original, por lo que no romperá nada al perder el tiempo. Además, por lo general, realiza aquellas optimizaciones que suelen ser las más difíciles de realizar. Por mencionar algunos, estos son los que se hacen bien

  • Combina archivos CSS de todas sus plantillas, módulos y complementos en un solo archivo, reduciendo así la cantidad de solicitudes enviadas a su sitio web
  • Combina archivos Javascript, que suelen ser muy difíciles de combinar sin romper el sitio.
  • Comprime el CSS y Javascript para que se hagan más pequeños y se reduzca el tiempo de transferencia
  • Minifica Javascript y CSS, para hacerlo más compacto y reducir su tamaño aún más (reduce cualquier espacio en blanco adicional, comentarios, etc.)
  • Agrega una etiqueta DEFER, de modo que su página se cargue primero y ejecute el Javascript después de que la página se haya cargado, lo que hace que el sitio se cargue más rápido. Dado que esta implementación específica es fundamental para un sitio web rápido, lo hemos cubierto ampliamente aquí: https://www.collectiveray.com/defer-parsing-of-javascript-wordpress-async
  • Crea Sprites de IMAGEN: esto también reduce la cantidad de solicitudes enviadas a su sitio web en una cantidad muy grande y es una de las optimizaciones más difíciles de lograr manualmente.

También le permite ajustar algunas opciones avanzadas, como excluir ciertos archivos, para asegurarse de que si alguna extensión no funciona después de ejecutarla a través de JCH Optimize, esto funcionará de todos modos.

La Versión Pro, que está disponible a un mísero $ 29, le dará acceso a varias otras opciones de optimización, como incluir CSS y JavaScript en línea y cargar el Javascript de forma asincrónica para no bloquear la carga del sitio.

Créame, instale el complemento, habilítelo y compruebe los resultados del antes y el después. Si no obtiene una mejora considerable, vuelva aquí y se queje, pero estoy bastante seguro de que no volverá :)

Haga clic aquí para descargar JCH Optimize

3. W3 Total Cache

Este es otro complemento que verá que es un software genérico que hace un montón de cosas relacionadas con hacer que WordPress sea rápido, incluida la minimización de archivos CSS, JS y HTML.

Si bien encontrará que esto se menciona muy a menudo cuando se trata de complementos de este tipo, debe tenerse en cuenta que este producto no es una buena idea para las personas que no son técnicas.

Configuración de caché de página en W3 Total Cache

Se sabe que crea problemas importantes, con algunos errores que permanecen incluso después de desinstalar y eliminar el software del sitio web.

Nosotros mismos en CollectiveRay He intentado usar este complemento varias veces, pero en este punto y en el estado actual, ya no recomendamos que se use con fines de minificación o para hacer sitios web más rápidos, unless sabes exactamente lo que estás haciendo.

4. WP Super Minify

Este complemento usa el Minimizar el marco de PHP y su uso combina, minimiza y almacena en caché archivos JavaScript y CSS en línea a pedido para acelerar la carga de la página.

Activando este plugin, la fuente de su HTML, JavaScript en línea y CSS ahora se eliminan de las cosas adicionales, lo que hace que su tamaño sea más pequeño.

Lo que es diferente de otros complementos mencionados aquí es que este complemento SOLO realiza el proceso de minificación, y no otras optimizaciones, lo cual es una excelente opción para aquellos que solo desean realizar esta función y nada más por cualquier motivo.

5. Reducción de velocidad rápida 

Si bien hay muchos otros complementos de WordPress minify que podemos recomendar, este será el último que mencionamos aquí. 

El complemento Fast Velocity combina todos los archivos CSS y JavaScript para que el servidor web tenga que lidiar con menos solicitudes. Al mismo tiempo, también minimiza los archivos y crea copias en caché para tiempos de carga más rápidos.

Este complemento habilita automáticamente las opciones para minimizar su HTML, JavaScript y CSS, pero usted puede deshabilite uno o más de ellos manualmente accediendo al Configuración → Minificar velocidad rápida lengüeta.

Puede optar por excluir archivos específicos para que no se minifiquen si uno de sus complementos se rompe después de haberlo habilitado.

 

Minificar la velocidad rápida

Resumen 

Si bien el proceso de minificación no es una función innovadora, debe implementarse como una de varias tareas para hacer que su WordPress sea más rápido y le recomendamos que implemente uno de los productos mencionados anteriormente.

Descargue la lista de 101 trucos de WordPress que todo bloguero debe conocer

101 trucos de WordPress

Haga clic aquí para descargar ahora

 

Sobre el autor
David Attard
Autor: David AttardPagina Web: https://www.linkedin.com/in/dattard/
David ha estado trabajando en o alrededor de la industria digital / en línea durante los últimos 18 años. Tiene una vasta experiencia en las industrias de software y diseño web utilizando WordPress, Joomla y los nichos que los rodean. Como consultor digital, su enfoque es ayudar a las empresas a obtener una ventaja competitiva utilizando una combinación de su sitio web y plataformas digitales disponibles en la actualidad.

Una cosa más... ¿Sabías que las personas que comparten cosas útiles como esta publicación también se ven IMPRESIONANTES? ;-)
Por favor deja un eficiente Comente con sus pensamientos, luego comparta esto en su (s) grupo (s) de Facebook que lo encontrarán útil y cosechemos los beneficios juntos. ¡Gracias por compartir y ser amable!

Divulgación: Esta página puede contener enlaces a sitios externos para productos que amamos y recomendamos de todo corazón. Si compra productos que le sugerimos, es posible que ganemos una tarifa de referencia. Tales tarifas no influyen en nuestras recomendaciones y no aceptamos pagos por reseñas positivas.

Autor (es) destacado en:  Logotipo de la revista Inc   Logotipo de Sitepoint   Logotipo de CSS Tricks    logotipo de webdesignerdepot   Logotipo de WPMU DEV   y muchos más ...