Cómo minimizar la información de CSS/JavaScript en WordPress (3 estrategias)

¿Quieres minimizar documentos en tu página web de WordPress?

Minimizar la información de CSS y JavaScript de WordPress puede hacer que se carguen más rápido y acelerar su sitio de WordPress.

En este manual, le mostraremos cómo minimizar archivos CSS/JavaScript en WordPress para mejorar el rendimiento y la velocidad.

¿Qué es la minificación y cuándo la necesitarás?

La expresión 'minificar' se utiliza para describir un sistema que reduce el tamaño de los archivos de su sitio web. Lo hace eliminando los espacios en blanco, las líneas y las personas no deseadas del código de recursos.

Aquí hay una instancia de código CSS estándar:

human body 
margin:20px
padding:20px
colour:#333333
history:#f7f7f7

h1 
font-dimension:32px
coloration#222222
margin-base:10px

Después de minimizar el código, se verá así:

entire bodymargin:20pxpadding:20pxcolor:#333history:#f7f7f7
h1font-dimension:32pxmargin-base:10px

En general, se sugiere minimizar solo los documentos que se envían a los navegadores de los usuarios. Esto incluye archivos HTML, CSS y JavaScript.

También puede minimizar los documentos PHP, pero minimizarlos no aumentará el ritmo de carga de la página para sus clientes. Dado que PHP es un lenguaje de programación del lado del servidor, eso significa que opera en los servidores antes de que se envíe algo al navegador web del visitante.

La ventaja de minimizar los archivos de datos es mejorar el ritmo de WordPress y el rendimiento general, ya que los datos compactos se cargan más rápido.

No obstante, algunos gurús piensan que el avance de la funcionalidad es bastante pequeño para la mayoría de los sitios web y no vale la pena la dificultad. La minificación solo elimina varios kilobytes de datos en la mayoría de los sitios web de WordPress. Puede minimizar mucho más el tiempo de carga del sitio optimizando las imágenes para Internet.

Si está intentando obtener una calificación de 100/100 en el software Google Pagespeed o GTMetrix, minimizar CSS y JavaScript aumentará considerablemente su puntaje.

Habiendo mencionado eso, echemos un vistazo a cómo minimizar sin esfuerzo CSS/JavaScript en su página web de WordPress.

Iremos a más de 3 opciones únicas entre las que puede elegir:

¿Todo listo? Comencemos con nuestro mejor proceso propuesto.

Proceso 1. Minificar CSS/JavaScript en WordPress usando WP Rocket

Esta técnica es más fácil y se propone para todos los consumidores. Funciona independientemente del alojamiento de WordPress que esté utilizando.

Primero, debe instalar y activar el complemento WP Rocket. Para obtener detalles adicionales, consulte nuestra guía paso a paso sobre cómo configurar un complemento de WordPress.

WP Rocket es el mejor complemento de almacenamiento en caché de WordPress del mercado. Le permite insertar fácilmente el almacenamiento en caché en WordPress y aumentar significativamente la velocidad del sitio web y los momentos de carga del sitio web.

Para obtener más información, consulte nuestro tutorial sobre cómo instalar y configurar WP Rocket en WordPress.

Tras la activación, desea consultar la página web Configuración » WP Rocket y cambiar a la pestaña 'Optimización de archivos'.

Desde aquí, deberá consultar la solución de documentos Minify CSS.

WP Rocket le mostrará una advertencia de que esto podría dividir puntos en su sitio web. Continúe y simplemente haga clic en el botón 'Activar Minify CSS'. Siempre puede desactivar esta selección si provoca algún problema con su sitio web.

A continuación, debe desplazarse hacia abajo hasta la sección Documentos de JavaScript que se encuentra a continuación.

Aquí, simplemente marque la casilla junto a la opción 'Minimizar archivos JavaScript'.

Nuevamente, verá una advertencia de que esto podría descifrar cosas en su sitio web. Continúe y simplemente haga clic en el botón 'Activar Minify JavaScript'.

Inmediatamente después de eso, nunca olvide hacer clic en el botón Conservar ajustes para mantener sus configuraciones.

WP Rocket ahora comenzará a minimizar su información de CSS y JavaScript. Puede borrar su caché en la configuración del complemento para asegurarse de que comience a emplear CSS y JavaScript minificados para el futuro visitante de la página web.

Técnica 2. Minificar CSS/JavaScript en WordPress usando SiteGround

Si está aplicando SiteGround como su proveedor de servicios de alojamiento web de WordPress, puede minimizar los archivos CSS que trabajan con SiteGround Optimizer.

SiteGround Optimizer es un complemento de optimización de rendimiento general que funciona en su sistema. Funciona bien con su PHP ultrarrápido para fortalecer los períodos de carga de su sitio.

Simplemente configure y active el complemento SiteGround Optimizer en su sitio web de WordPress. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

Después de eso, debe hacer clic en el menú SG Optimizer en la barra lateral de administración de WordPress.

Esto solo lo llevará a la configuración de SG Optimizer.

En este artículo, debe hacer clic en el botón 'Ir a la interfaz' menos que en 'Otras optimizaciones'.

En la siguiente pantalla, debe cambiar el interruptor que se encuentra junto a la solución 'Minimizar archivos CSS'.

Próximamente, debe cambiar a la pestaña JavaScript y activar el interruptor que se encuentra junto a la selección 'Minimizar archivos JavaScript'.

¡Eso es todo! Ahora puede vaciar su caché de WordPress y echar un vistazo a su sitio para cargar versiones minificadas de documentos CSS y JS.

Enfoque 3. Minimice CSS/JavaScript utilizando Autoptimize

Este método se propone para los consumidores que no están en SiteGround y no trabajan con WP Rocket.

Inicialmente, debe configurar y activar el complemento Autoptimize. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

En la activación, debe echar un vistazo a la página web Opciones » Optimizar automáticamente para configurar las opciones del complemento.

En este artículo, primero debe verificar la opción 'Optimizar código JavaScript' en Opciones de JavaScript.

Después de eso, debe desplazarse hacia abajo hasta las Opciones de CSS y examinar el cuadro junto a la opción 'Optimizar código CSS'.

Nunca olvide hacer clic en el botón Conservar ajustes para almacenar sus configuraciones.

Luego, simplemente puede hacer clic en el botón Caché vacante para comenzar a trabajar con sus archivos de datos minificados. El complemento también se puede utilizar para lidiar con el bloqueo de renderizado de JavaScript y CSS en WordPress.

Esperamos que esta publicación lo haya ayudado a minimizar CSS y JavaScript en su página web de WordPress. También puede ver nuestro tutorial sobre cómo optimizar los datos básicos de la red en WordPress y seguir nuestro mejor tutorial de rendimiento general de WordPress.

Si le gustó esta publicación, asegúrese de suscribirse a nuestro canal de YouTube para obtener tutoriales de películas de WordPress. También puedes encontrarnos en Twitter y Facebook.