Errores de PageSpeed para CSS y JS no utilizados

Eliminar CSS Y JavaScript No Usados En WordPress

Cómo Eliminar CSS Y JavaScript No Usados En WordPress

Los temas livianos como Astra (que uso en este blog), GeneratePress y Genesis cargan mucho menos CSS y scripts en el sitio. Esto ayuda a eliminar los errores de CSS y JavaScript no utilizados en la herramienta Google PageSpeed ​​Insights y dispara la puntuación de velocidad. Sin embargo, el 99% de los temas comerciales de WordPress combinan múltiples funciones y cargan scripts y CSS pesados. Ya sea que use un tema liviano o pesado, aún necesita muchas funcionalidades a través de plugins. Combinando temas y plugis, la puntuación de velocidad general se verá afectada con cada archivo de origen. En esta publicación, explicaré cómo eliminar CSS y JavaScript no usados en WordPress para mejorar la puntuación de velocidad de la página.

¿Qué son CSS y JavaScript no utilizados?

y porqué eliminar CSS y JavaScript no usados en WordPress

Expliquemos esto con un ejemplo sencillo. Contact Form 7 es uno de los plugins populares para agregar formularios de contacto en su sitio. Generalmente, necesita un formulario de contacto en su página de «Contacto» y tal vez en algunas otras páginas. No utilizará el formulario de contacto en cada publicación del blog.

Sin embargo, el plugin Contact Form 7 cargará CSS y JavaScript en cada página y publicación de blog de su sitio. Es un gran problema cuando tienes 1000 publicaciones de blog y todas ellas cargan el script/CSS del formulario de contacto sin necesidad. Estos CSS y scripts innecesarios se denominan CSS no utilizados y script no utilizados.

Otro buen ejemplo es una tienda WooCommerce. Necesita los estilos y scripts de WooCommerce solo en las páginas de la tienda, como productos, archivos de productos, carrito, pago y compra. Sin embargo, el plugin no tiene ninguna opción para evitar la carga de archivos en publicaciones o páginas de blogs.

¿Por qué esto es un problema?

Desafortunadamente, casi todos los plugins cargarán los recursos en todas las páginas de su sitio. Esto tendrá un gran impacto en la velocidad de carga de la página y reducirá la puntuación de velocidad en herramientas como Google PageSpeed ​​Insights. Verá los siguientes errores como oportunidades, cuando pruebe la URL de la página en PageSpeed ​​Insights.

eliminar CSS y JavaScript no usados en WordPress Errores de PageSpeed para CSS y JS no utilizados
Errores de PageSpeed para CSS y JS no utilizados

Aunque la herramienta dice que esto no afectará directamente la puntuación de rendimiento, tiene un gran impacto en el tiempo de carga. Además, algunas empresas de alojamiento cobrarán en función del uso de ancho de banda. La carga de archivos de script/CSS innecesarios en su sitio aumentará el uso de ancho de banda de forma múltiple, por lo que se debe eliminar CSS y javaScript no usados en WordPress. Por lo tanto, es necesario identificar los CSS y JavaScript no utilizados y eliminarlos de la carga en todas las páginas.

Por lo tanto, debe eliminar CSS y JavaScript no usados en WordPress. Si no conoce el tecnicismo de arreglarlo, haré esto por ti. Ponte en contacto conmigo ahora.

¿Cómo identificar CSS y JavaScript no utilizados?

Para saber cómo eliminar CSS y JavaScript no usados en WordPress debe primero identificarlo. Debe comprender qué está causando que los recursos no utilizados se carguen en sus páginas. Como se explicó anteriormente, hay algunas conjeturas fáciles como el formulario de contacto, la tienda en línea o los plugins de revisión que no son necesarios en todas las páginas. Sin embargo, toda la tarea es más complicada de lo que cree.

  • Primero, purgue el almacenamiento en caché y desactive el plugin de almacenamiento en cache en su sitio. Ahora vaya a la herramienta Google PageSpeed ​​Insights y verifique la puntuación de velocidad.
  • Haga clic en los mensajes «Eliminar JavaScript no utilizado» y «Eliminar CSS no utilizado» para expandirlos. Google mostrará todas las URL que se pueden eliminar de la página.
eliminar CSS y JavaScript no usados en WordPress. Ver recursos no utilizados en PageSpeed
Ver recursos no utilizados en PageSpeed
  • Código externo: No puede eliminar el CSS y JavaScript no utilizados de sitios web de terceros. Estos scripts se cargan en su sitio con publicidad, análisis, incrustaciones de videos de YouTube o plugins para compartir en redes sociales. Por lo tanto, debe comprender que estos recursos externos afectarán la velocidad de su página y no tiene control sobre ellos a menos que decida eliminarlos. Comprenda que los anuncios acabarán con la velocidad de su página.
  • Archivos de plugins y temas : explicaremos cómo eliminarlos en la siguiente sección.
  • CSS y scripts en línea : estos no se muestran en la herramienta PageSpeed. Tienes que identificarlos manualmente y eliminarlos de tu sitio. Si un plugin inserta CSS/script en línea, desactive los archivos del plugin. Recuerde, existe un gran problema con los temas pesados ​​que usan style.css con miles de líneas. Debe eliminar manualmente el código dentro del archivo style.css para reducir el tamaño.

En resumen, es fácil eliminar CSS y JavaScript no usados en WordPress si se cargan como archivos separados. La carga de un archivo style.css enorme o CSS en línea no se puede eliminar a menos que los revise manualmente y elimine los códigos no utilizados. Alternativamente, es posible que deba encontrar un tema o plugin ligero para deshacerse del problema.

Después de encontrar la causa del error, puede volver a habilitar el plugin de almacenamiento en caché en su sitio.

Este plugin escanea la página que está editando, detecta los scripts y estilos cargados y los muestra en una lista donde puede elegir los que no desea cargar.

Cuando tenga muchos archivos de plugins y temas cargados, siga las instrucciones a continuación para eliminarlos en las páginas donde no los necesita.

  • Inicie sesión en su panel de administración de WordPress y vaya a la sección «plugins> Añadir nuevo».
  • Escriba «asset cleanup» en el cuadro de búsqueda y busque el plugin «Asset CleanUp: Page Speed Booster».
Como eliminar CSS y JavaScript no usados en WordPress. Instalar y activar el plugin Asset CleanUp. Page Speed BoosterInstalar y activar el plugin Asset CleanUp: Page Speed Booster
  • Haga clic en el botón «Instalar ahora» y luego active el plugin.
  • Después de activar el plugin, le recomiendo que lea la documentación que se muestra para que tenga éxito en su tarea de eliminar CSS y javaScript no usados en WordPress. Esto es necesario para utilizar el plugin correctamente.

Leer la Guia de introduccion del plugin Asset CleanUp Page Speed Booster

Leer la Guia de introducción del plugin Asset CleanUp Page Speed Booster

¿Cuáles son los beneficios de usar este plugin?

  • Las solicitudes HTTP en su sitio web disminuirán, lo que le ahorrará ancho de banda (bueno, si no tiene ilimitado con su host) y sus páginas se cargarán más rápido.
  • En caso de que haya conflictos entre scripts (de plugins/temas) que se cargan en la misma página, puede eliminar los que no necesita, minimizando así el riesgo de errores de JavaScript. Si eres un desarrollador, sabes cuántos dolores de cabeza puedes tener cuando estás depurando errores en una página que tiene 20 archivos .js cargados desde varios plugins (y solo necesitas 5 de ellos).
  • El código fuente HTML será más pequeño, más limpio y más fácil de leer cuando necesite encontrar algo.
  • Los archivos de registro de Apache también serán más pequeños y fáciles de leer, ya que se realizarán menos solicitudes al servidor.

Este plugin es poderoso en combinación con un plugin de caché que también combina los activos cargados restantes (archivos .css y .js) para minimizar la cantidad de solicitudes HTTP.

Configuración del plugin

El plugin tiene numerosas configuraciones que no explicaremos en esta publicación. Si está utilizando un plugin de almacenamiento en caché como WP Rocket en su sitio, asegúrese de no usar ninguna otra función que no sea deshabilitar los scripts y CSS no usados. Vaya al menú «Asset CleanUp > Settings” y luego a la pestaña «Plugin Usage Preferences». Aquí puede decidir la forma en que desea ver y deshabilitar los CSS/scripts no utilizados en sus páginas.

  • Administrar en el panel : habilite esta opción. Esto le ayudará a analizar la página desde el editor de publicaciones dentro del panel de administración.
Administrar en el panel
Administrar en el panel
  • Administrar en el front-end : si desea analizar la página desde el navegador front-end, habilite esta opción. De lo contrario, puede desactivar esto. Recuerde, el análisis de front-end solo lo puede realizar el usuario administrador que inició sesión. Los usuarios que visiten su sitio no se verán afectados durante su comprobación.
Habilitar o deshabilitar la gestión en la interfaz
Habilitar o deshabilitar la gestión en la interfaz
  • Diseño de la lista de activos : haga clic en el menú desplegable y seleccione “Todos los estilos y secuencias de comandos> Agrupados por ubicación (temas, plugins, núcleo y externos). Esto le ayudará a ver los archivos de recursos agrupados en diferentes categorías.
Establecer diseño de vista
  • ¿Ocultar el archivo principal de WordPress de la lista de activos? – habilite esta opción para no estropear los archivos principales de WordPress.

Ahora, vaya a la pestaña «Test Mode» y habilite la opción «Enable Test Mode». Esto le ayudará a comprobar que el sitio no funciona después de desactivar los scripts y CSS antes de hacerlo público.

eliminar CSS y JavaScript no usados en WordPress. Enable Test Mode del plugin Asset CleanUp: Page Speed Booster

Enable Test Mode del plugin Asset CleanUp: Page Speed Booster

Haga clic en «Update All Settings» en la parte inferior para aplicar sus cambios.

Eliminar CSS y JavaScript no usados en WordPress

Dependiendo de la configuración, puede analizar la página desde el editor o desde el front-end.

  • Deshabilitar scripts y CSS desde el editor : edite cualquiera de las publicaciones existentes para ir al editor de publicaciones. Desplácese hacia abajo para ver los cuadros de meta del plugin Asset CleanUp. Vea todos los CSS y scripts cargados en esa página y desactive los recursos que no necesita.
  • Desactivación de scripts y CSS desde la interfaz : si ha habilitado la opción «Manage in the Front-end», abra cualquiera de sus publicaciones en la interfaz del navegador. Recuerde, debe iniciar sesión en su panel de administración de WordPress en otra pestaña del navegador. En la parte inferior de la página, verá cuadros meta similares que deshabilitan los recursos cargados en la página.

En ambos casos, verá todos los archivos CSS y JavaScript cargados en la página agrupados según su configuración.

eliminar CSS y JavaScript no usados en WordPress. Ver recursos cargados en grupo
Ver recursos cargados en grupo

Expanda cada grupo y vea los detalles de los archivos cargados por sus plugins y temas. Para cada archivo CSS y JS, tiene varias opciones como se muestra en la siguiente imagen.

Deshabilitar o habilitar CSS y JSDeshabilitar o habilitar CSS y JS
  • Descargue el recurso en la página.
  • Deshabilitar el archivo en todo el sitio
  • Desactivar en todas las publicaciones (continuará cargándose en páginas y tipos de publicaciones personalizadas).
  • Pocas otras opciones, como usar RegEx, están disponibles solo en la versión pro del plugin.

Después de deshabilitar los archivos, actualice su publicación para que los cambios sean efectivos en el sitio.

Visualización de archivos deshabilitados y eliminación del modo de prueba

  • Vaya a la sección «Limpieza de activos> Cambios masivos».
  • Vaya a la pestaña «Publicaciones, páginas y tipos de publicaciones personalizadas» y seleccione «Publicar» en el menú desplegable.
  • Aquí puede ver todos los archivos deshabilitados en su sitio.
  • Seleccione la casilla de verificación «Eliminar regla masiva» y haga clic en el botón «Aplicar cambios» en la parte inferior para habilitar la carga del archivo nuevamente.
  • Alternativamente, puede editar cualquier publicación en el editor de publicaciones y modificar el comportamiento de carga de los archivos.
eliminar CSS y JavaScript no usados en WordPress. Ver y eliminar archivos masivos
Ver y eliminar archivos masivos

Verifique su sitio y si todo está bien, regrese a la página de configuración y desactive la opción «Modo de prueba». Esto hará que los cambios estén disponibles para todos los usuarios que visiten su sitio web. De manera similar, puede deshabilitar los archivos CSS y JS en tipos de publicaciones, páginas y páginas de productos personalizados editándolos. Verifique sus páginas con la herramienta Google PageSpeed ​​Insights para ver si se eliminan los errores.

El plugin solo lo ayudará a deshabilitar la carga de archivos CSS y JS desde plugins y temas. Debe evitar el uso de códigos de terceros y eliminar los códigos innecesarios dentro del archivo principal style.css. Aconsejo usar el tema hijo para actualizar la hoja de estilo para que no pierda los cambios cada vez que actualice el tema.

El Plugin Organizer permite cargar plugins en las páginas cuando solo los necesitamos, ya que queremos disminuir el tamaño de la página y hacer que nuestras páginas de WordPress se carguen más rápido, especialmente si usamos un plugin de caché como W3 Total Cache.

Si todo esto le parece demasiado técnico para usted, escríbame a [email protected] para encontrar una solución para usted.

 

Contenido Relacionado:

 

Como Mejorar First Contentful Paint
Los Factores De Rankin Del Algoritmo de Búsqueda De Google
Precargue Los Activos Críticos Para Mejorar La Carga
¿Qué es CSS crítico? ¡Genéralo!
Eliminar CSS no utilizadas
Asegúrese Que El Texto Permanezca Visible Durante La Carga De La Fuente Web
Cómo Configurar Notificaciones Push en WordPress
Cómo Desarrollar Un Sitio Web
Utilice Aceleradores De PHP Para Acelerar WordPress
Cómo Agregar Datos Estructurados a Sitios WordPress
Cómo Realizar Una Auditoría De Seo En WordPress
Qué Es EAT De Google Para SEO
Rendimiento Del Tráfico Sitio Web
Actualización Del Algoritmo Central Diciembre 2020
Legibilidad Un Factor De Clasificación
Cómo Instalar Google Analytics 4
Largest Contentful Paint
Cómo Usar Interlinking Para Seo
Herramientas Seo Tanto Gratuitas Como De Pago
Speed Index Pagespeed
Cumulative Layout Shift

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuar!

promedio de puntuación

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

¡Siento que este contenido no te haya sido útil!

¡Déjame mejorar este contenido!

Dime, ¿cómo puedo mejorar este contenido?

Sigueme
Últimas entradas de Estela Silva H. (ver todo)

Soporte a su negocio en el campo del posicionamiento web, optimización web y auditorías profesionales. Gracias a mis acciones, los sitios web obtienen un tráfico segmentado que se traduce directamente en ventas y conversiones en el sitio web con  efectos seguros durante muchos años.

Servicios de Comercio electrónico Servicios de e-Marketing y Estrategías
Montar una tienda Posicionamiento en Goole
Posicionamiento de tiendas Marketing de contenidos
Notificaciones push Auditorías de Contenido
Auditorías SEO
Páginas Web Gratis
Gestión de Google Ads
Asesoramiento y Consulta
Reparación de Sanciones de Google
Entrenamiento SEO
Reparación de Sitio Hackeado
Acelerar WordPress