Cómo Minificar Archivos CSS/JavaScript en WordPress

Cómo Minificar Archivos CSS/JavaScript en WordPress (3 Formas)

¿Quiere resumir los archivos en su sitio de WordPress?

Minimizar sus archivos CSS y JavaScript de WordPress puede hacer que se carguen más rápido y acelerar su sitio de WordPress.

En esta práctico, le mostraremos cómo minimizar fácilmente los archivos CSS/JavaScript en WordPress para mejorar el rendimiento y la velocidad.

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

El término «resumir» se utiliza para describir un método que reduce el tamaño del archivo de su sitio web. Lo hace eliminando espacios, líneas y caracteres innecesarios del código fuente.

Aquí hay un ejemplo de código CSS común:

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

Luego de resumir el código, se verá así:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}
h1{font-size:32px;margin-bottom:10px}

Por lo militar, se recomienda resumir solo los archivos que se envían a los navegadores de los usuarios. Esto incluye archivos HTML, CSS y JavaScript.

Todavía puede resumir los archivos PHP, pero reducirlos no mejorará la velocidad de carga de la página para sus usuarios. Esto se debe a que PHP es un verbo de programación del costado del servidor, lo que significa que se ejecuta en los servidores antiguamente de despachar poco al navegador web del visitante.

La preeminencia de minimizar archivos es la velocidad y el rendimiento mejorados de WordPress, ya que los archivos compactos se pueden cargar más rápido.

Sin requisa, algunos expertos creen que el aumento de rendimiento para la mayoría de los sitios web es muy pequeño y no vale la pena. La minificación solo elimina unos pocos kilobytes de datos en la mayoría de los sitios de WordPress. Puede resumir el tiempo de carga de la página optimizando las imágenes para la web.

Si está tratando de obtener una puntuación de 100/100 en la aparejo Google Pagespeed o GTMetrix, minimizar CSS y JavaScript mejorará en gran medida su puntuación.

Dicho esto, echemos un vistazo a cómo puede minimizar fácilmente CSS/JavaScript en su sitio de WordPress.

Discutiremos 3 opciones diferentes entre las que puede designar:

¿Completo? Comencemos con nuestro mejor método recomendado.

Método 1. Minificar CSS/JavaScript en WordPress con WP Rocket

Este método es más claro y recomendado para todos los usuarios. Funciona independientemente del alojamiento de WordPress que utilice.

Primero debe instalar y activar el complemento WP Rocket. Para obtener más información, consulte nuestra práctico paso a paso para instalar un complemento de WordPress.

WP Rocket es el mejor complemento de almacenamiento en elegancia de WordPress del mercado. Le permite anexar fácilmente el almacenamiento en elegancia a WordPress y mejorar en gran medida la velocidad del sitio web y los tiempos de carga de la página.

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

Luego de la activación tienes que ir a la Ajustes » WP Rocket y vaya a la pestaña ‘Optimización de archivos’.

Minificar archivos CSS en WP Rocket

Desde aquí, debe marcar la opción Minificar archivos CSS.

WP Rocket luego le mostrará una advertencia de que esto podría romper cosas en su sitio. Continúe y haga clic en el clavija ‘Activar Minify CSS’. Siempre puedes desactivar esta opción si causa problemas con tu sitio web.

Activar minificar CSS

Luego, debe desplazarse con destino a debajo hasta la sección Archivos JavaScript a continuación.

Aquí, solo marque la casilla adjunto a la opción ‘Resumir archivos JavaScript’.

WP Rocket minimiza los archivos JavaScript

Nuevamente, verá una advertencia de que esto puede interrumpir las cosas en su sitio. Continúe y haga clic en el clavija ‘Activar Minify JavaScript’.

Luego de eso, no olvide hacer clic en el clavija Guarecer cambios para cuidar su configuración.

WP Rocket ahora comenzará a minimizar sus archivos CSS y JavaScript. Puede borrar su elegancia en la configuración del complemento para cerciorarse de que utilizará el CSS y JavaScript minimizados para el próximo visitante del sitio web.

Método 2. Minificar CSS/JavaScript en WordPress con SiteGround

Si usa SiteGround como su proveedor de alojamiento de WordPress, puede minimizar los archivos CSS con SiteGround Optimizer.

SiteGround Optimizer es un complemento de optimización del rendimiento que funciona en su propia plataforma. Funciona admisiblemente con su PHP ultrarrápido para mejorar los tiempos de carga de su sitio.

Simplemente instale y active el Optimizador de SiteGround complemento en su sitio de WordPress. Para obtener más información, consulte nuestra práctico paso a paso para instalar un complemento de WordPress.

Luego de eso, debe hacer clic en el menú SG Optimizer en la mostrador anexo de oficina de WordPress.

Optimizador SG

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

Desde aquí, debe hacer clic en el clavija ‘Ir a la interfaz’ en ‘Otras optimizaciones’.

Optimización de la interfaz de SiteGround

En la posterior pantalla, debe habilitar el interruptor adjunto a la opción ‘Resumir archivos CSS’.

Minimizar CSS en SiteGround

A continuación, debe cambiar a la pestaña JavaScript y habilitar la opción adjunto a la opción ‘Resumir archivos JavaScript’.

¡Eso es todo! Ahora puede borrar su elegancia de WordPress y pasarse su sitio web para cargar versiones reducidas de archivos CSS y JS.

Método 3. Minificar CSS/JavaScript con Autoptimize

Este método se recomienda para usuarios que no están en SiteGround y que no usan WP Rocket.

Primero necesitas el . instalar y activar Optimizar automáticamente enlazar. Para obtener más información, consulte nuestra práctico paso a paso para instalar un complemento de WordPress.

Luego de la activación tienes que ir a la Ajustes » Optimizar automáticamente página para configurar los ajustes del complemento.

Desde aquí, primero debe marcar la opción ‘Optimizar código JavaScript’ en las opciones de JavaScript.

Optimizar las opciones de JavaScript automáticamente

Luego de eso, debe desplazarse con destino a debajo hasta las opciones de CSS y marcar la casilla adjunto a la opción ‘Optimizar código CSS’.

Optimizar el código CSS automáticamente

No olvide hacer clic en el clavija Guarecer cambios para cuidar su configuración.

Luego puede hacer clic en el clavija Borrar elegancia para comenzar a usar sus archivos minificados. El complemento incluso se puede usar para corregir el asedio de JavaScript y CSS en WordPress.

Esperamos que este artículo le haya ayudado a minimizar CSS y JavaScript en su sitio de WordPress. Todavía puede consultar nuestro tutorial sobre cómo optimizar la ánimo web esencia en WordPress y seguir nuestra práctico definitiva de rendimiento de WordPress.

Su Calificación Nos Ayuda a Mejorar