Remover CSS y JS Innecesario de WordPress

Hoy vas a aprender a como remover el CSS y JS innecesario de tu sitio de WordPress.

Remover el CSS y JS innecesario de tu sitio de WordPress hará que tengas menos solicitudes en tu sitio por lo que el tiempo de carga completa de tu sitio mejorará.

Hacer este procedimiento no causa mayores problemas en tu sitio pero si puede hacer que luzca mal pero es algo que puedes revertir en un minuto.

Paso #1 El Plugin de Cache

El plugin de caché es un plugin que deberías desactivar. Si no deseas hacerlo, debes de desactivar las opciones que optimizan el CSS y el JS del sitio.

El punto de esto es remover el CSS y el JS innecesario para luego optimizar con tu plugin de caché.

Haciendo esto estaríamos re-optimizando lo que ya estaba optimizado.

Paso #2 Ver la WaterFall de GTMetrix

Una de los sitios que uso siempre que deseo remover es la cascada de GTMetrix.

La cascada de GTMetrix me ayudará a determinar las solicitudes y el tipo de solicitudes.

Esa cascada me va a dar una buena idea de lo que esta pasando en mi sitio.

Esta es un reporte de un sitio que tiene 11 solicitudes y que tiene un tiempo de carga completa de 0.7 segundos, sin contenido, con Breeze y Bot Protection.

Paso #3 Identificar el CSS y JS Innecesario

Yo soy bastante minimalista en cuanto a plugins, uso un mínimo de estos y los 10 plugins que forman parte del equipo son bastante livianos por lo que tengo una buena idea de las solicitudes que estos crean.

Por ejemplo. Yo uso WP Show Posts en mi pagina de inicio para mostrar las ultimas publicaciones.

El plugin es liviano pero va a crear una solicitud necesaria en el homepage y una solicitud innecesaria en el resto de entradas del sitio.

El CSS Innecesario a remover es:

/wp-content/plugins/wp-show-posts/css/wp-show-posts-min.css?ver=1.1.3

Paso #4 Instalar un WordPress Asset Manager

Ahora lo que debes hacer es instalar un plugin gratuito que se encuentra en el repositorio de Wordpress que se llama WordPress Assets manager, dequeue scripts, dequeue styles.

Una vez instalado, debes visualizar la publicación que tiene el CSS o JS innecesario y visualizarla.

Una vez abierta, veras un botón que se llama Asset Manager en la barra de WordPress

Haz click en el botón Asset Manager y ahí veras todo el CSS y JS que la pagina esta cargando debido a plugins, al core de WordPress o al tema.

En este caso, WP Show Posts tiene el CSS que queremos remover por lo que vas a ir a a la columna de acciones y escoger Disable en el menu DropDown

Debido a que deseamos remover ese CSS de todas nuestras entradas ya que este es completamente innecesario, debes indicar eso en el plugin.

Escogemos post type, equals, posts y ese CSS no volverá a cargar en cualquiera de las entradas.

Guarda los cambios

Paso #5 Verificar y Continuar Optimizando

Una vez que guardas los cambios, debes ir a la paginas involucradas y asegurarte que todo esta bien.

Hazlo desde modo incognito y verificar que el sitio luce bien en el escritorio y en dispositivos moviles.

Preguntas y Pensamientos

Estos son algunas cosas que debes saber al remover CSS no usado.

#1 ¿Porque usas WordPress Asset Manager de Gonzales?

Hay otros plugins gratuitos y de pago con los cuales puedes obtener estos resultados.

La elección de WordPress Assets manager, dequeue scripts, dequeue styles es simplemente un gusto personal.

#2 ¿Debería remover el CSS y el JS del core de Wordpress?

Por lo general este plugin se usa para remover CSS y JS en plugins y temas ya que el CSS y el JS no usado del core se remueve con Code Snippets y plugins.

#3 ¿Con esto la velocidad Mejorará?

Mejorar la velocidad implica las realización de otras acciones por lo que esto es una de muchas.

#4 ¿Debería minificar y combinar después de terminar el proceso?

Una vez que hagas este proceso, puedes usar un plugin de caché como WPRocket que permite minificar y combinar el CSS y el JS

#5 ¿Debería usar un sitio como PurifyCSS para determinar que remover?

Hay herramientas que permiten identificar el CSS no usado pero eso requiere un método más quirúrgico que no recomiendo.

Hacerlo te puede costar mucho dinero y creará una dependencia en un desarollador de WordPress

#6 ¿Me da miedo probar eso en mi sitio?

Lo de remover el CSS y el JS innecesario pareciera super difícil pero no lo es. No tienes que programar en lo absoluto.

Si tienes dudas, lo que puedes hacer es crear una entrada o pagina de prueba y experimentar con ella.

Información Relacionada

Estas son algunas publicaciones que te podrian interesar

  1. Crear un Favicon en Blanco en WordPress
  2. Code Snippets para WordPress: Los 12 Mejores
  3. Cómo Acelerar tu Sitio de WordPress: El Dilema
  4. Full Page Caching de CloudFlare
  5. Cómo Usar la Cascada de GTMetrix
  6. Reseña sobre CloudFlare APO: ¿Debería Usarlo?
  7. Mejorar Resultados de Core Web Vitals
  8. Reseña sobre WP CloudFlare Super Page Cache
  9. Reseña sobre Flying Scripts de WP Speed Matters
  10. Flying Scripts y Adsense: La Cura