Cómo las velocidades lentas de las páginas móviles están arruinando sus tasas de conversión

Existe una buena posibilidad de que un mal diseño de la página de destino posterior al clic le esté costando al menos la mitad de su presupuesto de PPC, sugiere una investigación reciente de Google.

Los datos del gigante de los motores de búsqueda indican que más de uno de cada dos usuarios de Internet móvil abandonará una página web si no se carga en 3 segundos. Y a partir de febrero de 2017, la página de destino promedio para dispositivos móviles después del clic tarda unos vergonzosos 22 segundos en cargarse.

Si se detuvo a hacer los cálculos, probablemente se dará cuenta de lo perjudicial que puede ser una página de carga lenta para sus resultados.

Si genera 5,000 visitantes de la página de destino post-clic para dispositivos móviles por mes y convierte el 5% de ellos, se perderá 1,500 conversiones durante el año. Si la carga tarda más de 3 segundos, la mitad de sus visitantes (2.500 al mes en este caso hipotético) ni siquiera ven la página de destino completa después del clic antes de rebotar. Lo que es peor, su presupuesto de PPC se agota cada vez que lo hacen.

Pero tal vez su página no se cargue en 3 segundos. Tal vez se cargue en 5 segundos, 6 segundos o 10 segundos. Si ese es el caso, los datos de Google muestran que está perdiendo aún más.

Nuevos puntos de referencia de velocidad de la página móvil

¿Cómo se comparan sus páginas con otras en la web? Para establecer algunos nuevos puntos de referencia para la velocidad de carga, Google analizó 900.000 páginas de destino móviles post-clic de anuncios en 126 países a principios de 2017.

Lo que encontraron fue una confirmación de su hipótesis: las páginas móviles están "infladas" con demasiados elementos.

Entre ellos, las páginas de los sectores de la automoción, el comercio minorista y la tecnología son las que, en promedio, tardan más en cargarse. Independientemente de la industria, sin embargo, algunos datos impactantes muestran que, en general, las páginas de destino posteriores al clic en dispositivos móviles dejan mucho que desear.

Por ejemplo, el 70% de las páginas analizadas tardaron 7 segundos en cargar el contenido justo en la mitad superior de la página. En esas mismas páginas, se necesitaron más de 10 segundos en total para cargar el contenido visual por encima y por debajo de la página.

Con la ayuda de algunos algoritmos avanzados de SOASTA, otro estudio de Google vinculó la velocidad de carga de la página con indicadores clave de rendimiento más significativos, como las conversiones y la tasa de rebote. En una publicación de blog, los investigadores elaboran:

Creamos dos modelos de aprendizaje automático: uno para predecir conversiones y otro para predecir tasas de rebote. Cada modelo utilizó datos del mundo real de una gran muestra de sitios de comercio electrónico móviles, correlacionando el impacto de 93 métricas de página diferentes, desde formatos de imagen hasta varios scripts. En pocas palabras, los dos modelos buscaron qué factores del sitio móvil llevarían a los compradores a comprar o rebotar. El modelo de conversión tuvo una precisión de predicción del 93% y el modelo de rebote fue aún más preciso, con un 96%.

Con una precisión casi milimétrica, los modelos de aprendizaje automático descubrieron que a medida que el tiempo de carga de una página aumenta de uno a tres segundos, la probabilidad de que un visitante móvil rebote aumenta en un 32%. A partir de ahí, muestra un gráfico, las cosas se ponen aún peor:

Junto con la tasa de rebote, mostró el estudio, un tiempo de carga de página lento también puede disminuir las conversiones. Entonces, ¿cuál es el culpable?

Los investigadores identificaron algunas fallas importantes en el diseño de dispositivos móviles.

Los mayores asesinos de velocidad de la página de destino posterior al clic en dispositivos móviles

La velocidad no solo detrae las conversiones y el presupuesto de publicidad pagada; también es uno de los factores de clasificación de los motores de búsqueda de Google. Si su página no se carga más rápido que los 3 segundos recomendados, está desperdiciando dinero y no lo encuentran. Cualquiera de los siguientes problemas podría ser el motivo.

1. Demasiados elementos de página

Hoy en día, la página web promedio tiene el mismo tamaño, en datos, que el videojuego clásico "Doom:"

Con 2,3 MB, se ha convertido en un montón de elementos innecesarios. Y sus diseñadores tienen BSO - "síndrome de objeto brillante brillante" - sugiere el ingeniero de software, Ronan Cremin:

A medida que la red atravesaba sus incómodos años de adolescencia, dejamos que las características rastreras se apoderaran y, finalmente, el desorden simplemente se apoderó de nosotros. ¿Nuevo módulo de galería de JavaScript? ¿Seguro Por qué no? Oh, esa nueva fuente web se vería bien aquí, pero ¿por qué no agregar otra herramienta de análisis mientras estamos allí? ¿Debería molestarme en cambiar el tamaño de esta imagen de 6000 píxeles? No, deja que el navegador lo haga, funciona para mí.

Google ha descubierto que "featuritus", como lo llama Cremin, puede tener impactos drásticamente negativos en la velocidad de carga. La página promedio ahora presenta cientos o miles de elementos (titulares, imágenes, botones) almacenados en docenas de servidores. Cuando esos elementos no se optimizan, el resultado puede ser una experiencia de carga "impredecible" y "volátil".

Los investigadores incluso llegaron a identificar la cantidad de elementos en una página como el predictor más preciso de conversiones. Menos, afirman, es más. Cuando los elementos de una página aumentan de 400 a 6.000, las probabilidades de convertir a un visitante disminuyen en un 95%.

Los mejores diseñadores de Internet, sugieren los datos, lo han sabido desde 2014. Si bien el tamaño de página promedio ha crecido de manera constante para la mayoría de los sitios web, los 10 principales han cambiado:

Para ellos, el "peso" de la página (tamaño de los datos) ha ido disminuyendo en los últimos años. Todos los demás, al parecer, son víctimas de featuritus.

Según Google, el 70% de las páginas que probaron tenían más de 1 MB, el 36% tenían 2 MB y el 12% tenían más de 4 MB. Como resultado, hay pocas posibilidades de que los visitantes se queden mucho tiempo. A través de una conexión 3G rápida (la velocidad de la mayoría de las conexiones móviles en todo el mundo), 1,49 MB tarda unos 7 segundos en cargarse.

Resolviendo el problema

En el caso de una página muy ponderada, la mejor solución es la prevención. Afortunadamente, la prevención es tan fácil como establecer lo que Google llama "presupuestos de rendimiento". Antes de comenzar a crear su página, determine qué tan rápido desea que se cargue (el "presupuesto"). Luego, diseñe su página dentro de los límites de su presupuesto.

“Es mucho más eficiente entregar algo rápido si es parte de los criterios de diseño”, dice Hakan Nizam de L'Oreal. “Liberaría ancho de banda del desarrollador. Permitiría a los desarrolladores centrarse en otros factores que están afectando las tasas de conversión. La conversación de velocidad debe resolverse para pasar a otros diferenciadores ".

En una publicación de blog de Google, Jason Cohen compara el presupuesto con otras limitaciones creativas:

Incluir la velocidad como parte del proceso de diseño no es diferente a tener en cuenta las limitaciones de otros medios creativos. Los diseñadores no crearían un anuncio de cuatro colores para una publicación impresa en blanco y negro ni producirían un video de 30 segundos para un espacio de 15 segundos. Si no diseñamos dentro de las limitaciones del medio, el resultado es una mala experiencia.

A pesar de que los dispositivos móviles superan el tráfico de Internet de las computadoras de escritorio, el canal aún está por detrás de las computadoras de escritorio en la mayoría de las métricas de experiencia del usuario. Los diseñadores deben dejar de considerar los dispositivos móviles como una ocurrencia tardía. Es su propio medio y la experiencia del usuario debería reflejarlo.

Por supuesto, la técnica de "presupuestación" asume que está comenzando desde cero. Si está tratando de optimizar una página de destino posterior al clic que ya es lenta, los investigadores recomiendan realizar una auditoría de sus elementos y monitorear sus scripts de terceros para descubrir cuáles contribuyen más a su peso. Luego, reduzca la escala para optimizar en consecuencia.

2. Demasiadas imágenes

En su investigación, una imagen en particular llamó la atención de los evaluadores de Google. Pesaba la friolera de 16 MB. Una y otra vez, continuaron encontrando imágenes que empantanaron las páginas.

"Los elementos gráficos como favicons, logotipos e imágenes de productos pueden comprender fácilmente hasta dos tercios (en otras palabras, cientos de kilobytes) del peso total de una página", advirtieron los investigadores.

Con la ayuda de sus módulos de aprendizaje automático, descubrieron que el segundo predictor más preciso de conversiones era el número de imágenes en una página. En comparación con las páginas que no pudieron convertir visitantes con éxito, las páginas que podrían presentar un 38% menos de imágenes.

Resolviendo el problema

Una de las formas más fáciles de aumentar la velocidad de su página es con una optimización rápida de la imagen. Haz tu mejor esfuerzo para ...

• Reduzca las imágenes innecesarias

¿Realmente necesita mostrar seis ángulos diferentes de su producto? ¿Esa foto de archivo realmente agrega valor a su página de destino posterior al clic? ¿Necesita codificar texto en una imagen o puede integrar la fuente elegida con Google Fonts o Adobe Typekit? Si la respuesta es "no", considere cortar algunas imágenes de su diseño.

• Disminuir el tamaño de las imágenes necesarias

Si necesita todas esas imágenes, algunas herramientas y estrategias diferentes pueden ayudarlo a ahorrar ancho de banda. Primero, conozca el formato de archivo de su imagen. Reemplazar un PNG por un JPEG puede ahorrarle mucho tamaño y, a su vez, velocidad. Por otro lado, también reducirá la calidad de su imagen. Para obtener más información sobre cómo decidir qué formato usar, consulte esta publicación.

En segundo lugar, piense en utilizar una herramienta. Los investigadores afirman que el 30% de las páginas podrían ahorrar 250 KB de datos con la ayuda de un compresor de imágenes. Vale la pena probar Guetzli y Zopfli de Google.

3. Uso de JavaScript, tiempo de carga de página completa

Antes de que se puedan mostrar a un usuario elementos como imágenes y botones, el navegador debe recibir e interpretar el código HTML con el que se construye una página. El tiempo que lleva se conoce como "tiempo de preparación DOM", el predictor más preciso del rebote de la página, encontraron los investigadores.

Los datos de Google muestran que las sesiones de usuario que rebotaron tenían tiempos de preparación DOM que eran un 55% más lentos que las sesiones sin rebote. Las ralentizaciones de esa importancia a menudo son causadas por JavaScript, un tipo de código que detiene el análisis del código HTML, utilizado en muchas herramientas de análisis, anuncios y widgets sociales de terceros.

Daniel An y Pat Meenan comparan la desaceleración con un restaurante desorganizado:

Imagine que está en un restaurante y su camarero está listo para traer su comida, pero primero tiene que esperar a que le traigan la sal y la pimienta de otro restaurante.

Pero JavaScript no es el único tipo de código que ralentiza las páginas móviles. CSS, HTML y las innumerables solicitudes necesarias para procesar elementos como imágenes y fuentes crean un retraso en el tiempo de carga de la página completa, el segundo predictor más preciso de la tasa de rebote. El promedio de usuarios de páginas web desde las que rebotaron fue 2,5 segundos más lento que la página promedio desde la que no rebotaron.

Resolviendo el problema

En un intento por mejorar la experiencia de navegación móvil, Google desarrolló los programas AMP y AMP para anuncios. Ambos marcos brindan a los desarrolladores las herramientas que necesitan para brindar experiencias móviles a la velocidad del rayo. Incluyen:

• AMP HTML: esta es una versión básica y simplificada de lo que reconocemos como lenguaje de marcado de hipertexto: el sistema de etiquetas, números y letras que se utiliza para construir la base de la mayoría de las páginas web.

• JavaScript de AMP: la versión AMP de Google del código popular restringe el uso de JavaScript de terceros y escrito por el autor.

• AMP CDN: esto permite a los desarrolladores almacenar una versión en caché de su página web en los servidores de Google. Esa versión en caché es una instantánea digital de la página que contiene todos sus datos en un solo lugar. Como resultado, se puede servir al usuario más rápido.

Juntos, los elementos del marco forman la base de páginas que usan 10 veces menos datos que el promedio y anuncios que se cargan 6 veces más rápido.

Dirígete aquí para obtener más información sobre cómo comenzar con AMP.

¿Cuál es la velocidad de su página móvil?

¿Están optimizadas sus páginas de destino posteriores al clic para dispositivos móviles? ¿Están libres de imágenes inútiles, elementos torpes y JavaScript pesado?

Descúbralo con una prueba compatible con dispositivos móviles de Google, luego consulte nuestra guía para optimizar la experiencia de la página de destino posterior al clic antes de crear la siguiente página: