¿Cómo soluciono el problema de minimizar CSS en WordPress? - Mundo2030 - Aprender Marketing
WordPress

¿Cómo soluciono el problema de minimizar CSS en WordPress? – Mundo2030

WordPress utiliza software básico, temas y complementos para dar forma a un sitio web. Las hojas de estilo en cascada o CSS son la columna vertebral de su diseño de diseño, y cada uno de estos elementos agregará su propio CSS. Puede ver los archivos CSS utilizados en su sitio mirando la fuente de la página en el navegador. Es necesario optimizar estos archivos CSS para mejorar la velocidad de carga de las páginas del sitio de WordPress.

¿Qué es Minificar CSS?

La minimización de CSS es el proceso de eliminar espacios, comentarios y sangrías innecesarios de un archivo CSS.

webnots.com

Esto ayuda a comprimir y reducir el tamaño del archivo, reduciendo así el tiempo necesario para descargar estos archivos del servidor. Los desarrolladores usan comentarios en archivos CSS para comprender y rastrear. Sin embargo, estos comentarios no son necesarios para la funcionalidad y, por lo tanto, eliminarlos no afectará el diseño funcional de su sitio web.

¿Por qué minimizar CSS?

La siguiente pregunta que me viene a la mente es por qué alguien debería eliminar espacios y comentarios de un archivo de texto para reducir solo unos pocos KB de tamaño. El problema es que si no reduce el tamaño del archivo, GoogleSpeed ​​Insights y otras herramientas de medición de velocidad mostrarán una recomendación para minimizar los archivos CSS.

  • Puede encontrar este problema como «Minimizar CSS» en la sección «Funciones» de la herramienta Google PageSpeed ​​​​Insights.
  • La herramienta también le mostrará la cantidad de ahorro que puede lograr al minimizar el CSS.
  • El problema de minimización de CSS afectará a la primera pintura de contenido (FCP) y a la pintura de contenido más grande (LCP). Porque LCP es parte de Indicadores básicos para la web, su trabajo con la página se verá afectado si no minimiza los archivos CSS.
  • Mantener un archivo CSS minimizado resolverá este problema y es posible que la validación haya pasado y se muestre en verde en la sección «Auditorías exitosas».
Minimizar CSS en Google PSI

Ejemplo de minimización de contenido y archivo

A continuación se muestra un ejemplo de un pequeño fragmento de código CSS con espacios y comentarios.

/* Content */

div.content{
    padding-left: 390px;
    background: #fff;
    position: relative;
}
div.panes{
    max-width: 1400px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 40px;
}
.section{ padding-top: 40px; }

/* End Content */

Vaya a nuestra herramienta de minimización de CSS y pegue el código de arriba.

Establecer CSS para minimizar
Establecer CSS para minimizar

Haga clic en el botón «Enviar» para obtener el código minimizado como resultado.

Obtener código CSS minimizado
Obtener código CSS minimizado

El código minimizado se verá así:

div.content{padding-left:390px;background:#fff;position:relative;}div.panes{max-width:1400px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 40px;}.section{padding-top:40px;}

Como puede ver, todos los comentarios y espacios en blanco se han eliminado en la salida minimizada. La mayoría de los temas de WordPress usan el archivo style.css, y puede usar la misma herramienta para cargar el archivo style.css completo y obtener el archivo minimizado como resultado.

Minimiza un archivo CSS con una herramienta externa
Minimiza un archivo CSS con una herramienta externa

Haga clic en el botón «Descargar» para obtener el archivo minimizado en su computadora.

Descargar un archivo CSS minimizado
Descargar un archivo CSS minimizado

El archivo de salida final tendrá una línea, eliminando todos los espacios en blanco y comentarios con tamaño reducido.

Minimiza CSS y JS en WordPress

Ahora que comprende el propósito de la minimización y cómo funciona. Sin embargo, el uso de herramientas de minimización de archivos en línea no funcionará en WordPress por las siguientes razones:

  • Habrá muchos archivos utilizados por su tema, complementos y WordPress básico. Minimizar y reemplazar manualmente los archivos originales es una tarea que requiere mucho tiempo.
  • Los archivos se actualizarán con su tema, complemento y actualización básica de WordPress. Por lo tanto, el archivo cargado manualmente se reemplazará con una versión normal con cada actualización.

Para evitar esta molestia manual, puede usar un complemento de minimización para hacer el trabajo de forma automática y dinámica sin afectar el proceso de actualización. Estos complementos comprimirán sus archivos y usarán la extensión .min, lo que indica que se está reparando el archivo minimizado en lugar del archivo original.

Versión del archivo CSS Nombre de ejemplo
versión normal estilo.css
Versión normal con cadena de consulta estilo.css?ver = 123456
versión minimizada estilo.min.css

A veces, su tema y complementos también pueden ofrecer una versión minimizada de los archivos, y no necesita minimizarlos nuevamente.

¿Cómo minimizar archivos CSS y JS en WordPress?

Hay muchos complementos disponibles para minimizar CSS y JavaScript en WordPress. Sin embargo, el uso depende de la situación y le explicaremos varios complementos que funcionan para usted. En Google PageSpeed ​​​​Insights, verá un enlace a «Complementos de WordPress» y haga clic en él. Esto lo llevará a la página del repositorio de complementos de WordPress aplicando el filtro de búsqueda minify + CSS.

Minimizar los complementos de WordPress CSS
Minimizar CSS Complementos de WordPress

Eliminar cadenas de consulta

Antes de intentar minimizar sus archivos CSS, le recomendamos que elimine los parámetros de cadena de consulta adjuntos a las URL del archivo. Los trabajos de minimización para archivos CSS y JS estáticos se ven a continuación:

https://www.your-site.com/wp-content/themes/theme-name/style.css

Sin embargo, los archivos de temas y complementos tendrán un parámetro de versión, como una cadena de consulta adjunta a la URL. Por lo general, se verá a continuación y estas URL se consideran dinámicas por naturaleza.

https://www.your-site.com/wp-content/themes/theme-name/style.css?ver=1626631618

Para minimizar mejor, le recomendamos que elimine las cadenas de consulta de las URL del archivo. Esto también ayudará a CDN y otros sistemas (servidores y navegadores) a almacenar en caché sus archivos de manera eficiente. Con esto en mente, explicaremos los complementos que ofrecen funciones de minimización y eliminación de cadenas de consulta.

1. Colibríes – Opción gratuita

Los complementos como W3 Total Cache tienen cientos de opciones y son difíciles de configurar para los nuevos usuarios de WordPress. Por otro lado, complementos simples como Autoptimize combinan y minimizan archivos sin separarlos. Es posible que esto no funcione en todos los entornos de alojamiento, especialmente con servidores HTTP / 2 que no necesitan combinar archivos. Además, la combinación puede alterar fácilmente el diseño y es mejor tener opciones de minimización y combinación por separado para controlar el comportamiento.

Hummingbird es uno de los mejores complementos gratuitos para minimizar CSS en WordPress. También ofrece una solución completa de almacenamiento en caché para que pueda usarla como un complemento de almacenamiento en caché para su sitio.

  • Vaya a la sección «Complementos> Agregar nuevo» en su panel de administración de WordPress.
  • Busque «minify» para encontrar el complemento «Hummingbird – Optimize Speed, Enable Cache, Minify CSS & Defer Critical JS». Haga clic en el botón «Instalar» y luego en «Activar» para comenzar a usar el complemento en su sitio.
Instale el complemento Colibrí
Instale el complemento Colibrí
  • El complemento le pedirá que escanee y recomiende las opciones, pero en este artículo nos centraremos en la configuración para eliminar la cadena de consulta y minimizar el CSS.
  • Ve a la sección «Colibrí > Herramientas avanzadas». Habilite la opción «Eliminar cadenas de consulta de mis activos» en la sección «URL de cadenas de consulta» en la sección «General». Desplácese hacia abajo y haga clic en el botón «Guardar cambios».
Eliminar cadenas de consulta en el complemento Hummingbird
Eliminar cadenas de consulta en el complemento Hummingbird
  • Vaya al menú «Colibríes> Optimización de activos» y active la opción «Automático» en la sección «Activos».
  • Desplácese hacia abajo y active los archivos CSS en la sección Configuraciones. Recuerda que justo encima de esta sección tienes una opción llamada «Rápido» en la sección «Activos» para combinar archivos CSS. Puede deshabilitar esto si encuentra que el diseño está roto.
Minimizar archivos CSS en Hummingbird
Minimizar archivos CSS en Hummingbird
  • Haga clic en el botón «Publicar cambios» para aplicar los cambios a su sitio.

2. WP Rocket – Complemento premium

WP Rocket es el único complemento premium que ha cambiado la forma en que las personas optimizan los sitios de WordPress. Tiene una sección simple del tablero para navegar y cambiar las opciones necesarias sin problemas.

  • Compre WP Rocket desde el sitio del desarrollador e instálelo en su sitio.
  • Debe activar la clave de licencia para recibir actualizaciones y soporte para el complemento.
  • Vaya a la pestaña «Optimización de archivos» y habilite la opción «Minimizar archivos CSS» en la sección «Archivos CSS».
Minimizar archivos CSS en WP Rocket
Minimizar archivos CSS en WP Rocket

Como se mencionó anteriormente, WP Rocket ofrece minimización y combinación como opciones separadas para archivos CSS. También verás una recomendación de no habilitar la opción combo para servidores HTTP/2. De esta manera, puede alternar las opciones que necesita para obtener un buen resultado de velocidad de página en Google Speeds Insights y otras herramientas.

3. SiteGround Optimizer: un complemento proporcionado por hosting

Hoy en día, es una tendencia para muchos proveedores de alojamiento ofrecer sus propios complementos de optimización. Esta es la mejor opción porque el complemento funciona mejor en el entorno de alojamiento doméstico. Explicamos aquí con el complemento SiteGround Optimizer y debe consultar con su empresa de alojamiento si ofrecen algún complemento para minimizar.

  • El complemento SiteGround Optimizer viene preinstalado con su sitio cuando instala WordPress en el alojamiento de SiteGround.
  • Vaya al menú «SiteGround> Frontend» y habilite «Minimizar archivos CSS» en la sección «CSS».
Minimizar CSS en SiteGround Optimizer
Minimizar CSS en SiteGround Optimizer
  • Su configuración se guardará automáticamente y verá un mensaje de éxito que indica «CSS Mining Enabled». Asegúrese de hacer clic en la opción «Borrar caché» que aparece en la barra de administración superior para borrar sus archivos antiguos en caché.
  • Si hay Si hay algún problema con la interfaz, use la opción «Excluir de CSS Minivation» para excluir archivos CSS específicos y solucionar el problema.

Como puede ver, el complemento SiteGround Optimizer también ofrece minimización y combinación como dos opciones diferentes para una gestión de resultados efectiva.

4. Minimiza con CDN como Cloudflare

Casi todos los propietarios de sitios de WordPress utilizan la red de entrega de contenido (CDN) para acelerar la entrega de archivos estáticos HTML, CSS y JS. Debido a que estos archivos son estáticos y no cambian todo el tiempo, es una buena idea usar la función de minimizar en la configuración de su CDN en lugar de usar un complemento adicional en su sitio. Aquí explicaremos la activación de la opción de minimizar en el CDN de Cloudflare. Es posible que deba consultar a su proveedor de CDN sobre cómo habilitar la opción de minimizar.

  • Inicie sesión en su cuenta de Cloudflare y seleccione el sitio en el que desea habilitar la opción de minimización de CSS.
  • Vaya a la configuración de «Optimización» en la sección «Velocidad».
  • Desplácese hacia abajo hasta el panel derecho y habilite CSS contra Minimización automática.
  • Su configuración se guarda automáticamente y la minimización de CSS está habilitada para su sitio de WordPress con Cloudflare.
Habilitar CSS Minify en Cloudflare
Habilitar CSS Minify en Cloudflare

Hay dos puntos importantes a tener en cuenta al usar la función de minimizar con su configuración de CDN:

  • Asegúrese de que esta función no se superponga si está utilizando un complemento de almacenamiento en caché o la opción de minimización del servidor. Por ejemplo, el complemento WP Rocket ofrece un complemento para configurar la configuración de Cloudflare para evitar interferencias. De la misma manera, puede configurar los ajustes de Cloudflare en el panel de alojamiento de SiteGround (llamado Site Tools).
  • Cada vez que actualice algo en su sitio, vaya a la configuración de su CDN y borre el caché. Esto evitará el mantenimiento de archivos CSS y JS antiguos y comenzará a utilizar las últimas actualizaciones.

¿Cómo sé cómo funciona la minimización?

La forma más fácil de verificar si sus archivos están minimizados o no es verificar la fuente de la página. Antes de habilitar las opciones de minimización, abra cualquiera de sus páginas de Chrome u otros navegadores, haga clic con el botón derecho en un área vacía y seleccione la opción «Ver código fuente de la página». Esto abrirá el contenido de origen de la página en una nueva sección donde puede buscar style.css en el tema. Por ejemplo, a continuación se muestra cómo se ve con un tema secundario de GeneratePress que muestra style.css con el número de versión.

Archivo CSS con tema normal
Archivo CSS con tema normal

Después de eliminar la cadena de consulta y aplicar minify, debería encontrar que todos los archivos estáticos están comprimidos y minimizados con una versión .min.css. En nuestro ejemplo, style.css en el tema secundario GeneratePress estará disponible como style.min.css sin ninguna cadena de consulta como la siguiente:

CSS minimizado en fuente
CSS minimizado en fuente

Otra forma de verificar es probar su sitio web en la herramienta Google PageSpeed ​​​​Insights. Debería ver el elemento «Minimizar CSS» en la sección «Auditorías realizadas» en verde. Esto indica que los archivos están comprimidos y mantenidos en un tamaño reducido.

Observaciones finales

Minimizar CSS en WordPress es una tarea sencilla con la ayuda de complementos que ayudan a reducir el tamaño del archivo. Puede usar una de las opciones anteriores para solucionar el problema de minimización de CSS en la herramienta Google Speeds Insights. Aunque el complemento gratuito es suficiente para esto, siempre recomendamos usar complementos de primera clase como WP Rocket para obtener el soporte adecuado si es necesario.

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Botón volver arriba