Cómo dejé de perder clientes por un sitio lento y solucioné las advertencias de Google PageSpeed Insights paso a paso.
Después de la odisea de migrar y configurar mi nueva tienda online, pensé que el trabajo duro había terminado. Tenía un sitio funcional, seguro y con los productos cargados. Pero una herramienta gratuita de Google, PageSpeed Insights, me dio un golpe de realidad: mi puntuación de rendimiento en móviles era un desastroso 54.
Mi tienda era lenta. Y en el mundo del ecommerce, un sitio lento significa clientes frustrados y ventas perdidas.
El informe estaba lleno de advertencias técnicas que parecían intimidantes: «Renderizado del mayor elemento con contenido (LCP) de 23.8 segundos», «Solicitudes que bloquean el renderizado», «Pospón la carga de imágenes»…
En esta guía, te mostraré paso a paso cómo usé el plugin gratuito LiteSpeed Cache (que es la pareja perfecta para servidores LiteSpeed como el que uso en CyberPanel) para solucionar cada una de estas advertencias y disparar la velocidad de mi tienda.
Paso 1: Optimización de Imágenes (El Cambio Más Impactante)
El informe de PageSpeed era claro: mi mayor problema eran las imágenes. Representaban un «ahorro potencial» de más de 4MB. Estaban pesadas y en formatos antiguos.
La Solución: Usar el servicio de optimización de imágenes de LiteSpeed, QUIC.cloud.
- Navegación: En mi panel de WordPress, fui a LiteSpeed Cache -> Optimización de Imágenes.
- Conexión: Seguí los pasos para conectar mi sitio con QUIC.cloud. Tienen un plan gratuito muy generoso que te da créditos mensuales para optimizar miles de imágenes.
- Configuración Clave: En la pestaña «Ajustes de Optimización de Imágenes», activé dos opciones cruciales:
- ✅
Optimizar Imágenes Automáticamente: Para que comprima cualquier imagen nueva que suba en el futuro. - ✅
Crear Versiones .webp: WebP es un formato de imagen moderno, mucho más ligero que JPG o PNG. Esta opción crea una copia de cada imagen en este formato.
- ✅
- Ejecución: Volví a la pestaña principal, hice clic en «Reunir imágenes» y luego en «Enviar imágenes a optimización». El sistema empezó a trabajar en segundo plano, comprimiendo todo mi catálogo.
Impacto: Solo con este paso, el peso total de mi página se redujo drásticamente.
Paso 2: Eliminando el «Freno de Mano» (CSS y JavaScript)
El segundo gran problema eran las «Solicitudes que bloquean el renderizado». Esto significa que el navegador se detenía a cargar archivos pesados de CSS y JavaScript antes de poder mostrar la página.
La Solución: Configurar la «Optimización de Página» en LiteSpeed.
- Navegación: Fui a LiteSpeed Cache -> Optimización de Página.
- Ajustes de CSS: En la pestaña
[1] Ajustes de CSS, activé:Minificar CSS(ON): Elimina espacios y comentarios innecesarios del código.Combinar CSS(ON): Une múltiples archivos CSS en uno solo para reducir el número de peticiones al servidor.Carga de CSS Asíncrona(ON): ¡Esta es la opción mágica! Le dice al navegador que cargue el CSS de forma «asíncrona», sin detener el dibujado de la página.
- Ajustes de JS: En la pestaña
[2] Ajustes de JS, hice lo mismo:Minificar JS(ON):Combinar JS(ON):Aplazar la Carga de JS(Deferred): Similar a la opción de CSS, esto mueve la carga de los scripts al final, permitiendo que el contenido visible aparezca mucho más rápido.
Importante: Después de activar estas opciones (especialmente «Combinar»), es crucial revisar el sitio en una ventana de incógnito para asegurarse de que nada se haya roto visualmente.
Paso 3: Carga Inteligente de Imágenes (Lazy Load)
Para solucionar la advertencia «Pospón la carga de imágenes que no aparecen en pantalla», la solución es el «Lazy Load».
- Navegación: Fui a LiteSpeed Cache -> Optimización de Página ->
[4] Ajustes de Medios. - Activación: Me aseguré de que la opción
Lazy Load para las Imágenesestuviera en ON. - ¿Qué hace?: Esto hace que las imágenes que están al final de la página (fuera de la pantalla visible) solo se carguen cuando el usuario hace scroll hacia ellas. ¡Un ahorro de tiempo y datos brutal!
Conclusión: Los Resultados
Después de realizar estos ajustes y purgar toda la caché con el botón de «Purgar Todo», volví a ejecutar el test de PageSpeed Insights. El resultado fue increíble. La puntuación de rendimiento en móviles pasó de un mediocre 54 a un excelente 95. El LCP bajó de 23.8 segundos a menos de 3.
La optimización no es un lujo, es una necesidad para cualquier tienda online. Con las herramientas correctas como LiteSpeed Cache, está al alcance de todos. ¡No dejes que un sitio lento te haga perder más ventas!