TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo eliminar CSS y JavaScript no utilizados en WordPress?

330

Los temas livianos como Astra, GeneratePress y Genesis cargan muy 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 del complemento. Combinando temas y complementos, la puntuación de velocidad general tendrá un impacto en cada archivo fuente del sitio. En este artículo, explicaremos cómo eliminar CSS y JavaScript no utilizados en WordPress para mejorar la puntuación de Google PageSpeed ​​Insights.

Relacionado: Lea más de 400 tutoriales gratuitos de WordPress.

¿Qué son CSS y JavaScript no utilizados?

Expliquemos esto con un ejemplo sencillo. Contact Form 7 es uno de los complementos populares para agregar formularios de contacto en sitios de WordPress. Por lo general, necesita el formulario de contacto en la página "Contacto" y tal vez en algunas otras páginas. No utilizará el formulario de contacto en cada publicación de blog. Sin embargo, el complemento Formulario de contacto 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 ninguna necesidad. Estos CSS y scripts innecesarios se denominan CSS sin usar y script sin usar.

Otro buen ejemplo es una tienda WooCommerce. Necesita estilos y scripts de WooCommerce solo en páginas como productos, archivos de productos, carrito, caja y tienda. Sin embargo, el complemento 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 complementos cargarán 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 errores como a continuación como oportunidades, cuando pruebe la URL de la página en PageSpeed ​​Insights.

¿Cómo eliminar CSS y JavaScript no utilizados en WordPress?

Error 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. En este punto, la puntuación del 30% es por el tiempo de bloqueo y tener CSS / JS sin usar y recursos de bloqueo de renderización reducirá la puntuación al fondo. 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 tanto, es necesario identificar los CSS y JavaScript no utilizados y eliminarlos para que no se carguen en todas las páginas.

¿Cómo identificar CSS y JavaScript no utilizados?

Debe comprender qué está causando que los recursos no utilizados se carguen en sus páginas. Como se explicó anteriormente, no es necesario que cargue el formulario de contacto, la tienda en línea o los complementos de revisión 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 complemento de almacenamiento en caché 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 le mostrará la lista de recursos con el tamaño de la transferencia y los ahorros potenciales.

¿Cómo eliminar CSS y JavaScript no utilizados en WordPress?

Ver recursos no utilizados en PageSpeed

  • Código externo: como puede ver en la captura de pantalla anterior, "pagad2.googlesyndication.com" es de Google AdSense. No puede eliminar CSS y JavaScript no utilizados cargados de sitios web de terceros. Estos scripts se cargan en su sitio con publicidad, análisis, incrustaciones de videos de YouTube o complementos para compartir en redes sociales. Por lo tanto, debe comprender que estos recursos externos afectarán la velocidad de la página y no tiene control sobre ellos a menos que decida eliminarlos. Consulte el artículo sobre AdSense Vs Page Speed para comprender que los anuncios acabarán con la velocidad de su página.
  • Archivos de complementos y temas: explicaremos cómo eliminarlos en la siguiente sección.
  • CSS y scripts en línea: la herramienta Google PageSpeed ​​Insights generalmente no los muestra. Tienes que identificarlos y eliminarlos manualmente de tu sitio. Si un complemento inserta CSS / script en línea, desactive los archivos del complemento o evite agregar código en línea personalizado. 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 utilizados 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 complemento liviano para deshacerse del problema. Después de encontrar la causa del error, puede volver a habilitar el complemento de almacenamiento en caché en su sitio.

¿Cómo eliminar CSS y JavaScript no utilizados?

Hay dos formas que puede utilizar para eliminar archivos CSS y JS no utilizados cuando la página se carga en el navegador. La primera opción es usar complementos premium como WP Rocket y la segunda opción es usar complementos gratuitos. Te explicaremos ambos métodos en detalle, para que puedas comprobar y elegir el más fácil para ti.

Eliminar CSS no utilizado con WP Rocket

WP Rocket es el complemento de almacenamiento en caché más popular para WordPress que ofrece una interfaz de usuario súper simple. Para mejorar el tiempo de carga de la página, debe comprar el complemento y actualizarlo a la última versión (anterior a 3.9).

  • Vaya al menú "Configuración> WP Rocket" en su panel de administración de WordPress.
  • Haga clic en la pestaña "Optimización de archivos" y desplácese hasta la parte inferior de la sección "Archivos CSS".
  • Habilite la opción "CSS no utilizado (Beta)" y confirme la opción "Activar Eliminar CSS no utilizado" en el mensaje de advertencia.

¿Cómo eliminar CSS y JavaScript no utilizados en WordPress?

Eliminar CSS no utilizado en WP Rocket

  • El complemento comenzará a procesar el CSS en su sitio, lo que puede tardar varios minutos en completarse.

¿Cómo eliminar CSS y JavaScript no utilizados en WordPress?

Se completó la eliminación de CSS no utilizado

  • Después de terminar, verá un mensaje de éxito "¡Se completó la eliminación de CSS no utilizado!".
  • También puede habilitar la opción "Optimizar la entrega de CSS" para generar CSS crítico para evitar problemas de bloqueo de procesamiento de CSS.
  • Haga clic en el botón "Guardar cambios" en la parte inferior de la página para volver a generar los archivos en caché.

Eliminar JavaScript no utilizado con WP Rocket

A diferencia de CSS, no es posible eliminar JS con el complemento WP Rocket. Sin embargo, puede habilitar las opciones "Cargar JavaScript diferido" y "Retrasar la ejecución de JavaScript" en la sección "Optimización de archivos> Archivos JavaScript". Esto retrasará los códigos internos y externos y eliminará los problemas de JavaScript que bloquean el renderizado.

¿Cómo eliminar CSS y JavaScript no utilizados en WordPress?

Retrasar la ejecución de JavaScript

Asegúrese de probar que su sitio funciona bien después de habilitar estas opciones.

Uso del complemento Asset CleanUp para eliminar CSS y JavaScript no utilizados

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 "Complementos> Agregar nuevo".
  • Escriba "limpieza de activos" en el cuadro de búsqueda y busque el complemento "Limpieza de activos: Page Speed ​​Booster".

¿Cómo eliminar CSS y JavaScript no utilizados en WordPress?

Instalar y activar el complemento

  • Haga clic en el botón "Instalar ahora" y luego active el complemento.
  • Después de activar el complemento, le recomendamos que lea la documentación que se muestra. Esto es necesario para utilizar el complemento correctamente.

¿Cómo eliminar CSS y JavaScript no utilizados en WordPress?

Leer las guías de introducción

Configuración del complemento

El complemento tiene numerosas configuraciones que no explicaremos en este artículo. Si está utilizando un complemento 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 utilizados. Vaya al menú "Limpieza de activos> Configuración" y luego a la pestaña "Preferencias de uso de complementos". 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.

¿Cómo eliminar CSS y JavaScript no utilizados en WordPress?

Habilitar administrar en el panel

  • Administrar en el front-end: si desea analizar la página desde el navegador del 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 haya iniciado sesión. Los usuarios que visiten su sitio no se verán afectados durante su comprobación.

¿Cómo eliminar CSS y JavaScript no utilizados en WordPress?

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, complementos, núcleo y externos). Esto le ayudará a ver los archivos de recursos agrupados en diferentes categorías.

¿Cómo eliminar CSS y JavaScript no utilizados en WordPress?

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 "Modo de prueba" y habilite la opción "Habilitar modo de prueba". Esto le ayudará a comprobar que el sitio no funciona después de deshabilitar los scripts y CSS antes de hacerlo público.

¿Cómo eliminar CSS y JavaScript no utilizados en WordPress?

Habilitar el modo de prueba

Haga clic en "Actualizar todas las configuraciones" en la parte inferior para aplicar sus cambios.

Eliminar CSS y JavaScript no utilizados

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 hasta la parte inferior para ver los cuadros de meta del complemento 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 "Administrar en la interfaz ", 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.

¿Cómo eliminar CSS y JavaScript no utilizados en WordPress?

Ver recursos cargados en grupo

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

¿Cómo eliminar CSS y JavaScript no utilizados en WordPress?

Deshabilitar o habilitar CSS y JS

  • Descarga 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 complemento.

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.

¿Cómo eliminar CSS y JavaScript no utilizados en WordPress?

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. Del mismo modo, 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.

Ultimas palabras

Esperamos que el artículo sea útil para eliminar archivos CSS y JavaScript no utilizados de su sitio y mejorar la puntuación de PageSpeed ​​de Google. Recomendamos usar WP Rocket, ya que es fácil eliminar CSS y retrasar JS externo con unos pocos clics. Si está utilizando el complemento gratuito Asset Cleanup, solo lo ayudará a deshabilitar la carga de archivos CSS y JS desde complementos y temas. Debe evitar el uso de códigos de terceros y eliminar manualmente los códigos innecesarios dentro del archivo style.css principal. Cuando edite archivos manualmente, asegúrese de usar el tema hijo para actualizar la hoja de estilo para que no pierda los cambios cada vez que actualice el tema.

Fuente de grabación: www.webnots.com
Deja una respuesta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More