Transparencia y Rendimiento En GAB Developers, creemos que la mejor manera de demostrar nuestra capacidad técnica es aplicando nuestros estándares de calidad a nuestros propios activos digitales. Recientemente, realizamos una auditoría interna de nuestro blog corporativo y los resultados no cumplían con nuestras propias exigencias.
A pesar de tener un diseño cuidado, las métricas de rendimiento en dispositivos móviles mostraban una puntuación de 70/100 en Google PageSpeed Insights y un tiempo de carga que afectaba a la experiencia de usuario.
El objetivo de este artículo es documentar con total transparencia el proceso técnico que seguimos para revertir esta situación. Explicaremos cómo logramos llevar nuestra web al 90/100 y reducir el tiempo de bloqueo a 0ms, manteniendo el mismo diseño visual y utilizando el stack tecnológico que recomendamos habitualmente: Elementor y Hostinger.
El Reto: Optimizar un Stack Visual (Elementor + Astra)
Nuestro punto de partida era una instalación estándar con herramientas muy populares:
- Hosting: Hostinger (Servidores LiteSpeed).
- Tema: Astra Pro.
- Constructor Visual: Elementor Pro.
- Plugins de Diseño: Ultimate Addons for Elementor.
El desafío principal radicaba en que, aunque visualmente la web cumplía su función, la carga de recursos (CSS y JavaScript) no estaba optimizada. Teníamos librerías de estilos cargando en páginas donde no eran necesarias y scripts que bloqueaban el renderizado principal, penalizando nuestras Core Web Vitals. Era necesario intervenir el código y la configuración del servidor.
El Proceso Técnico: Las 3 Intervenciones Clave
Para solucionar el rendimiento sin sacrificar el diseño, aplicamos tres ajustes técnicos específicos:
1. Gestión Modular de Assets en Ultimate Addons
Detectamos que el plugin Ultimate Addons estaba cargando los estilos CSS y scripts JS de todos sus widgets (mapas, sliders, popups, etc.) en todo el sitio, independientemente de si se usaban o no en la página actual.
- La Solución: Accedimos a la configuración avanzada del plugin y desactivamos modularmente los widgets que no estábamos utilizando activamente en el diseño del blog.
- El Impacto: Redujimos significativamente el tamaño de la página al eliminar peticiones HTTP innecesarias.
2. Elementor: Carga de CSS Inline y Renderizado
Elementor ofrece opciones experimentales de rendimiento que, bien configuradas, marcan una gran diferencia.
- Carga de CSS: Cambiamos el método de carga a «CSS Inline». Esto permite que el navegador solo procese los estilos necesarios para el contenido visible, en lugar de descargar hojas de estilo completas que bloquean la visualización.
- Fuentes: Configuramos la carga de Google Fonts con la propiedad
font-display: swappara asegurar que el texto sea visible inmediatamente, evitando el parpadeo (FOIT).
3. Optimización de Servidor con LiteSpeed (Hostinger)
Al estar alojados en Hostinger, aprovechamos la tecnología de servidor LiteSpeed Enterprise.
- Configuración de Caché: Ajustamos el plugin LiteSpeed Cache para servir contenido estático de manera agresiva.
- Ejecución de JavaScript: Activamos la opción «Load JS Deferred» (Retrasar la ejecución de JS).
Explicación Técnica: Esta configuración instruye al navegador para que priorice la carga del HTML y el CSS (lo visual) y posponga la ejecución de los scripts de interactividad y seguimiento hasta que el usuario pueda ver el contenido. Esto es crucial para mejorar la métrica LCP (Largest Contentful Paint).
Los Resultados: Métricas Reales (Antes y Después)
Tras aplicar estas configuraciones y purgar la caché del servidor, los resultados en Google PageSpeed Insights validaron la estrategia.
Antes [70/100] vs. Después [90/100])
Más allá de la puntuación general de 90/100, el dato técnico más relevante es la reducción del TBT (Total Blocking Time) a 0ms. Esto significa que la web es interactiva desde el primer momento, eliminando cualquier sensación de lentitud o «lag» al hacer scroll o clic.
Conclusión
Este caso de estudio demuestra que es posible tener una web visualmente rica construida con Page Builders como Elementor y, al mismo tiempo, obtener un rendimiento técnico de alto nivel. La clave no está solo en las herramientas que se eligen, sino en la configuración precisa y el conocimiento técnico para optimizarlas.
Hemos aplicado a nuestra propio blog el mismo rigor y metodología que ofrecemos a nuestros clientes.
¿Necesitas mejorar los tiempos de carga y las métricas de tu sitio web?
En GAB Developers analizamos tu infraestructura actual y aplicamos soluciones de WPO avanzadas para maximizar el rendimiento de tu negocio.
