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".
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.
Haga clic en el botón "Enviar" para obtener el código minimizado como resultado.
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.
Haga clic en el botón "Descargar" para obtener el archivo minimizado en su computadora.
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.
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.cssSin 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=1626631618Para 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.
- 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".
- 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.
- 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".
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".
- 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.
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.
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:
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