A medida que la competencia en el comercio electrónico crece más feroz, los minoristas están buscando nuevas formas de destacar, y la frontera competitiva se mueve constantemente hacia la tecnología. El advenimiento del multicanal ha hecho que el viaje del cliente sea muy complejo, pero una cosa es cierta: La velocidad importa más que nunca. El anuncio más reciente de Google de la actualización de la experiencia de la página , un nuevo algoritmo de clasificación diseñado para juzgar las páginas web en función de cómo los usuarios perciben la experiencia de interactuar con ellos, es una clara señal de que el gigante de las búsquedas está enfatizando la velocidad percibida, la velocidad a la que un usuario percibe una página como cargada.
El nuevo recorrido del cliente para eCommerce es instantáneo. el 53% de los visitantes abandonará un sitio web móvil si tarda más de tres segundos en cargarse. Al mismo tiempo, cada retraso de un segundo en los tiempos de carga se ha relacionado con una caída del 7% en las conversiones. Las nuevas tecnologías ahora permiten velocidades de sitios web que antes eran imposibles. Con una combinación de frontends portátiles modernos, renderizado del lado del servidor (SSR), páginas móviles aceleradas (AMP) y tecnologías CDN modernas, las cargas de páginas de sub-segundo segundo no solo son posibles, sino que se están convirtiendo en el nuevo campo de batalla competitivo en el comercio electrónico.
Índice
- La importancia de la velocidad del sitio web para el comercio electrónico
- Velocidad = dinero
- Qué es AMP y cómo funciona
- Las empresas emergentes minoristas superan a sus competidores multimillonarios
- ¿Qué es SSR y cómo funciona?
- ¿Qué son las CDN modernas y la computación perimetral?
- Resumen
La importancia de la velocidad del sitio web para el comercio electrónico
La velocidad del sitio web afecta a toda la estrategia digital, desde la visibilidad (SEO y SEM), pasando por el tráfico, la experiencia del usuario y, en última instancia, las conversiones y los ingresos. Esto es el resultado directo del creciente enfoque de Google en el móvil y la velocidad.
El gigante de las búsquedas ha estado en una búsqueda de una década para aclarar que la velocidad del sitio web importa. Han implementado múltiples actualizaciones enfocadas en móviles para consolidar la importancia de la velocidad del sitio web móvil como crucial para ocupar un lugar alto en los resultados de búsqueda y SEM.
Estos esfuerzos incluyen la primera indexación móvil en 2016, AMP con anuncios móviles en 2017, la actualización de velocidad en 2019 y la próxima actualización de ranking Page Experience que se publicará a principios de 2021. Por último, pero no menos importante, la insignia de vergüenza de Google pronto se lanzará y marcará sitios web notoriamente lentos y advierte a los usuarios que navegan al sitio desde la Página de Resultados del Motor de Búsqueda (SERP).
Para ser justos, además de introducir cambios algorítmicos y avergonzar a los sitios web para enfatizar el papel de la velocidad del sitio, Google también ha creado una gama de herramientas para hacer una web más rápida una realidad. Esto incluye varias herramientas para facilitar y medir la velocidad del sitio web, como PageSpeed Insights, AMP, la Calculadora de Impacto y el Móvil Speed Scorecard, por nombrar algunas.
Fuente: Prueba mi sitio
Google’s Test My Site es una herramienta que le permite realizar una auditoría rápida de su sitio y estimar el impacto potencial en los ingresos anuales si se implementan las recomendaciones de velocidad del sitio.
El esfuerzo para crear estas herramientas es de interés de Google, ya que el 58% de las búsquedas y el 65% de los ingresos publicitarios de la empresa provienen de dispositivos móviles.
Programa de demostración 1-contra-1
Programe una conversación consultiva para saber cómo el XDN de Edgio (Layer0) puede ayudarle a lograr cargas de página de sub-segundo. ¡Haga clic aquí!
Velocidad = dinero
Es de conocimiento común que la velocidad del sitio web afecta la experiencia del cliente y los ingresos, especialmente en dispositivos móviles:El 70% de los consumidores afirma que la velocidad del sitio afecta su voluntad de compra. Amazon calculó que un segundo de retraso en la carga de la página costaría $1,6 mil millones en ingresos perdidos al año. Para vender más, debe asegurarse de que dondequiera que llegue un visitante, por ejemplo, su listado de productos o páginas de descripción de productos, el contenido se carga rápidamente y sin esfuerzo. Asimismo, el proceso de pago debe ser rápido y sencillo. Esto construye la base para el nuevo compromiso y hace que el comprador se incline a regresar y comprar más de usted.
Sin embargo, tal como están las cosas hoy en día, cada vez es más difícil ofrecer experiencias móviles rápidas. Además de sitios web mal optimizados e hinchados con imágenes sobredimensionadas y código desordenado, una página móvil hace un promedio de 214 solicitudes de servidor , de las cuales un centenar están relacionadas con anuncios. Como resultado, una página promedio tarda 15,3 segundos en cargarse en un dispositivo móvil (en 4G). Algunos de los minoristas más competitivos pueden reducir los tiempos de carga de la página móvil a solo 3-5 segundos, pero todavía hay margen para mejorar. Y esto no es un problema que 5G pueda resolver.
Es el compromiso irreconciliable entre anuncios, personalización, análisis y seguimiento y una excelente experiencia de usuario
La base para la velocidad
El primer bloque de construcción en la entrega de cargas de primera página ultrarrápidas es usar AMP para el tráfico de búsqueda y SSR para los otros canales. El segundo paso es asegurar cargas ulteriores de página. Esto se hace con frontends portátiles construidos para la velocidad, como Progressive Web Apps (PWA). El último pilar es una CDN moderna con capacidades de computación perimetral para exprimir cada milisegundo posible fuera de las cargas de página.
De hecho, Google ha recomendado un viaje ideal para el cliente en el que un sitio web primero entrega una página AMP a los usuarios de búsqueda y luego los transita a la versión completa de PWA del sitio en páginas posteriores. Y dado que casi la mitad del tráfico del sitio web de los minoristas proviene de la búsqueda orgánica, el soporte tanto de AMP como de PWA tiene sentido.
Este tema fue ampliamente discutido en Google I/O 2017.
Con las PWA, los desarrolladores pueden ofrecer experiencias altamente atractivas y rápidas que rivalizan con las aplicaciones nativas. Sin embargo, en cuanto al tráfico generado por búsquedas, AMP es la opción más rápida posible con tiempos de carga medianos de medio segundo.
Por lo tanto, en pocas palabras, subir más alto en SERP requiere una combinación de AMP y SSR para primeras cargas rápidas y PWA para transiciones de navegación ultrarrápidas. El problema es que es más fácil decirlo que hacerlo, ya que requiere que los sitios web empresariales de comercio electrónico agreguen soporte SSR, que es una tarea compleja por sí sola, y mantengan dos sitios web separados, uno para el PWA (normalmente escrito en React, Angular, Vue, Next o Nuxt) y el otro en AMP HTML.
Las páginas AMP son tan rápidas porque son pre-recuperadas, pre-renderizadas y almacenadas en caché por una CDN (Content Delivery Network). La caché AMP de Google ofrece la mayoría de las páginas AMP.
Por lo tanto, los fundamentos de la velocidad del sitio web consisten en estos tres elementos clave:
SSR + AMP para primeras cargas rápidas
Desde SERP, los usuarios son dirigidos a una versión AMP de la página para cargas de primera página increíblemente rápidas. SSR hace lo mismo para los visitantes de cualquier otro canal, incluyendo correo electrónico, redes sociales y referencias.
Frontend portátil PWA para velocidades de navegación ultrarrápidas
PWA se hace cargo de proporcionar velocidades de navegación instantáneas a medida que el visitante navega a través de las páginas posteriores del sitio web. De esta manera, los consumidores disfrutan de una experiencia mejorada de cargas rápidas de primera página y transiciones instantáneas de página más allá de solo la primera página.
Prefetching predictivo + CDN moderno
La prebúsqueda predictiva y una CDN moderna con capacidades de computación perimetral le permiten transmitir datos dinámicos al perímetro y desde allí a los navegadores de los usuarios antes de que lo soliciten. Esto le permite almacenar en caché y servir lo que los consumidores están esperando: Los datos JSON que se traducen en los diferentes productos que tiene en stock, sus precios e información. Así es como los sitios web de comercio electrónico y otros sitios web basados en bases de datos pueden ofrecer experiencias instantáneas y permanecer 5 segundos por delante de los toques de los consumidores (por ejemplo, obtener una página de descripción de producto en la que es más probable que un usuario haga clic antes de hacer clic en el enlace).
Ahora que entendemos los tres pilares que forman la base de la velocidad del sitio web, podemos profundizar en cada uno de ellos.
Qué es AMP y cómo funciona
Google AMP es un framework de código abierto para crear páginas web móviles con tiempos de carga medianos de 500 ms. AMP crea experiencias mejores y más rápidas en la web móvil simplificando el HTML y aplicando estrictas limitaciones en CSS y JavaScript. Estas páginas se almacenan en caché y se pre-renderizan en el servidor de Google, que es la forma en que se entregan tan rápidamente.
Los beneficios de AMP
Las páginas AMP permiten cargas medianas de páginas de 500 ms para el tráfico del SERP de Google. Estas velocidades son posibles porque los servidores de Google pre-recuperan y pre-renderizan el contenido AMP en el navegador de un usuario antes de hacer clic en el enlace de la página AMP. Para el sitio de comercio electrónico promedio, la búsqueda de Google (tanto orgánica como de pago) representa aproximadamente el 50% de su tráfico, por lo que estas ganancias pueden aplicarse a un gran porcentaje de su tráfico.
Los sitios que usan AMP también ven beneficios en tasas de rebote reducidas, ya que los usuarios que normalmente pueden rebotar mientras esperan que una página se cargue ahora se encontrarán con una experiencia ultrarrápida.
Cómo AMP + PWA cambia el juego
La combinación AMP y Progressive Web Apps (PWA) cubre todo el recorrido del cliente desde la búsqueda, haciéndolo rápido de extremo a extremo. El comprador carga la página AMP desde un SERP de Google, y luego, mientras navega por la página AMP, los recursos necesarios para la versión PWA del sitio se cargan en segundo plano. De esta manera, cuando el usuario realiza una acción (por ejemplo, hace clic en cualquier lugar del sitio), la PWA ya ha comenzado a precargar el contenido para la página siguiente, y a partir de ahí, todas las transiciones restantes son transiciones de navegación renderizadas en el lado del cliente y no nuevas navegaciones.
¿Por qué no todo el mundo usa AMP?
La combinación AMP y PWA es una combinación hecha en el cielo para la velocidad, pero es una pesadilla en cuanto al desarrollo. Apoyar la tecnología implica crear dos versiones de su sitio: Una en el lenguaje en el que está escrito su interfaz (que tiende a ser pesado en JavaScript o CSS) y otra que sigue los estándares del proyecto AMP. Y es solo el comienzo: Cada corrección de errores, cambio de diseño, nueva característica, etc. puede requerir propagarse tanto a las bases de código AMP como a PWA.
El framework de React StoreFront y Layer0 facilitan mucho a los desarrolladores la compatibilidad con AMP en sus aplicaciones React.
Las empresas emergentes minoristas superan a sus competidores multimillonarios
Al utilizar la tecnología Layer0 AMP, el minorista de moda AKIRA no solo ofrece primeras cargas instantáneas desde búsquedas, sino que también supera a Amazon, Nordstrom, Zappos y otras grandes marcas para las frases clave.
Antes de utilizar la tecnología Layer0, las cargas de la primera página de AKIRA promediaron poco impresionantes 4,8 segundos, y las páginas posteriores se cargaron en 2,5 segundos.
AKIRA fue capaz de mejorar estos resultados y llegar a cargas de página sub-segundo utilizando tecnología avanzada integrada en Edgio (Layer0): Un eCommerce PWA con renderizado del lado del servidor y conversión AMP, Layer0 CDN-as-JavaScript que ofrece una tasa de aciertos de caché de más del 95% para contenido dinámico en el perímetro (y manteniendo el sitio web 5 segundos por delante del comprador), y el backend Serverless JavaScript de Layer0 para frontend para optimizar servidores y API.
Con Edgio (Layer0) el minorista vio un impulso inmediato en muchas áreas:
- Los tiempos de primera carga disminuyeron un 70,8% a cerca de un segundo
- Las transiciones de navegación cayeron a unos asombrosos 500ms
- La mitad de las páginas del sitio web ahora cargan en menos de 500ms
- La tasa de conversión móvil aumentó un 37,25%
Lightthouse también es un gran reflejo de estas mejoras: La puntuación de rendimiento de AKIRA obtuvo un aumento de 36 puntos, superando el 75% de los sitios en la web y ofreciendo una mejor experiencia de navegación del cliente.
Lea el estudio de caso completo de AKIRA .
Annie Selke es otro ejemplo estelar de cómo invertir en la velocidad del sitio web puede ayudar a un minorista a subir a la página de resultados del motor de búsqueda.
Antes de saltar en Edgio (Layer0), la tienda de decoración y hogar Annie Selke ni siquiera aparecía por encima de los resultados de búsqueda de Google. Hoy en día, con un aumento del 32% en el tráfico orgánico y un aumento del 40.41% en el tráfico orgánico móvil, supera a sus competidores multimillonarios.
Si usted está interesado, también hay un estudio de caso de Annie Selke en nuestro sitio web donde entramos en el detalle.
Para los minoristas en línea como AKIRA y Annie Selke, un sitio web móvil de buen rendimiento es una fruta baja. Puede ser justo lo que necesitan para hacer frente a la competencia implacable de gigantes del comercio electrónico como Amazon, Nordstrom y Zappos.
Cuanto más rápido sea el sitio, más alto se clasifica, como un SEO instantáneo garantizado. Hay muchos ejemplos en el portafolio de Edgio (Layer0) que lo demuestran. AKIRA, Annie Selke y Shoe Carnival son solo algunos de los que superan a muchos grandes nombres, incluyendo Amazon.
Layer0 ofrece una combinación de tecnología avanzada para acelerar el comercio electrónico:
- PWA de comercio electrónico con soporte de renderizado del lado del servidor y conversión AMP
- Prefetching predictivo
- CDN-as-JavaScript Ofrece una relación de aciertos de caché de más del 95% para contenido dinámico en el borde que mantiene el sitio web 5 segundos por delante del comprador.
- El backend Layer0 Serverless-JavaScript para frontend optimiza los servidores y las API.
Programa de demostración 1-contra-1
Programe una conversación consultiva para saber cómo Edgio (Layer0) puede ayudarle a lograr cargas de página de sub-segundo. ¡Haga clic aquí!
¿Qué es el renderizado del lado del servidor y cómo funciona?
El renderizado del lado del servidor (también conocido como SSR) es una técnica popular para representar una página PWA normalmente del lado del cliente en el servidor y luego enviar una página completamente renderizada al navegador. El paquete de JavaScript del cliente puede entonces hacerse cargo y la PWA puede funcionar de forma normal. SSR básicamente traduce páginas JavaScript a HTML, un lenguaje que tanto los rastreadores de búsqueda como los navegadores entienden en el servidor. Esto asegura que los navegadores y rastreadores de búsqueda puedan entregar e indexar fácilmente sus páginas.
Un beneficio importante de usar SSR tiene una aplicación que puede ser rastreada e indexada correctamente por cada motor de búsqueda. Esto ayuda con el SEO y proporcionar metadatos a los canales de redes sociales.
Los beneficios de SSR
SSR también puede ayudar a menudo con el rendimiento porque una aplicación completamente cargada se envía desde el servidor en la primera solicitud. Sin embargo, para aplicaciones no triviales, su kilometraje puede variar porque SSR requiere una configuración que puede ser un poco complicada y crear una carga de servidor más grande. Afortunadamente, hay servicios y herramientas, como frontends isomórficos y Layer0 con soporte SSR listo para usar.
Al final, si utilizar el renderizado del lado del servidor para su sitio web depende de sus necesidades específicas y de qué compensaciones tienen más sentido para su caso de uso.
¿Qué son las CDN modernas y la computación perimetral?
Edge Computing es una filosofía de red centrada en acercar la computación a la fuente de datos y reducir la latencia y el uso del ancho de banda en el proceso. El uso de muchas tecnologías diferentes puede implementar esto. Acercar la computación al perímetro de la red (el ordenador de un usuario, un dispositivo IoT o un servidor perimetral) minimiza la cantidad de comunicación a larga distancia que tiene que ocurrir entre un cliente y un servidor.
CDN con capacidades de computación de borde Le permite reducir el tiempo de viaje desde los servidores del sitio web al navegador del usuario transmitiendo el contenido al punto de presencia CDN (POP) más cercano al usuario (para que un usuario en San Francisco entregue contenido desde un POP en el sur de San Francisco mientras que un usuario en Nueva York recibe contenido desde un POP en Brooklyn).
Los beneficios de las CDN con la computación perimetral
Las CDN almacenan una versión en caché de su sitio web en múltiples ubicaciones para garantizar cargas de página más rápidas. Cada uno de estos POP contiene varios servidores de almacenamiento en caché responsables de la entrega de contenido a los visitantes dentro de su proximidad.
CDN-as-JavaScript de Layer0 lleva el concepto a otro nivel. Es una CDN consciente de la aplicación que entiende su aplicación. Utiliza el mismo lenguaje que sus desarrolladores de frontend ya conocen y le da un control total sobre el almacenamiento en caché. Como resultado, los sitios web que usan Layer0 ven ratios de aciertos de caché de más del 95% para el contenido dinámico en el perímetro.
Las capacidades de computación perimetral de Layer0 CDN-as-JavaScript te mantienen 5 segundos por delante del comprador al prerecuperar predictivamente las próximas páginas más probables y transmitirlas al borde antes de que se soliciten, por lo que se almacenan en caché y están listas para el usuario antes de tocar un enlace a ellas.
Resumen
Los largos tiempos de carga pueden arruinar la experiencia de un usuario y el ranking de búsqueda de un sitio web. AMP resuelve una parte de este problema – hace que la primera página de la búsqueda sea increíblemente rápida. Pero eso es solo la mitad de la batalla. Poner al día tu sitio web requiere ir más allá y un enfoque más holístico: Una combinación de tecnologías como Páginas móviles aceleradas (AMP), frontends portátiles modernos, renderizado del lado del servidor (SSR) y CDN con capacidades de computación perimetral.
Layer0 ayuda a los sitios web de comercio electrónico complejos y dinámicos a alcanzar velocidades de sub-segundo, al tiempo que aumenta la velocidad de desarrollo y el crecimiento de los resultados y reduce los costos de DevOps. También incluye un CDN-as-JavaScript que ofrece una relación de aciertos de caché del 95% o más para contenido dinámico, en comparación con solo el 15% para otras CDN.
Layer0 ofrece constantemente cargas medianas de página inferiores a 500 ms para grandes sitios web de comercio electrónico con docenas de etiquetas y scripts, sin mencionar precios dinámicos y búsquedas de inventario en tiempo real. Se sabe que estas ganancias de velocidad conducen a elevaciones de conversión del 15 al 30%, mejor visibilidad, alcance y, en última instancia, mayores ingresos.
Programe una conversación consultiva con un experto en velocidad de sitios para ver cómo podemos ayudarle a obtener una ventaja competitiva con un sitio web de comercio electrónico instantáneo!
