Cómo minimizar CSS en WordPress a una velocidad 2x de su sitio web

Cuando las personas visitan su sitio web, se espera que cada página web cobre rápidamente. Si lleva mucho tiempo la carga, las personas abandonarán su sitio y verán lo que sus competidores tienen para ofrecer puede parecer tan pequeño, pero es esencial mantener a los visitantes de su sitio. Esto los convierte de los visitantes en clientes potenciales, luego de clientes potenciales para pagar a los clientes.

También desea que las personas encuentren su sitio en los motores de búsqueda, ¿verdad? Google tiene muchos criterios diferentes sobre cómo determina dónde aparece su sitio web en su clasificación.
La velocidad del sitio web es uno de estos criterios. Hay muchas cosas que puede hacer para aumentar la velocidad de cargar el sitio web. Esto incluye optimizar archivos, incluidas imágenes, CSS y JavaScript para que sean lo más pequeños posible. Puede optimizar CSS reduciéndolo. Si es más técnico, le recomendamos que lo haga manualmente. Si se considera no técnico, hay complementos de WordPress que minimizan CSS para usted, algunos de los mejores complementos de WordPress minificados se enumeran a continuación.
Nuestro equipo de WP Buffs ayuda a los propietarios de sitios web, agentes asociados y socios independientes a monitorear sus sitios de WordPress 24/7. Ya sea que necesite que administremos un sitio web o admitirá 1000 sitios de clientes, respaldaremos.
Qué y por qué con minificar CSS su hoja de estilo CSS es un archivo de texto. Como con todos los demás archivos, tiene un cierto tamaño de archivo. Podría ser tan pequeño como cinco kilobytes y tan grandes como más megabytes.
Minimizar CSS ayuda a aumentar el archivo lo más pequeño posible. Si alguna vez ha visto un archivo CSS típico, verá que hay mucho espacio en blanco y comentarios. Esto es bueno para los desarrolladores, porque te ayuda a mantener todo organizado y legible. Le sirve bien al desarrollar código, porque le ayuda a trabajar de manera más eficiente y eficiente. Sin embargo, el espacio en blanco y los comentarios no son necesarios para trabajar realmente en el sitio. Todo lo que necesitas son las órdenes de CSS en sí. Por ejemplo, es posible que tenga un contundir contribuido del archivo CSS que se ve así:/*——————— — >>> TABLA DE CONTENIDO : —————————- # Navegación # Diseño ## Enlaces ## Menús ———– —————*/ Sin embargo, este contenido no es necesario para que el sitio web funcione correctamente. Simplemente le ayuda a mantener las cosas organizadas al desarrollar el código. Cualquiera de / * y * /, que comienza y cesa los comentarios, no es necesario en el sitio en vivo. Su presencia simplemente se agrega al tamaño del archivo. Ahora tomemos el siguiente bloque CSS, que no es un comentario y es necesario que el sitio funcione correctamente:
Html {Font-Family: sans-serif; -Webkit-text-size-ajust: 100%; -Ms-text-size-ajust: 100%; } Todos los espacios, hendiduras e interrupciones de línea no son necesarios para que el lugar real funcione. Simplemente hago que el código sea más legible para los desarrolladores. Ahora, veamos cómo se ve CSS Minified: HTML {FONT-FAMILY: SANS-SERIF; -WEBKIT-TEXT-SIZE-ADJUST: 100%;-MS-TIXT-SIZE-ADJUST: 100%} todo lo que no es necesario porque Se elimina el sitio para funcionar, y el tamaño de su archivo se volverá mucho más pequeño. Tamaño de archivo más pequeño = tiempo de carga más rápido. Métodos para minimizar CSS para implementos y usuarios ️ Si no es un desarrollador profesional, aún puede minimizar CSS de manera simple y fácil de usar. Ya sea que instale WordPress y configure complementos para otros, o sea un usuario que haya creado su sitio web de bricolaje, puede aprovechar las ventajas que Cs. Si alguna vez realiza cambios directamente en el archivo CSS, asegúrese de que siempre haya disponible siempre una copia no minimizada. Intentar editar un archivo CSS minimizado es un dolor de cabeza increíble e inútil. Por lo tanto, si reduce el CSS por primera vez, asegúrese de guardar una copia inesperada. Herramientas en línea Puede usar herramientas en línea para minimizar CSS. El instrumento CSS Minifier de Dan le permite copiar e insertar CSS en un cuadro de texto y presionar un botón para encoger.
Jakub Pawlowicz tiene una herramienta que le permite cargar el archivo CSS en el minificador.

Los complementos de WordPress WordPress Plugins también pueden ayudarlo a reducir el CSS. WP Super Minify es el complemento más actualizado y compatible con la última versión de WordPress que comienza con esta escritura. Encontré algunos otros complementos, pero no todos se actualizaron en al menos un año y no muestra compatibilidad con la última versión de WordPress. Por lo tanto, no puedo recomendarlos. Formas de reducir CSS para desarrolladores Si usted es un desarrollador web profesional, entonces hay dos formas principales de reducir fácilmente su CSS. La belleza de los corredores de embarazo lo ayudará a automatizar muchas de las tareas que se realizarán, para que pueda hacer su trabajo de manera más eficiente. Grunt y Gulp son los corredores de carga más famosos. Grunt tiene un paquete que minimiza el CSS y Gulp también. Utilizo Gulp en su propio flujo de trabajo, y Gulp Clean CSS funciona bien para mí. Si usa un preprocesador CSS como SASS o menos, entonces su corredor de carga probablemente tendrá un módulo separado para la compilación CSS. Puede usar el módulo de descuento en conjunto con él. Por ejemplo, este es el código Barebones que uso en el GulpFile principal. Usando un preprocesador CSS si usa SASS o menos y no usa un corredor de tareas, entonces su compilador debería poder minimizar CSS. Antes de descubrir Gulp, utilicé Compass como compilador SASS. En su archivo Compass config.rb, simplemente puede configurar la configuración de salida como tabletas. Sus archivos SASS permanecerán sin comprimir, y se minimizará CSS compilado.

Si no le gusta la línea de comando y prefiere usar herramientas de desarrollo basadas en GUI, como Codekit, puede establecer la salida en “tableta” o “compacta” o cualquiera que sea la configuración. Probar las mejoras de velocidad de la página Si desea saber cuánto descuento CSS acelera su sitio, puede usar una herramienta de prueba de velocidad. Debe probar más herramientas de prueba para ver qué tipo de comentarios le dan. Tres herramientas con las que puede comenzar son: Google PageSpeed ​​Insights

Ylow
Pingdom
Estos sitios proporcionarán recomendaciones más allá de la reducción de CSS sobre cómo puede mejorar el tiempo de carga de la página.
¡Ahora ve y minifica! La reducción de CSS puede brindarle excelentes ventajas, especialmente cuando se trata de mantener a los visitantes en su sitio web. La tarea de minimizar CSS no debe ser difícil con todas las excelentes herramientas disponibles. Después de poner esto en una práctica constante, puede agregar otras técnicas para cargar su sitio web más rápido. ¡Convierta su sitio en una demostración de velocidad, una técnica de optimización a la vez! ¿Quieres darnos comentarios o unirte a la conversación? Agregue sus comentarios en Twitter. Guardar guardar