Hoy vas a aprender a cómo 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 de tu sitio mejorará.
Hacer este procedimiento no causa mayores problemas en tu sitio pero si puede hacer que luzca mal. Lo bueno es que los cambios se pueden revertir fácilmente.
Veamos los pasos a seguir para remover el CSS y el JS innecesario de tu sitio correctamente.
Table of Contents
¿Por Qué Remover el CSS y el JS Necesario?
Remover el CSS y el JS que no necesitas de tu sitio de WordPress es una medida de optimización que todos deberíamos implementar.
Esto se vuelve necesario porque muchos plugins cargan hojas de estilo y scripts en cada una de las entradas y páginas de tu sitio a pesar que estos seran usados unicamente en una pagina.
Un ejemplo de este problema se presenta con la instalación de Contact Form 7, un plugin para crear formulario que agrega dos solicitudes a todas las entradas, paginas y categorias de tu sitio
Si vas a usar un formulario únicamente en la página de contacto, el cargar estos scripts en todo el sitio es un completo desperdicio.
Y de ahí nace la necesidad de remover hojas de estilo y scripts innecesarias de manera condicional.
Veamos los pasos sobre cómo encontrar las solicitudes y removerlas correctamente sin perjudicar el diseño o la funcionalidad de tu sitio.
Paso #1 El Plugin de Cache
El primer paso para remover las hojas de estilo y scripts innecesarios de tu sitio es desactivar tu plugin de caché.
Desactivar el plugin de caché es de suma importancia porque las optimizaciones presentes en algunos de ellos pueden interferir con el proceso.
Por ejemplo:
Si combinas las hojas de estilo o los scripts no podrás distinguir unos de estos de otros
Si no deseas desactivar el plugin de caché, debes de desactivar las opciones que optimizan el CSS y el JS del sitio.
Paso #2 Ver la WaterFall de GTMetrix
Una de los sitios que uso siempre que deseo remover hojas de estilos y scripts es la cascada de GTMetrix.
La cascada de GTMetrix me ayudará a determinar las solicitudes, el número de estas y los plugins que pueden estar agregandolas.
Este reporte tiene 11 solicitudes.
Estoy seguro que podemos prescindir de algunas de ellas con algo de código.
Si tuvieses más plugins, veriamos más de 11 solicitudes.
Paso #3 Identificar el CSS y JS Innecesario
Yo soy bastante minimalista en cuanto al uso de plugins ya que menos es más en términos de velocidad y seguridad de WordPress
Uso entre 9 a 12 plugins bastante livianos por lo que tengo una buena idea de las solicitudes que estos crean.
Por ejemplo.
Yo he usado WP Show Posts en mi página de inicio para mostrar las publicaciones más recientes
El plugin es liviano pero va a crear una solicitud necesaria en el homepage y una solicitud innecesaria en el resto del sitio.
El CSS Innecesario a remover de todo el sitio con excepción de la página de inicio es:
/wp-content/plugins/wp-show-posts/css/wp-show-posts-min.css?ver=1.1.3
Esa hoja de estilos es bastante liviana de acuerdo con lo que podemos ver en la cascada de GTMetrix
Ahora veamos cómo cargar esa hoja de estilos condicionalmente
Paso #4 Instalar un WordPress Asset Manager
Esto también puede ser realizado por Perfmatters y algunos otros plugins Premium y Gratuitos
En este ejemplo usaremos un plugin gratuito.
Debes 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.
Una vez abierta, verás un botón que se llama Asset Manager en la barra de WordPress
Haz click en el botón Asset Manager y ahi veras todo el CSS y JS que la página esta cargando.
En este caso, WP Show Posts tiene el CSS que queremos remover por lo tanto, ve a la columna de acciones y escoge Disable en el menu DropDown
Debido a que deseamos remover ese CSS de todas nuestras entradas, 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 páginas involucradas y asegurarte que todo esta bien en términos de estilo (CSS) y funcionalidad (JS)
Hazlo desde una ventana modo incógnito y verifica que el sitio luzca y funciones bien en el escritorio y en dispositivos móviles.
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 pero también puede ayudarte a remover scripts y hojas de estilos presente en el core de WordPress
#3 ¿Con esto la velocidad de mi sitio de WordPress Mejorará?
Mejorar la velocidad implica las realización de otras acciones por lo que esto es una de muchas acciones que puedes realizar
#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 WP Rocket que permite modificar y combinar el CSS y el JS.
#5 ¿Debería usar un sitio como PurifyCSS para determinar que remover?
Hay herramientas que permiten purificar el CSS de un sitio, es un método un poco más quirúrgico.
Purificar el CSS sería el paso posterior a remover el CSS no necesario y básicamente es eliminar del código aquello que no consideramos importante o necesario.
WP Rocket y FlyingPress también realizan la purificación del CSS de forma automática
#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 conocer los lenguajes involucrados
Si tienes dudas, lo que puedes hacer es crear una entrada o página de prueba y experimentar con ella.
Información Relacionada
Espero que hayas aprendido algo nuevo, si te gusta el tema de optimizar tu sitio
Estas son algunas publicaciones que te podrian interesar
- Crear un Favicon en Blanco en WordPress
- Code Snippets para WordPress: Los 12 Mejores
- Cómo Acelerar tu Sitio de WordPress: El Dilema
- Full Page Caching de CloudFlare
- Cómo Usar la Cascada de GTMetrix
- Reseña sobre CloudFlare APO: ¿Debería Usarlo?
- Mejorar Resultados de Core Web Vitals
- Reseña sobre WP CloudFlare Super Page Cache
- Reseña sobre Flying Scripts de WP Speed Matters
- Flying Scripts y Adsense: La Cura
