Home Blogs Velocidad vende: El comercio electrónico utiliza AMP, SSR, PWA y Edge Computing para pasar a Fifth Gear
Applications

Velocidad vende: El comercio electrónico utiliza AMP, SSR, PWA y Edge Computing para pasar a Fifth Gear

About The Author

Outline

A medida que la competencia en el comercio electrónico crece más feroz, los minoristas están buscando nuevas formas de destacarse, y la frontera competitiva se mueve constantemente hacia la tecnología. La llegada 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 la búsqueda está enfatizando la velocidad percibida la velocidad a la que un usuario percibe una página como cargada.

El nuevo recorrido del cliente para el comercio electrónico 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 segundo de retraso en los tiempos de carga se ha relacionado con una caída del 7% en las conversiones. Las nuevas tecnologías ahora están permitiendo velocidades de sitios web que antes eran imposibles. Con una combinación de frontend 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 subsegundos no solo son posibles, sino que se están convirtiendo en el nuevo campo de batalla competitivo en el comercio electrónico.

Tabla de contenidos

  • La importancia de la velocidad del sitio web para el comercio electrónico
  • Velocidad = dinero
  • Qué es AMP y cómo funciona
  • Las empresas minoristas superan a sus competidores multimillonarios
  • ¿Qué es SSR y cómo funciona?
  • ¿Qué son las CDN modernas y la computación de borde?
  • 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 se debe directamente al 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 centradas en móviles para consolidar la importancia de la velocidad del sitio web móvil como crucial para posicionarse en los resultados de búsqueda y SEM.

Estos esfuerzos incluyen la indexación por primera vez en móviles en 2016, AMP con anuncios móviles en 2017, la actualización de velocidad en 2019 y la próxima actualización del ranking de la experiencia de página que se pondrá en marcha a principios de 2021. Por último, pero no menos importante, la insignia de la 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 de motores 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 serie 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 Cuadro de Mando de Velocidad Móvil, por nombrar algunos.

Fuente: Prueba mi sitio

Google’s Test My Site es una herramienta que te permite realizar una auditoría rápida de tu sitio y estimar el impacto potencial en los ingresos anuales si se implementan recomendaciones de velocidad del sitio.

El esfuerzo por crear estas herramientas es de interés para Google, ya que el 58% de las búsquedas y el 65% de los ingresos publicitarios de la compañía provienen de dispositivos móviles.

Programa 1-a-1 Demo

Programe una conversación consultiva para aprender cómo la XDN de Edgio (Layer0) puede ayudarlo a lograr cargas de páginas de subsegundos. 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 los dispositivos móviles:El 70% de los consumidores afirman que la velocidad del sitio afecta su disposición a comprar. Amazon calculó que un segundo de retraso en la carga de páginas costaría $ 1.6B en ingresos perdidos al año. Para vender más, debe asegurarse de que dondequiera que un visitante llegue, por ejemplo, su lista de productos o páginas de descripción de productos, el contenido se cargue de forma rápida y sin esfuerzo. Asimismo, el proceso de pago debe ser rápido y sencillo. Esto construye la base para el recompromiso y hace que el comprador se incline a volver y comprar más de usted.

Sin embargo, tal como están las cosas hoy en día, se está volviendo más difícil ofrecer experiencias móviles rápidas. Además de sitios web mal optimizados e hinchados con imágenes de gran tamaño y código desordenado, una página móvil hace en promedio 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 las páginas móviles a solo 3-5 segundos, pero todavía hay margen para mejorar. Y este no es un problema que el 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 utilizar AMP para el tráfico de búsqueda y SSR para los otros canales. El segundo paso es asegurar cargas de página subsiguientes increíblemente rápidas. Esto se hace con frontend portátiles creados para la velocidad, como Progressive Web Apps (PWA). El último pilar es una CDN moderna con capacidades de computación de borde para exprimir cada milisegundo posible 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 para buscar a los usuarios y luego los transita a la versión completa de PWA del sitio en las páginas posteriores. Y dado que casi la mitad del tráfico de sitios web de minoristas proviene de búsquedas orgánicas, el soporte tanto de AMP como de PWA tiene sentido.

Este tema fue ampliamente discutido en Google I/O 2017.

Con las PWAs, los desarrolladores pueden ofrecer experiencias altamente atractivas y veloces que rivalizan con las aplicaciones nativas. Sin embargo, con respecto al tráfico generado por la búsqueda, AMP es la opción más rápida posible con tiempos de carga medios 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 de comercio electrónico empresarial agreguen soporte SSR, que es una tarea compleja por sí sola, y mantengan dos sitios web separados uno para el PWA (típicamente escrito en React, Angular, Vue, Next, Next, o Nuxt) y el otro en AMP HTML.

Las páginas AMP son tan rápidas porque son pre-obtenidas, 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 todos los otros canales, incluyendo correo electrónico, redes sociales y referencias.

PWA frontend portátil para velocidades de navegación ultrarrápidas

PWA se encarga de proporcionar velocidades de navegación instantánea a medida que el visitante navega a través de las páginas web posteriores. De esta manera, los consumidores disfrutan de una experiencia mejorada de cargas de primera página ultrarrápidas y transiciones instantáneas de página más allá de la primera página.

Prefetching predictivo + CDN moderno

La preobtención predictiva y una CDN moderna con capacidades de computación de borde le permiten transmitir datos dinámicos al borde y de 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 mantenerse 5 segundos por delante de los toques de los consumidores (por ejemplo, prebuscar una página de descripción del 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.

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 medios 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 procesan previamente 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 de página medianas de 500 ms para el tráfico de SERP de Google. Estas velocidades son posibles porque los servidores de Google obtuvieron previamente y procesaron 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 rebote 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 de AMP y Progressive Web Apps (PWA) cubre todo el recorrido del cliente desde la búsqueda, lo que lo hace rápido de extremo a extremo El comprador carga la página AMP desde un SERP de Google y, a continuación, 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 empezado a precargar el contenido para la página siguiente, y desde allí, todas las transiciones restantes son transiciones de navegación renderizadas del lado del cliente y no nuevas navegaciones.

¿Por qué no todos usan AMP?

La combinación AMP y PWA es un partido hecho en el cielo para la velocidad, pero es una pesadilla en cuanto al desarrollo. Apoyar la tecnología de manera efectiva implica la creación de dos versiones de su sitio: Una en el idioma en el que está escrito su frontend (que tiende a ser pesado en JavaScript o CSS) y otra que sigue los estándares del proyecto AMP. Y es solo el principio: Cada corrección de errores, cambio de diseño, nueva característica, etc. puede requerir propagarse a las bases de código AMP y PWA.

El framework React Storefront y Layer0 hacen que sea mucho más fácil para los desarrolladores admitir AMP en sus aplicaciones React.

Las empresas 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 la búsqueda, sino que también supera a Amazon, Nordstrom, Zappos y otras grandes marcas para frases clave.

Antes de utilizar la tecnología Layer0, las cargas de primera página de AKIRA promediaron un promedio de 4,8 segundos, y las páginas posteriores se cargaron en 2,5 segundos.

AKIRA fue capaz de mejorar estos resultados y llegar a las cargas de páginas de subsegundos utilizando tecnología avanzada incorporada en Edgio (Layer0): un PWA de comercio electrónico con renderizado del lado del servidor y conversión AMP, Layer0 CDN-AS-JavaScript que ofrece una tasa de aciertos de caché del 95%+ para contenido dinámico en el borde (y manteniendo el sitio web 5 segundos por delante del comprador) y el backend de JavaScript sin servidor 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% hasta cerca de un segundo
  • Las transiciones de navegación cayeron a un asombroso 500ms
  • La mitad de las páginas del sitio web ahora se cargan en menos de 500 ms
  • La tasa de conversión móvil aumentó un 37,25%

Lighthouse también es un gran reflejo de estas mejoras: La puntuación de rendimiento de AKIRA obtuvo un impulso de 36 puntos, superando al 75% de los sitios en la web y ofreciendo una experiencia de navegación mejorada para los clientes.

Lea el caso de estudio 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 de los motores de búsqueda.

Antes de subir a Edgio (Layer0), el minorista de hogar y decoración Annie Selke ni siquiera apareció por encima del pliegue 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 caso de estudio de Annie Selke en nuestro sitio web donde vamos a la mezquindad.

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 los gigantes del comercio electrónico como Amazon, Nordstrom y Zappos.

Cuanto más rápido sea el sitio, más alto será su rango, como un SEO instantáneo y garantizado. Hay muchos ejemplos en la cartera de Edgio (Layer0) que lo demuestran. AKIRA, Annie Selke y Shoe Carnival son solo algunos 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 un ratio de acierto 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.
  • Layer0 Serverless-JavaScript backend para frontend optimiza servidores y API.

Programa 1-a-1 Demo

Programe una conversación consultiva para aprender cómo Edgio (Layer0) puede ayudarlo a lograr cargas de páginas de subsegundos. Haga clic aquí.

¿Qué es la Renderización 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 renderizar una página PWA normalmente solo del lado del cliente en el servidor y luego enviar una página completamente renderizada al navegador. El paquete JavaScript del cliente puede entonces hacerse cargo y el PWA puede funcionar de forma normal. SSR esencialmente traduce las páginas JavaScript a HTML, un lenguaje que tanto los rastreadores de búsqueda como los navegadores entienden en el servidor. Esto garantiza que los navegadores y rastreadores de búsqueda puedan entregar e indexar fácilmente sus páginas.

Uno de los principales beneficios de usar SSR tiene una aplicación que puede ser rastreada e indexada correctamente por todos los motores 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 con el rendimiento, ya que una aplicación completamente cargada se envía desde el servidor en la primera solicitud. Sin embargo, para las aplicaciones no triviales, el kilometraje puede variar porque SSR requiere una configuración que puede complicarse un poco y crear una carga de servidor más grande. Afortunadamente hay servicios y herramientas, como frontend isomorfos y Layer0 con soporte SSR fuera de la caja.

Al final, si se utiliza 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 de borde?

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 de 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 equipo de un usuario, un dispositivo IoT o un servidor de perímetro) minimiza la cantidad de comunicación a larga distancia que tiene que ocurrir entre un cliente y un servidor.

CDNs con capacidades de computación de borde Permite reducir el tiempo de viaje desde los servidores del sitio web hasta el navegador del usuario mediante la transmisión del contenido al punto de presencia de CDN (POP) más cercano al usuario (de modo que un usuario en San Francisco entregó contenido de un pop en el sur de San Francisco mientras que un usuario en Nueva York entregó contenido de un pop en Brooklyn).

Los beneficios de las CDN con la computación de borde

Las CDN almacenan una versión almacenada 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 tus desarrolladores de frontend ya conocen y te da control total sobre el almacenamiento en caché. Como resultado, los sitios web que usan Layer0 ven ratios de acierto de caché de más del 95% para contenido dinámico en el borde.

Las capacidades de computación de borde de Layer0 CDN-AS-JavaScript te mantienen 5 segundos por delante del comprador al obtener de forma predictiva las siguientes 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 búsqueda sea increíblemente rápida. Pero eso es solo la mitad de la batalla. Para que su sitio web se ponga al día requiere ir más lejos y un enfoque más holístico: Una combinación de tecnologías como las Páginas Móviles Aceleradas (AMP), las modernas frontend portátiles, el Renderizado del lado del servidor (SSR) y las CDN con capacidades de computación de borde.

Layer0 ayuda a los sitios web de comercio electrónico complejos y dinámicos a alcanzar velocidades de subsegundos, al tiempo que aumenta la velocidad de desarrollo y el crecimiento de los resultados finales y reduce los costos de DevOps. También incluye un CDN-as-JavaScript que ofrece un índice de acierto de caché del 95% o mayor para contenido dinámico, en comparación con solo el 15% para otras CDN.

Layer0 ofrece constantemente cargas de páginas medianas de menos de 500 ms para grandes sitios web de comercio electrónico con docenas de etiquetas y scripts, sin mencionar los precios dinámicos y las búsquedas de inventario en tiempo real. Se sabe que estas ganancias de velocidad conducen a aumentos de conversión del 15-30%, una mejor visibilidad, alcance y, en última instancia, mayores ingresos.

Programe una conversación consultiva con un experto en velocidad de sitio para ver cómo podemos ayudarlo a obtener una ventaja competitiva con un sitio web de comercio electrónico instantáneo.