Paquete Full rendimiento
|
|
Limited Resell es una tienda en línea especializada en la venta de zapatillas deportivas. Ofreciendo una amplia gama de modelos, el sitio permite a los amantes de las zapatillas deportivas adquirir fácilmente y de manera segura los calzados más codiciados. Esta tienda en línea, construida con el CMS PrestaShop, recurrió a nuestra experiencia para garantizar su buen funcionamiento, especialmente en lo que respecta a su rendimiento técnico.
El desafío principal al que se enfrentaba Limited Resell era optimizar los tiempos de carga, un aspecto crítico para ofrecer una experiencia de usuario fluida y rápida.
En este estudio de caso, detallaremos nuestro enfoque para abordar este desafío. Comenzaremos con un análisis inicial del sitio para identificar los principales puntos de congestión. Luego, presentaremos las acciones prioritarias que recomendamos para mejorar los tiempos de carga. Finalmente, examinaremos los resultados obtenidos después de implementar estas acciones, mostrando una mejora significativa en el rendimiento general del sitio. |
|
Antes
Después
|
| antes | después | |
| Nota de performencia |
26/ 100
|
60/ 100
|
Caché del lado del servidor: Varnish
|
Con el fin de optimizar nuestra eficiencia, implementamos la caché del servidor Varnish en páginas específicas: la página de inicio, categorías, páginas de productos y páginas CMS.
Este proceso de implementación involucró varios pasos clave:
Como resultado de estos esfuerzos, logramos una reducción notable en los tiempos de carga de las páginas, reduciéndolos en casi un 50%. |
| antes | después | |
| Tiempo de construcción | 88ms | 46ms |
Implementación de carga diferidade imagenes
La técnica de Lazy Loading, también conocida como "carga diferida", resulta sumamente útil para optimizar el tiempo de carga de las páginas web. Consiste en retrasar la carga de las imágenes, especialmente las que se encuentran por debajo de la línea de flotación de la página. Gracias a este método, la página inicial se carga mucho más rápido, ofreciendo una mejor experiencia al usuario.
En el caso de este sitio en particular, implementamos un módulo diseñado específicamente para esta tarea. Este módulo analiza el código HTML de cada página y realiza las modificaciones necesarias para evitar la carga inmediata de las imágenes que se encuentran por debajo de la línea de flotación. En su lugar, estas imágenes se reemplazan por un píxel transparente. El navegador solo carga las imágenes que se encuentran por encima de la línea de flotación, lo que evita docenas de transferencias de archivos innecesarias. Gracias a esta optimización, la cantidad de archivos descargados en el sitio se redujo de 244 a 88.
Los visitantes de este sitio web disfrutan de una experiencia de carga y visualización considerablemente mejorada, con páginas que se cargan más rápido, lo que contribuye a retener su atención y mejorar su satisfacción en general.
|
|
| antes | después | |
| Archivos cargados | 244 archivos | 88 archivos |
| Peso de la página | 11,3 MB | 6,98 MB |
Precarga de fuentes y repatriación de las fuentes de Google
Las fuentes utilizadas en la tienda en línea se han incorporado directamente en el tema de la tienda en lugar de alojarse en servidores externos como fonts.google.com. Este enfoque ofrece varias ventajas significativas:
- Reducción de la cantidad de archivos a transferir: Al incorporar las fuentes en el tema de la tienda, hemos reducido considerablemente la cantidad de archivos necesarios para cargar la página correctamente. Menos archivos significan un tiempo de carga más corto, lo que mejora la experiencia del usuario.
- Optimización del "Total Blocking Time": El "Total Blocking Time" (tiempo total de bloqueo del navegador antes de que se muestre el contenido) es un factor crítico para la eficiencia de la carga de la página. Al evitar recurrir a servidores externos para las fuentes, hemos reducido el tiempo de espera del navegador, lo que se traduce en una visualización más rápida de los textos y el contenido. Los visitantes de la tienda disfrutan así de una experiencia de navegación más fluida y receptiva.
- Control y estabilidad: Al tener un control total sobre las fuentes incorporadas en el tema, nos aseguramos de su disponibilidad constante y su estabilidad. Se evitan posibles problemas relacionados con servidores externos, como caídas o retrasos en la carga, garantizando así una experiencia del usuario confiable.
En resumen, la integración de las fuentes de caracteres en el tema de la tienda es una medida estratégica que mejora la velocidad de carga, reduce el tiempo de bloqueo del navegador y fortalece la estabilidad de la tienda en línea, ofreciendo una experiencia más satisfactoria para el cliente.
| antes | después | |
| Tiempo total de bloqueo | 1300ms | 470ms |
Mejora de los Web Vitals: Acciones diversas
Se han implementado mejoras adicionales en la tienda en línea. Estas mejoras fueron diseñadas específicamente para mejorar los indicadores esenciales de SEO de Google, también conocidos como Core Web Vitals (Señales Web Esenciales). Hemos realizado varias acciones complementarias para garantizar un mejor rendimiento y una experiencia de usuario óptima:
- Implementación del CDN Cloudflare: Hemos integrado con éxito el servicio de Red de Distribución de Contenido (CDN) de Cloudflare. Esta estrategia ha optimizado la entrega de contenido al reducir la latencia del servidor, lo que se traduce en una carga de página más rápida.
- Cambio del módulo de presentación de diapositivas para una carga de imágenes más rápida: Hemos reemplazado el módulo de presentación de diapositivas existente por una solución más eficiente. Este cambio ha acelerado significativamente la carga de imágenes, mejorando la experiencia de navegación general del usuario.
- Precarga de imágenes externas relacionadas con el módulo de cookies: Hemos implementado una estrategia de precarga para las imágenes externas asociadas al módulo de cookies. Esto garantiza que estos elementos se carguen de manera óptima, evitando posibles retrasos y mejorando la experiencia general del usuario.
- Resolución de un error 400 en el distintivo de Google: Identificamos y resolvimos con éxito un error 400 relacionado con el distintivo de Google. Esta corrección ha contribuido a una mejor integración con los servicios de Google, que es esencial para el SEO.
- Evaluación comparativa y optimización de las llamadas AJAX: Realizamos análisis de rendimiento en profundidad y comparaciones de referencia para optimizar las llamadas AJAX en el sitio. Esto ha resultado en una reducción significativa en los tiempos de carga de las páginas.
Para obtener información más detallada sobre los indicadores de Google, tal como aparecen en la Consola de Búsqueda, junto con consejos para resolver problemas relacionados con la velocidad de su tienda en línea, lo invitamos a consultar nuestro artículo dedicado disponible aquí: Enlace al artículo.
| antes | después | |
| Largest Contentful Paint | 3.5s | 1.0s |
| Cumulative Layout Shift | 1,13 | 0 |
| Tiempo de carga | 8.1s | 5,8 s |