Hay muchas recomendaciones para optimizar el CSS, JS y HTML de tu sitio y eso puede confundir a muchos.
Las opciones que tenemos son:
- Minificar el CSS, el JS y el HTML.
- Combinar el CSS y el JS de tu sitio.
- Usar Inline CSS e Inline JS.
- Cargar el Javascript de forma diferida.
- Generar CSS Critico
Ver todas esas opciones puede ser algo tentador ya que mientras más optimizaciones realicemos, mejor velocidad nuestros sitios tendrán ¿No es así?
Table of Contents
Cómo Optimizar el Código CSS, JS y HTML del sitio.
En los plugins de caché puedes encontrar la mayoría de las optimizaciones que acabo de mencionar.
Entre ellos podemos mencionar:
- WP Rocket
- Fast Velocity Minify
- WP Fastest Cache
Si usas CloudFlare, también encontrarás que puedes minificar el CSS, JS y HTML del sitio.
¿Debo Aplicar todas esas Optimizaciones?
Muchas personas se preguntan sobre si deben aplicar todas las optimizaciones disponibles en los plugins de cache.
Mi respuesta es que debes de hacer pruebas para determinar cuál es la mejor configuración para tu sitio.
El ocasiones el aplicar todas las optimizaciones sin pensarlo puede ser contraproducente o puede significar un esfuerzo realizado por tu servidor en vano.
Mi recomendación es prestarle atención a dos cosas importantes:
- La primera es el tiempo de carga
- La segunda es el número de solicitudes.
La Duda sobre las Optimizaciones
Daan van den Bergh, un desarrollador y experto en temas de optimización web afirma lo siguiente sobre combinar el CSS de tu sitio.
Este fue un truco popular anterior a HTTP / 2 (y HTTP / 3). Ahora que está implementado y es compatible a nivel mundial, ya no deberías combinar tu JS y CSS, porque HTTP / 2 maneja múltiples solicitudes pequeñas más rápido en comparación con una solicitud grande.
Core Web Vitals: 10 Tips to Pass the CWV Assessment
Y HTTP/2 es algo que está disponible de forma gratuita para todo los usuarios de CloudFlare
Resultados de Test #1
Estos son los resultados combinando el CSS y minificando el HTML, CSS y JS de uno de mis sitios
| HTML | 272.5 ms |
| CSS | 148.9 ms |
| JS | 88.9 ms |
Así es como lucen esas tres solicitudes en un test de velocidad de GTMetrix
Cargando en 492 ms
Resultados de Test #2
Estos son los resultados de la misma entrada con la minificación del HTML, CSS y JS disponible desde el panel de CloudFlare.
| HTML | 127.7 ms |
| CSS | Varias Solicitudes |
| JS | 39.7 ms |
En esta ocasión hay más solicitudes de archivos CSS porque no se realizó la combinación del CSS
El tiempo de carga indudablemente ha mejorado, ahora vemos 256 ms. La carga se de los archivos CSS y el único JS disponible se dio de manera simultánea.
Conclusiones
Uso el Full Page Caching de CloudFlare por lo que todo se sirve de la red de contenido Global de CloudFlare.
Uso un servidor de $10 de Digital Ocean Administrado por Cloudways
Más optimizaciones activadas no se puede traducir en todos los casos como una mejora.
Lo importante es que hagas las pruebas y que tomes la mejor decisión en base a los resultados obtenidos.
Información Relacionada
Estas son algunas publicaciones que te podrian interesar
- Breeze: Plugin de Cache de Cloudways
- Remover CSS y JS Innecesario de WordPress
- Crear un Favicon en Blanco en WordPress
- Code Snippets para WordPress: Los 18 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
