Eliminar css no utilizado

Eliminar CSS no utilizadas

Eliminar CSS no utilizadas y diferir la carga de CSS

Eliminar CSS no utilizadas y diferir la carga de css que no se utiliza para el contenido de la mitad superior de la página (css no crítico) puede reducir los bytes innecesarios consumidos por la actividad de la red.

Buscar y encontrar código css innecesario puede hacer un sitio web más rápido y puede generar más ventas. Menos código CSS significa menos tiempo para descargar su página web y menos tiempo para que un navegador web la analice y muestre.

Es posible que haya agregado un cuadro de búsqueda de sitio en su sitio web y los estilos asociados se incluyeron en la hoja de estilo. Más tarde, si decide eliminar ese cuadro de búsqueda, es posible que los estilos sigan existiendo en su CSS, aunque no se estén utilizando en ninguna parte.

Opera y el navegador Firefox tienen un complemento popular llamado Dust Me que escanea su página web actual y enumera todas las reglas CSS no utilizadas que están definidas en la hoja de estilo pero que no se utilizan en la página. Sin embargo, los usuarios de Google Chrome no necesitan instalar ningún complemento, ya que las herramientas de desarrollo  integradas en el navegador de Google ofrecen esta opción.

Identificando CSS no utilizado

Si su sitio está construido con WordPress considere minimizar o cambiar la cantidad de plugins de WordPress que cargan CSS sin utilizar en su página. Para identificar plugins que agregan CSS extraño, intente ejecutar cobertura de código en Chrome DevTools. Puede identificar el tema/plugin responsable de la URL de la hoja de estilo. Busque plugins que tengan muchas hojas de estilo en la lista que tengan mucho rojo en la cobertura del código. Un complemento solo debe poner en cola una hoja de estilo si realmente se usa en la página.

Así es como puede encontrar fácilmente todos los selectores no utilizados en sus archivos CSS en Google Chrome:

  1. Abra cualquier página de su sitio web dentro de Google Chrome y luego inicie las Herramientas de desarrollo disponibles en Archivo -> Herramientas -> Herramientas para desarrolladores.
  2. Haga clic en la pestaña Auditorías dentro de Dev Tools y seleccione las opciones «Rendimiento de la página web» y «Recargar página y auditar al cargar». Ahora haga clic en el botón «Ejecutar» para comenzar el proceso de auditoría de CSS.
  3. En la página de resultados, expanda el grupo «Eliminar reglas CSS no utilizadas» y seleccione los archivos CSS que están vinculados desde su sitio. Puede ignorar los archivos CSS agregados por complementos y widgets sociales, ya que no tiene control sobre ellos.

Aquí obtendrá una lista ordenada de todos los estilos que están definidos en el archivo CSS  no  utilizadas en ninguna parte de la página actual.

Puede copiar y guardar los resultados en un archivo de texto y repetir los pasos en otras páginas de su sitio. Esto es esencial ya que no todos los selectores pueden usarse en todas las páginas. Puede encontrar el recuento de varios selectores en el conjunto de resultados combinado, tal vez utilizando Google Sheets, y los selectores con el recuento más alto probablemente se puedan eliminar de forma «segura».

Al ejecutar un informe de Lighthouse o Google PageSpeed, una categoría de auditoría común que encuentran muchos propietarios y desarrolladores de sitios web es «eliminar CSS no utilizadas«. Esta es una auditoría extremadamente común que falla (especialmente con los sitios web de WordPress), y abordarla puede ahorrarle varios segundos de tiempo de carga de la página.

Lighthouse recomienda que  elimine las reglas muertas de las hojas de estilo y difiera la carga de CSS que  no se usa para el contenido de la mitad superior de la página para reducir los bytes innecesarios consumidos por la actividad de la red. Mostrará esta sugerencia para todas las hojas de estilo que pueden ahorrar 2Kbs o más al eliminar CSS.

En esta publicación, vamos a desglosar qué causa exactamente que se muestre esta oportunidad de PageSpeed, por qué eliminar CSS no utilizado es una de las mejores cosas que puede hacer para las velocidades de carga del sitio web, e introducir un complemento para automatizar todo este proceso para los sitios web de WordPress.

Que causa que se muestre Eliminar CSS no utilizadas

Debido a que algunos CSS contienen información de estilo esencial para las páginas web, deben cargarse antes de que se muestre el contenido de la página al espectador.

La carga de CSS esencial  debe  bloquear el procesamiento, por lo que es realmente importante eliminar la mayor cantidad posible de CSS no utilizadas para tener las páginas de carga más rápidas. Esto es especialmente cierto en los sitios web de WordPress, donde los temas y plugins individuales pueden llamar clases de CSS excesivas.

Por ejemplo, muchos de los temas de páginas (Elementor o Divi) tienen hojas de estilo masivas que suman más de 200 kbytes, mientras que solo llaman alrededor del 10% de las clases contenidas en ellos para la página específica.

Además, muchos plugins contienen CSS que se llama cada vez que se carga una página de WordPress. Esto es especialmente perjudicial para la velocidad de la página, porque es posible que el 100% de la hoja de estilo de estilo no se llame en esa página individual. Por ejemplo, si tiene un plugin de formularios que es solo para la página «Contáctenos», pero la hoja de estilo se carga en todo el sitio a través de un elemento en el encabezado de su sitio, está gastando innumerables milisegundos cargando CSS innecesario. Cuando tienes 20 plugins, estos milisegundos se suman rápidamente a los segundos de tiempo que pasas cargando tu página.

Esos dos puntos son la razón por la que una de las sugerencias más comunes que encuentran los propietarios y desarrolladores de sitios web de WordPress cuando realizan pruebas de velocidad de página es «Eliminar CSS no utilizado».

Elimine esa hinchazón y tendrá un sitio que se cargará 1-2 segundos más rápido que antes.

Según UnusedCSS, en promedio, alrededor del 35% del código CSS es completamente innecesario.

UnusedCSS es una herramienta en línea para eliminar reglas CSS no utilizadas. Verificará sus páginas, encontrará CSS no utilizado y le permitirá descargar un archivo CSS limpio.

Usted puede eliminar CSS no utilizadas manualmente o automatizar el proceso con herramientas como UnusedCSS, sin embargo, en cualquier caso,  deberá revisar periódicamente su sitio web para ver si hay cambios, si agregó plugins o simplemente se generaron nuevas reglas css que ya no se utilizan.

Ahora, dado que UnusedCSS es una herramienta en línea, significa que no tiene que instalarla en su servidor o en su sitio web de WordPress. Todo lo que tiene que hacer es visitar el sitio web oficial e ingresar la URL de su sitio.

Una vez UnusedCSS escanea su sitio y le proporciona una lista de todas las hojas de estilo y archivos JavaScript presentes en el código fuente de su sitio. Luego, le proporciona datos sobre la cantidad de códigos no utilizados disponibles en estos archivos individualmente.

Cómo usar UnusedCSS

Usar UnusedCSS es simple, y en esta sección, le mostraré cómo puede mejorar aún más la velocidad de su sitio usando esta herramienta en línea en 3 simples pasos.

Paso 1: Regístrese para obtener una cuenta gratuita

Ahora, para registrarse en el sitio, debe hacer clic en el botón de registro verde que puede encontrar en la parte superior, en el lado derecho de la pantalla.

Ahora complete todos los detalles requeridos, como nombre, dirección de correo electrónico, contraseña, URL de su sitio web y luego haga clic en el botón Continuar.

Una vez que se haya registrado, debería recibir un mensaje que indique «cuenta creada» junto con un mensaje que indique «Actualmente estamos rastreando este sitio. Recibirás un correo electrónico cuando el nuevo CSS esté listo «.

UnusedCSS rastreará su sitio web  para eliminar las CSS no utilizadas. En una hora, recibirá un correo electrónico informándole que ha finalizado el rastreo. Entonces podrá ver el archivo CSS limpio.

Nota: Actualmente no tengo ninguna cuenta premium en UnusedCSS, y por el bien de este tutorial y revisión, he creado una cuenta gratuita. Sin embargo, incluso con la cuenta gratuita, tienes la posibilidad de escanear 100 páginas web y personalmente creo que es bastante generoso.

Paso 2: configuración

CSS no utilizado por defecto no requiere ninguna configuración del lado del cliente. Tan pronto como se registre para obtener una cuenta, sin importar si es un plan gratuito o de pago, esta herramienta en línea comenzará a escanear su sitio y hará todo lo posible para encontrar todos los posibles selectores CSS y funciones JavaScript no utilizados.

Sin embargo, si aún desea configurar los ajustes, puede hacerlo haciendo clic en el botón de configuración disponible en la página del panel.

Entonces, básicamente, tendrá que navegar en el siguiente orden: UnusedCSS> Dashboard> Settings.

El panel de configuración se divide principalmente en cuatro secciones diferentes.

La primera sección son los detalles del sitio que le muestran el nombre del sitio y su dirección web. Además, también tiene la opción de hacer que el bot UnusedCSS rastree solo la URL proporcionada.

La segunda sección le permite habilitar y controlar los análisis programados. Una vez habilitado, el formulario se expandirá dándole un mayor control sobre cómo, en qué día y a qué hora desea que el bot UnusedCSS rastree su sitio.

Además, también puede elegir una opción para una notificación por correo electrónico si esta herramienta en línea encuentra reglas CSS no utilizadas en sus hojas de estilo.

La tercera sección le permite configurar las páginas web cuantificadas de rastreo de bot, por ejemplo, la página de inicio de sesión o el panel de clientes. Puede especificar la página web de inicio de sesión junto con los datos del formulario de entrada que el bot utilizará para evaluar el panel. Además, también puede especificar la dirección de la página de cierre de sesión o cierre de sesión.

La cuarta sección le permite realizar configuraciones avanzadas como configurar el agente de usuario, definir la lista negra (las páginas web que UnusedCSS no debe rastrear y optimizar) y URL adicionales que no pueden ser descubiertas por esto haciendo clic en enlaces en su sitio.

Paso 3: Resultados del escaneo CSS no utilizados

Tan pronto como crea su cuenta proporcionando detalles precisos, UnusedCSS comienza a escanear y optimizar todos los JavaScript posibles y las hojas de estilo disponibles en su sitio. Puede ver los resultados del análisis haciendo clic en el enlace del menú «Panel de control».

Según UnusedCSS casi el 37% del total de selectores de CSS en mis hojas de estilo permanece sin usar, lo que representa el 46% del tamaño total del archivo.

Personalmente, estoy bastante impresionada. Yo no hice nada. Acabo de proporcionar esta herramienta con la URL de mi sitio, y eso es todo. Ahora me dice que puedo reducir el tamaño de la página de mi sitio en casi 30 KB y todo lo que tengo que hacer es descargar la hoja de estilo optimizada.

Por si fuera poco la herramienta en línea UnusedCSS le permite generar CSS crítico.

Revisión

 

  • Compatibilidad con plataformas CMS y blogs – 100%
  • Facilidad de uso – 100%
  • Funciones de optimización de velocidad: 90%
  • Precios – 90%
  • Soporte – 95%

Resumen

Herramienta en línea simple y fácil de usar para ayudarlo a hacer que su sitio web sea aún más rápido y optimizado. El registro es simple e incluso con una cuenta gratuita, puede optimizar 100 páginas web.

Esta herramienta seo UnusedCSS viene en tres versiones:

Gatuita, Basic y Premium.

 

Gratis
  • Limpia 1 sitio
  • De un solo uso
  • Sin optimizaciones programadas
  • Vista previa limitada de los cambios de CSS
  • Hasta 100 páginas
  • 3 páginas de destino
  • Ver reglas CSS no utilizadas

Básico

$25

Por mes

cuando se paga anualmente
  • Limpiar hasta 4 sitios
  • Escaneos ilimitados
  • Optimizaciones programadas semanales
  • Vista previa completa de los cambios de CSS
  • Hasta 5000 páginas
  • 8 páginas de destino por sitio 
  • Permite descargar archivos CSS limpios

Premium

$63

Por mes

cuando se paga anualmente
  • Limpiar hasta 40 sitios
  • Escaneos ilimitados
  • Optimizaciones programadas diarias
  • Vista previa completa de los cambios de CSS
  • Hasta 10000 páginas
  • 40 páginas de destino por sitio 
  • Permite descargar archivos CSS limpios

Características de UnusedCSS:

  • Encuentra y elimine automáticamente reglas CSS no utilizadas
  • Proporcione archivos CSS limpios para descargar
  • Inicie sesión en su sitio web
  • Escanear archivos Javascript para reglas CSS
  • Explore las reglas de diseño receptivo y las consultas de medios
  • Mostrar una diferencia visual del archivo CSS limpio
  • Configure un agente de usuario personalizado para rastrear su sitio web
  • Compatible con todos los sitios web (WordPress, Bootstrap …)

Cómo funciona UnusedCSS para eliminar CSS no utilizadas:

 

El proceso de centra en encontrar dónde se encuentran sus archivos CSS en su servidor, usted tendrá que realizar una copia de seguridad de ellos por si acaso y luego reemplazarlos con los archivos que ha descargado de UnusedCSS.

UnusedCSS no proporciona una herramienta para concatenar automáticamente todos los archivos CSS. Sin embargo, con simplemente copiar y pegar el contenido de cada archivo CSS en un solo archivo nuevo debería funcionar en la mayoría de los casos. LiteSpeed Cache sí puede concatenar todos sus archivos CSS.

¿Cuáles son las opciones de pago?

 

Todos los pagos son procesados ​​por el proveedor de pagos Braintree (una empresa de PayPal). Acepta las principales tarjetas de crédito, débito y PayPal.

Existen otras herramientas para eliminar CSS no utilizadas, ¿Has probado alguna?

 

Contenido Relacionado:

 

Revisión SEO PowerSuite.
Normas Para Sitios Web Más Rápidos
Precargue los Activos Críticos y Haga Volar su Página
Especialista En Acelerar WordPress
Cómo Son Los Precios De Servicios Seo
Servicio SEO Fuera De La Página
Clasificar En Los SERPs
CSS Crítico
Que Es RSS. Really Simple Syndication
Optimice La velocidad De Carga
Servicios De SEO En La Página
Factores Seo On Page 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

This function has been disabled for Blog de Marketing.