La voz del bazar
Publicado: 2024-02-14Cualquiera que haya ido de compras el día antes de un gran día festivo conoce el dolor de dar vueltas en busca de un lugar de estacionamiento y luchar para conseguir artículos que otras cincuenta personas buscan. Esta no es una experiencia que nadie quiera replicar en su tienda de comercio electrónico, pero podría hacerlo si no se esfuerza por mejorar el rendimiento de su sitio web.
Vale, vale, tal vez estemos siendo un poco hiperbólicos. No hay nada tan malo como tratar de encontrar una papa medio decente mientras tu canción navideña menos favorita suena en el sistema de sonido de la tienda. Sin embargo, sabemos que a los clientes les encanta la comodidad que ofrecen las compras en línea. Casi el 70% de los consumidores tienen en cuenta la velocidad del sitio cuando están dispuestos a comprar en un minorista en línea. Y la mayoría de los compradores online esperan un tiempo de carga de la página de 3 segundos o menos.
Si últimamente no ha revisado el rendimiento de su sitio web, ya es hora de hacerlo. A continuación se explica cómo evaluar su rendimiento actual, además de algunos pasos que cualquiera puede seguir para optimizar un sitio de comercio electrónico y lograr una experiencia de compra rápida.
Capítulos:
- Por qué es importante el rendimiento del sitio web
- Las 7 métricas principales de rendimiento del sitio web
- Cómo medir el rendimiento de tu sitio web
- Cómo mejorar el rendimiento de su sitio web de comercio electrónico
- El rendimiento del sitio web tiene que ver con la necesidad de velocidad
Por qué es importante el rendimiento del sitio web
¿Realmente importa si no alcanzas esa marca de carga de 3 segundos? Sí, lo hace. No priorizar la velocidad de carga del sitio web disminuye la calidad de su experiencia de usuario, y eso es malo en múltiples sentidos.
En primer lugar, y lo más obvio, los tiempos de carga más altos significan una mayor tasa de rebote. Incluso los usuarios que se quedan durante las primeras cargas lentas de la página pueden abandonar su sitio antes de realizar una compra.
Es probable que las tasas de conversión iniciales más bajas vayan acompañadas de una menor lealtad en general. Los clientes que recuerdan su experiencia de compra deficiente tienen menos probabilidades de volver a intentarlo de nuevo y no querrán seguir enlaces que los dirijan a su sitio.
El mal rendimiento del sitio web también afecta su clasificación SERP de Google. Debido a que el algoritmo del motor de búsqueda prioriza la experiencia del usuario, las páginas con una velocidad de carga lenta aparecen hacia abajo en los resultados de búsqueda. Los medios más pequeños que compiten por la atención podrían perder frente a sus competidores más rápidos.
Las 7 métricas principales de rendimiento del sitio web
El tiempo de carga de la página no es una métrica de rendimiento del sitio web independiente. Es una evaluación global que reúne múltiples métricas. Cuatro de estas métricas son Core Web Vitals de Google:
- Largest Contentful Paint mide la velocidad de carga del elemento de página más grande que los usuarios pueden ver "en la mitad superior de la página", es decir, sin desplazarse hacia abajo.
- La interacción con Next Paint mide la capacidad de respuesta de una página a las interacciones, como hacer clic en el botón "agregar al carrito" o escribir información en un formulario.
- El retardo de la primera entrada mide el intervalo de tiempo entre el momento en que un usuario interactúa con su sitio web (por ejemplo, haciendo clic en el botón "agregar al carrito") y el momento en que su navegador comienza a procesar esa solicitud.
- El cambio de diseño acumulativo mide la frecuencia con la que el contenido de la página se mueve mientras se carga.
Google considera estos aspectos más importantes porque tienen el mayor efecto en la experiencia del usuario. Sin embargo, hay otras cuatro métricas que también capturan partes importantes de la experiencia del usuario:
- El tiempo hasta el primer byte mide la velocidad a la que su proveedor de DNS comienza a entregar el contenido de su sitio web después de recibir la solicitud.
- El tiempo total de bloqueo mide cuánto tiempo tarda una página web en cargarse lo suficiente como para que un usuario pueda interactuar con ella (ya que los navegadores que están en medio de la carga de páginas no pueden procesar las interacciones).
- First Contentful Paint mide cuánto tiempo tarda en renderizarse el primer contenido de su sitio web
Si desea profundizar en cualquiera de estas métricas, el sitio web.dev de Google explica más sobre por qué cada una es importante y cómo medirlas. O simplemente puede seguir leyendo mientras analizamos la medición del rendimiento de su sitio.
Cómo medir el rendimiento de tu sitio web
Medir el rendimiento de su sitio es fácil con PageSpeed Insights gratuito de Google. Esta herramienta evalúa su sitio según las métricas enumeradas anteriormente y lo clasifica como bueno, necesita mejoras o deficiente. También recibirá notas sobre el rendimiento, la accesibilidad, el uso de las mejores prácticas y el SEO de su sitio.
Hay una opción para ver el rendimiento de su sitio en dispositivos móviles frente a dispositivos de escritorio y consejos para ayudarlo a optimizar su sitio. Se obtiene mucha ayuda por el bajo precio de vivir en el ecosistema web de Google y, seamos realistas, eso ya está sucediendo.
Cuando consulte su informe, podrá observar que el tiempo total de bloqueo está excluido del cuadro "Evaluación de Core Web Vitals". Desplácese hacia abajo hasta el cuadro Rendimiento y luego mire la tabla Métricas para ver los resultados.
PageSpeed Insights hace que sea fácil comprender por qué su sitio obtuvo las clasificaciones que obtuvo con gráficos codificados por colores y consejos personalizados. Continúe y ejecute una prueba ahora (lo único que necesita son unos segundos) para que pueda obtener una referencia del rendimiento de su sitio y ver dónde puede mejorar.
Cómo mejorar el rendimiento de su sitio web de comercio electrónico
Si todavía estás aquí, asumiremos que tu evaluación de Core Web Vitals mostró que tienes trabajo por hacer. No hay vergüenza en eso. ¡Ni siquiera el sitio web.dev de Google pasa la evaluación! Estos son nuestros mejores consejos para ayudarle a mejorar el rendimiento de su sitio web de comercio electrónico y las herramientas que necesita para hacerlo realidad.
1. Reduzca las solicitudes HTTP
Las solicitudes HTTP existen en el centro de la carga de páginas web. No necesita conocer los detalles técnicos aquí, solo que un navegador debe realizar estas solicitudes para cargar archivos CSS, scripts, imágenes y otro contenido en su página. Cada solicitud requiere que el navegador envíe un mensaje a su proveedor de alojamiento web, que luego debe responder con el contenido apropiado.
Cuantas más solicitudes HTTP tenga, más tiempo le llevará completarlas todas. Imagínese si fuera a un restaurante y primero pidiera agua y luego, cuando regresara el camarero, pidiera un refresco. Cuando trajeron el refresco, pediste un aperitivo. Y finalmente, cuando llegó el aperitivo, ya habías decidido tus platos principales. Le tomaría mucho tiempo conseguir y terminar su comida, sin importar qué tan rápido trabajara su camarero.
Dele un descanso a su servidor (web) eliminando solicitudes HTTP innecesarias. Si no necesita un script o un archivo CSS, no haga referencia a él en el encabezado de su página. También puedes intentar reducir el contenido multimedia para aumentar la velocidad de carga de tu página.
2. Utilice HTTP/2
No todas las solicitudes HTTP son iguales. HTTP/2, un estándar que debutó en 2015, viene con capacidades que ayudan a que sus páginas web se carguen más rápido. Por un lado, permite a los desarrolladores priorizar qué elementos se cargan primero, por lo que puede indicar a los navegadores que soliciten recursos ligeros antes que scripts más grandes. También puede servir a múltiples recursos a la vez. Para volver a nuestra metáfora del restaurante, HTTP/2 le permite dar su pedido completo de una vez para que el camarero pueda entregárselo más rápidamente.
KeyCDN tiene una prueba HTTP/2 gratuita para determinar si su sitio admite el protocolo HTTP/2. O, si desea verlo más de cerca, abra las herramientas de desarrollo de su navegador, navegue hasta la pestaña de red y busque la columna "Protocolo". (Es posible que deba hacer clic derecho en la lista de columnas y agregar Protocolo).
La compatibilidad con HTTP/2 la determina su servidor web, por lo que es el recurso al que recurrir si necesita habilitar el protocolo. El proceso es diferente para cada proveedor.
3. Elimina redirecciones innecesarias
Muchas empresas emplean redireccionamientos para evitar la putrefacción de los enlaces durante las revisiones del sitio web. Sin embargo, cada vez que redirige a un usuario a una nueva página, lo obliga a esperar a que se cargue otra página. Especialmente redireccionamientos que conducen a otro redireccionamiento: ¡no, gracias! Cuando el usuario llegue a la URL real, ya estará listo para cerrar su página.
Los redireccionamientos tienen la costumbre de acumularse con el tiempo. Eso significa que debes auditarlos periódicamente; Es especialmente importante hacerlo después de cualquier rediseño o remodelación de su sitio web.
Screaming Frog SEO Spider puede ayudarle a comprobar todo su sitio en busca de redireccionamientos e incluso detectar cadenas y bucles de redireccionamiento por usted. También puedes usar la barra de herramientas SEO de Ahrefs para verificar página por página, pero no lo recomendamos. A menos que tengas una obligación de la que realmente quieras salir.
4. Limitar scripts externos
La mayoría de los desarrolladores utilizan scripts de terceros para agregar funciones que no tienen los recursos para codificar internamente. Sin embargo, incorporar scripts externos siempre es riesgoso en términos de velocidad de la página. No tienes control sobre el código, por lo que no puedes hacer nada si el script tarda en cargarse.
Los scripts de carga lenta hacen que las páginas tarden más en cargarse y pueden causar problemas como saltos de contenido (medido por la métrica Cumulative Layout Shift).
Verifique cada página para asegurarse de que no se estén cargando scripts innecesarios. Por ejemplo, es posible que tenga habilitada una función de reseñas en su sitio en su conjunto, pero no necesita que ese script se incluya en las páginas creadas para navegar. También puede preguntarse si realmente necesita ese modal para recopilar los correos electrónicos de los clientes o si está desanimando a más compradores de los que atrae.
Más campanas y silbatos no siempre son mejores. Un sitio web simple con una buena experiencia de usuario puede fortalecer una tienda sobrediseñada.
5. Habilitar la carga diferida (asíncrona)
Cuando un navegador muestra un sitio web, su valor predeterminado es procesar cada solicitud en orden y pasar al siguiente comando solo después de finalizar la tarea actual. Los scripts grandes ralentizan todo el proceso, ya que un navegador debe cargar el archivo completo antes de poder pasar a representar el resto del contenido.
Evite este retraso indicando al navegador que cargue sus scripts de forma asincrónica, es decir, mientras continúa representando la página web. Simplemente agregue el atributo async a sus etiquetas de script (su código se verá así: <script src=”my_script.js” async></script>).
Algunos expertos recomiendan agregar las etiquetas <script> cerca de la parte inferior del contenido del cuerpo, ya que es posible que los navegadores más antiguos no puedan leer el atributo async, pero no es necesario hacerlo. Sería difícil encontrar un navegador que no pudiera manejar la etiqueta async.
6. Utilice diseños centrados en dispositivos móviles
La optimización del rendimiento del sitio web debe incluir el pensamiento móvil primero. Los teléfonos inteligentes son ahora la fuente de casi cuatro de cada cinco visitas a sitios web de comercio electrónico y dos de cada tres compras de comercio electrónico. Desafortunadamente, la web móvil sigue siendo un lastre. La mayoría de los sitios tienen tiempos de carga mucho más largos en dispositivos móviles. Con más del 50% de los visitantes móviles listos para abandonar el barco si un sitio tarda más de 3 segundos en cargarse, es probable que los minoristas de comercio electrónico estén perdiendo muchos negocios.
Casi todos los sitios web publicados hoy en día son responsivos, pero los diseñadores que codifican para computadoras de escritorio y luego optimizan para dispositivos móviles pueden estar yendo en el orden incorrecto. El uso de emuladores de teléfonos móviles para diseñar pantallas pequeñas pone en primer plano las necesidades de esta creciente audiencia.
Además, es fácil: las herramientas de desarrollo de Google Chrome le permiten ingresar al "modo de dispositivo" para ver cómo se verá su sitio en pantallas más pequeñas.
Diseñar para teléfonos móviles también requiere que aproveches al máximo el espacio limitado de la pantalla, lo que puede significar que optes por menos elementos decorativos que puedan ralentizar una página. También querrás simplificar la navegación y las interacciones en lugar de buscar experiencias llamativas o únicas que requieran scripts y complementos externos.
Si está trabajando con un sitio existente, probablemente no pueda implementar esta práctica en este momento. Téngalo en cuenta para su próximo rediseño.
7. Comprimir archivos basados en texto con gzip
Puede que los archivos HTML y CSS no parezcan demasiado complicados de cargar, pero cuando cuentas en milisegundos, cada byte importa. La compresión reduce el tamaño de los archivos basados en texto para que puedan viajar más rápidamente desde su servidor hasta el navegador del cliente. Gzip es el marco de compresión más común, pero Brotli y Deflate también funcionan bien para acelerar su sitio web.
Esta es otra característica que está configurada en el lado del hosting. La mayoría de los hosts lo habilitan de forma predeterminada, pero es bueno verificar el suyo mediante una prueba de compresión HTTP gratuita. Si descubre que su contenido no está comprimido, es hora de comunicarse con su proveedor de alojamiento.
8. Minimizar archivos CSS, JavaScript y HTML
Los marcos de compresión como Gzip no son los únicos que ahorran bytes. También puedes minimizar tus archivos de texto eliminando cualquier cosa que no sea una parte clave del código, como comentarios, formato o nombres de variables largos. Muchos de estos elementos son útiles para los desarrolladores humanos, pero los navegadores web no los necesitan para mostrar su página web directamente.
No es necesario revisar y eliminar comentarios, espacios y pestañas adicionales usted mismo. Minifier.org ofrece una herramienta gratuita que puede manejar CSS y JavaScript. Web.dev de Google recomienda este minificador de HTML gratuito.
Si está buscando herramientas que puedan minimizar masivamente, el módulo PageSpeed de Google funciona con servidores web Apache o Nginx y minimiza automáticamente sus archivos. Sin embargo, la instalación de herramientas como esta o CSSNano puede requerir que llame a TI.
9. Optimizar imágenes y vídeos
Los archivos multimedia a menudo disminuyen el rendimiento del sitio web simplemente porque son muy grandes. Los comerciantes de comercio electrónico, que dependen en gran medida de imágenes y videos, deben ser diligentes en la optimización de estos archivos para reducir la carga en las conexiones a Internet de los visitantes.
La parte fácil de optimizar imágenes es cambiar su tamaño. Ningún archivo debe exceder los 20 megabytes (MB), pero en realidad, sólo las imágenes destacadas deben tener ese tamaño. Shopify recomienda a los comerciantes que mantengan las imágenes en torno a los 500 kilobytes (KB) si es posible, aunque permiten que algunos sitios necesiten archivos de hasta 2 MB de tamaño. Probablemente tendrás que comprimir tus imágenes para alcanzar estos objetivos. Afortunadamente, existen muchas herramientas de compresión de imágenes gratuitas que puedes utilizar.
Una vez que haya reducido el tamaño de los archivos, asegúrese de utilizar principios de diseño responsivo para mantener la velocidad para los usuarios que cargan su sitio desde dispositivos más pequeños. MDN Web Docs, administrado por Mozilla, tiene un bonito tutorial de imágenes responsivas que puedes seguir si eres nuevo en el tema.
10. Aprovecha el almacenamiento en caché del navegador
Los navegadores web pueden almacenar archivos localmente en las máquinas de los usuarios, lo que acelera los tiempos de carga para los visitantes habituales. En lugar de contactar a su servidor para cada archivo, los navegadores pueden extraer recursos almacenados en caché de la memoria local de la máquina.
El almacenamiento en caché es una solución excelente para la mayoría de los comerciantes de comercio electrónico, ya que sus activos permanecen bastante estáticos. Si realiza una revisión importante del sitio o reemplaza imágenes de productos, querrá asegurarse de que los navegadores tengan instrucciones para volver a descargar el nuevo contenido y reemplazar los activos almacenados en caché. Sin embargo, esto es algo bastante raro para la mayoría de los minoristas en línea, por lo que configurar el almacenamiento en caché es el camino a seguir.
Su proveedor de alojamiento web es, una vez más, el responsable de la configuración de almacenamiento en caché. Querrá encontrar su documentación y seguir las instrucciones para habilitar los cachés locales y establecer fechas de vencimiento (que indican a los navegadores con qué frecuencia deben actualizar los activos almacenados en caché de su sitio).
11. Utilice una red de entrega de contenido (CDN)
Los cachés del navegador solo ayudan a las audiencias que han visitado su sitio web anteriormente. Las redes de entrega de contenido, o CDN, almacenan activos lo más cerca posible de cada visitante para reducir los tiempos de carga.
Las CDN no dependen de máquinas locales para almacenar activos. Simplemente distribuyen sus activos a una red de servidores en varias ubicaciones. Eso significa que en lugar de tener un servidor en Virginia que responda a todas las solicitudes, puede tener un servidor en Virginia, uno en California, uno en Illinois, etc. Las empresas que atienden a audiencias internacionales pueden trabajar con CDN internacionales, por lo que tienen servidores en varios países, regiones y continentes.
Cada vez que un navegador envía una solicitud para cargar su sitio web, esa solicitud se dirige al servidor que está geográficamente más cerca del usuario. Puede que no parezca un gran ahorro de tiempo, pero dado que las velocidades de carga de las páginas se miden en una escala muy pequeña, las CDN marcan una diferencia notable.
12. Audite periódicamente sus complementos
Los complementos, complementos y extensiones suponen un gran ahorro de tiempo para la mayoría de los desarrolladores web. Pero, al igual que los scripts externos, los complementos inflados pueden reducir la velocidad de su página. Mejore el rendimiento de su sitio web revisando su biblioteca de complementos para ver si hay elementos que ya no usa.
A veces, necesitas todos tus complementos, pero tus páginas aún se cargan demasiado lentamente. En ese caso, es hora de descubrir al culpable. Copie su sitio en un entorno de prueba, desactive todos sus complementos y pruebe la velocidad de carga de su sitio. Luego, habilite los complementos uno a la vez para determinar si un solo complemento está afectando sus métricas de rendimiento. (Asegúrese de habilitar, probar y luego deshabilitar cada complemento para no medir accidentalmente los efectos acumulativos).
Afortunadamente, con tantos complementos disponibles, es probable que puedas encontrar un reemplazo para cualquier herramienta lenta.
Otra opción es buscar complementos que hayan sido optimizados para la velocidad. Por ejemplo, nuestra tecnología de visualización de Calificaciones y Reseñas fue diseñada para mantener su sitio web funcionando rápidamente, y nuestros desarrolladores compartieron los pasos que tomaron para cumplir esa promesa. Encuentre herramientas creadas en este sentido, que utilicen prácticas recomendadas como minimizar y reducir archivos de script, almacenamiento en caché y carga diferida, para que sus auditorías sean muy sencillas.
13. Eliminar ventanas emergentes innecesarias
Sí, lo diremos. Las ventanas emergentes son muy impopulares. Conducen a una mala experiencia, especialmente en dispositivos móviles. Incluso si cree que sus ventanas emergentes están hechas con buen gusto y son útiles, los usuarios de Internet se enfrentan a un aluvión de modales, superposiciones y widgets de chat durante todo el día. Todo el mundo tiene fatiga por las ventanas emergentes y, si contribuyes, estás erosionando la confianza de tus consumidores.
La mayoría de las ventanas emergentes llaman a scripts externos y hacen referencia a recursos como imágenes y fuentes, todo lo cual debe cargar un navegador. Los modales que aparecen condicionalmente tienen que recopilar datos de audiencia antes de activarse, lo que también lleva tiempo. Y si su tiempo total de bloqueo es alto, es posible que los usuarios no puedan cerrar estos elementos mientras se muestra el resto de su sitio. Este retraso influiría en la percepción de los usuarios sobre la velocidad de su sitio, incluso si no hubiera una desaceleración real.
Sin embargo, la desaceleración es real, al igual que el disgusto casi universal por estas herramientas. Eliminarlos de su sitio es beneficioso para todos.
14. Elige los servicios más rápidos
Cuando un cliente hace clic en un enlace o escribe una URL, le dice a su navegador que consulte un servicio DNS para llevarlo al sitio de destino. Ese servicio DNS dirige el navegador a la dirección IP de su sitio. Luego, su navegador comienza a leer sus archivos HTML y a solicitar activos de su servidor o CDN para poder representar el sitio web que ha diseñado.
Son muchos servicios que se unen para hacer que su sitio aparezca. Si alguno de ellos es lento, la velocidad de su página se verá afectada negativamente. Es por eso que la opción más barata no es necesariamente la mejor opción para su infraestructura técnica.
Por ejemplo, muchos planes básicos de alojamiento de sitios web son compartidos. Esto significa que otros sitios web utilizan el mismo servidor que usted, por lo que un pico de tráfico de uno de ellos podría ralentizar los tiempos de carga. El alojamiento VPS (para sitios en crecimiento) o servidores de sitios web dedicados (para aquellos que pueden permitírselo) arrojarán mejores resultados.
También desea asegurarse de que su registrador de dominios, que maneja el alojamiento DNS, tenga un alto rendimiento. DNSPerf mantiene un registro continuo del rendimiento de DNS para que puedas ver por ti mismo cómo se comparan los distintos proveedores.
Por supuesto, la velocidad no sólo importa en los niveles superiores. Hablamos sobre encontrar complementos livianos y optimizados. También querrás pensar en servicios como tu software de seguridad y otras herramientas de backend. Aunque los clientes no interactúan con ellos directamente, aún pueden afectar el rendimiento de su sitio web de comercio electrónico.
15. Monitorear las operaciones del sitio web
Verificar el rendimiento de su sitio web de vez en cuando para ver si hay grandes problemas es una idea inteligente. Monitorear constantemente su sitio para estar al tanto en el momento en que surge un problema es aún más inteligente.
Puede invertir en herramientas que recopilen datos sobre la experiencia de sus usuarios para mostrar cómo funciona su sitio en el mundo real. Dado que muchos compradores lo visitarán desde configuraciones diferentes a la suya, el monitoreo de usuarios reales brinda una nueva perspectiva.
Otras herramientas fingen ser visitantes humanos y utilizan una serie de scripts para navegar por su sitio web y probar su rendimiento. Las configuraciones de monitoreo sintético como estas son más útiles para los equipos que buscan recopilar datos de pruebas controladas. Si está optimizando su sitio, el monitoreo sintético lo ayudará a detectar cambios que realmente marcan la diferencia. Estos sistemas también pueden ejecutar pruebas programadas con el objetivo de detectar problemas importantes antes de que sus clientes los encuentren.
Hay muchas herramientas que realizan ambos trabajos (y más):
- Site24x7 realiza un seguimiento de usuarios sintético y real por usted
- LogRocket monitorea a los usuarios e identifica errores e interacciones en el sitio con las que los usuarios suelen tener problemas.
- New Relic es un sistema de monitoreo sintético de extremo a extremo que se integra con casi todas las infraestructuras existentes.
Cualquiera que sea la herramienta que utilice, asegúrese de configurar las alertas para avisarle cuando algo salga mal. Cuanto más rápido solucione el problema, menos clientes decepcionará.
El rendimiento del sitio web tiene que ver con la necesidad de velocidad
A medida que las conexiones móviles e Internet se vuelvan más rápidas y aún más ubicuas, los estándares de los consumidores seguirán aumentando. Proporcionar una experiencia rápida y cómoda es una expectativa básica. Las empresas que puedan descubrir cómo sobresalir en dispositivos móviles y reducir esas velocidades de carga a un segundo o menos tendrán la oportunidad de capturar una mayor participación de mercado.
La experiencia del cliente que usted brinda está directamente relacionada con sus tasas de conversión y retención, y el rendimiento de su sitio web está directamente relacionado con esa experiencia del cliente. La optimización de sitios web no es un proyecto que pueda esperar a que llegue un día lluvioso. Es una parte esencial para atraer clientes a su sitio y generar más ventas.
Mejorar la velocidad de su sitio no es la única forma de llegar a más clientes. Consulte estas formas de aumentar el tráfico orgánico para mantener su impulso en las SERP.
