El departamento de TI de büecher.de utilizó la herramienta PageSpeed Insights de Google para realizar algunos cambios en páginas de destino de Google AdWords clave. Al poner en marcha estas medidas, consiguió mejorar el tiempo de carga de las páginas de destino para móviles en casi 2 segundos (-35%, Google Analytics) y agilizar la renderización de la parte visible de estas páginas (2,5 segundos según el índice de velocidad de Webpagetest.org1). Esta mejora también se reflejó en un incremento de las puntuaciones según el índice de PageSpeed, que pasaron de 63 a 93 puntos. En büecher.de están convencidos de que estas mejoras repercutirán positivamente en el coste por pedido, el porcentaje de conversiones y el porcentaje de rebote a medio y largo plazo.
LOS OBJETIVOS
Reducir el tiempo de carga de las páginas.
Incrementar las conversiones móviles.
Reducir el coste por pedido.
Disminuir la tasa de rebote.
EL ENFOQUE
Utilizó el índice de PageSpeed para optimizar las páginas para móviles.
Solucionó los problemas relacionados con el bloqueo de la renderización a causa de los archivos JavaScript y CSS, el almacenamiento en la memoria caché del navegador, la optimización de las imágenes y la priorización del contenido en la parte visible de la página.
LOS RESULTADOS
El tiempo de carga de las páginas de destino de Google AdWords optimizadas disminuyó de 5,3 a 3,5 segundos (Google Analytics).
El resultado según el índice de PageSpeed registró un incremento de 30 a 93 puntos.
Büecher.de, una asociación temporal de empresas fundada en junio de 1999 bajo el nombre de booxtra, opera con el nombre actual desde noviembre del 2001. Esta empresa de comercio electrónico ofrece envío gratuito dentro de Alemania en todos los pedidos, sin exigir una cantidad mínima de compra. "El gran éxito de ventas de büecher.de entre las empresas de comercio exclusivamente online se debe a nuestra amplia variedad de productos y publicaciones recientes, así como a nuestra rapidez. Así es cómo conseguimos un índice de satisfacción del cliente del 95%", explica Ruslan Pakentryger, director de Marketing en Buscadores de büecher.de.
büecher.de opera en un mercado muy competitivo. Sin embargo, la competencia en el sector editorial no puede basarse en el precio, puesto que este está regulado por las leyes alemanas sobre la fijación del precio de los libros. Dado que la mayoría de los clientes ahora acceden al sitio web y a la tienda desde dispositivos móviles, la empresa lleva mucho tiempo analizando cuál es el mejor modo de optimizar el sitio web. La conclusión es que contar con una página para móviles rápida, así como con presupuestos y campañas de Google AdWords racionalizados, es fundamental para lograr buenos resultados a largo plazo. "La última gran optimización se llevó a cabo durante el proceso de lanzamiento de nuestra tienda adaptable que tuvo lugar en junio del 2015", subraya Martin Wagner, desarrollador sénior de la interfaz de büecher.de. "Tras ello, conseguimos una puntuación de la página principal de 91 sobre 100 según el índice de PageSpeed. Sin embargo, en los meses siguientes, comprobamos la puntuación esporádicamente y vimos que había disminuido considerablemente, sobre todo cuando empezamos a distinguir entre dispositivos móviles y ordenadores".
Imagen antes de la optimización2:
Imagen después de la optimización:
En mayo del 2016, la empresa ya había identificado el principal motivo por el que estaba obteniendo estos malos resultados, pero no encontraba una solución técnica sencilla para resolver el problema. Los archivos CSS y JavaScript bloqueaban la renderización de las páginas, de modo que el contenido tardaba en mostrarse en pantalla. Necesitaban dar con una forma de introducir las reglas CSS y el código JavaScript imprescindibles para mostrar contenido insertado en la mitad superior de la página a fin de que dichos archivos CSS y JavaScript no se cargaran hasta el final de la página. En vista de que el éxito comercial dependía en gran medida de la capacidad de ofrecer tiempos de carga rápidos y páginas que funcionaran bien, la empresa volvió a analizar el tema en febrero del 2017 y el equipo de TI siguió insistiendo en su importancia.
"Constatamos a diario que las compras desde dispositivos móviles han aumentado en comparación con los últimos años. Para nosotros, el coste por pedido desde estos dispositivos es un factor sumamente importante a la hora de lograr beneficios. Esperamos que disminuya gracias a la mejora del tiempo de carga de la página, ya que ahora los usuarios la ven mucho más rápidamente, la consultan durante más tiempo y está adaptada para móviles."
- Ruslan Pakentryger, director de Marketing en Buscadores de büecher.de.
El equipo recurrió a la herramienta PageSpeed Insights de Google, que se basa en una serie de comprobaciones de prácticas recomendadas para mejorar el rendimiento. Estas comprobaciones sirven para medir el rendimiento de las páginas en dispositivos móviles y ordenadores accediendo a la URL dos veces: una con un user-agent para móviles y otra con un user-agent para ordenadores. La puntuación de PageSpeed se establece en una escala del 0 al 100, siendo 85 el indicador a partir del cual se considera que el rendimiento es elevado. PageSpeed Insights mide la posibilidad de incrementar el rendimiento en función del tiempo que tarda en cargarse el contenido visible sin que el usuario se desplace por la página y del tiempo que esta tarda en cargarse por completo.3
Antes de la última optimización, el sitio web tenía una puntuación de 63 sobre 100. La siguiente fase consistió en realizar un análisis completo de la tienda de büecher.de. Se evaluaron todos los tipos de página (página principal, páginas de productos y páginas de categorías) con el objetivo de encontrar la mejor solución posible para cada uno de ellos. "La optimización para móviles parecía cara, pero factible", recuerda Martin. "La solución técnica para las reglas CSS imprescindibles fue la que proporcionó los mejores resultados. Tardamos casi un mes desde que llevamos a cabo el análisis hasta que implementamos todas las medidas". Gracias a estos cambios, la renderización de las imágenes, especialmente en los banners, ha mejorado. Ahora, todas se adaptan automáticamente sin problemas a la pantalla del dispositivo utilizado, y el tamaño del archivo se optimiza cuando se cargan en el sistema de gestión de banners.
"Estábamos convencidos de que la clave para mejorar el tiempo de carga de las páginas radicaba en optimizar los archivos CSS y JavaScript, ya que era lo que entorpecía la renderización e impedía la visualización de la parte gráfica."
- Martin Wagner, desarrollador sénior de la interfaz de büecher.de
Además, queríamos asegurarnos de que las fuentes web y el código JavaScript se volvieran a cargar de forma asíncrona y de la forma más uniforme posible. Tuvimos algún problema con algunos proveedores externos de terceros que tenían píxeles y widgets integrados en la página de büecher.de, puesto que ciertos widgets no estaban bien optimizados. Por ejemplo, algunos widgets ahora esperaban a jQuery de forma síncrona, aunque durante años se habían iniciado de forma asíncrona en büecher.de, lo que en muchas ocasiones generaba costes de implementación adicionales.
El tiempo de ejecución de la memoria caché del navegador también se modificó para las imágenes y las secuencias de comandos, y la implementación de la carga dinámica de imágenes permitió mejorar aún más algunas páginas. Ahora las imágenes solo se cargan si entran en el área visible del usuario. Por último, se priorizaron los elementos del modelo de objetos del documento (DOM). Por ejemplo, ahora el menú emergente solo se carga si es necesario.
"Claro está que el objetivo de marketing que perseguimos con estas optimizaciones es incrementar el porcentaje de conversiones", explica Ruslan. "Si los tiempos de carga son más rápidos, la experiencia de usuario es mejor, y ello repercute directamente en nuestras actividades de Google AdWords y nuestros objetivos de eficiencia e ingresos, especialmente en móviles". Hay varios estudios que lo demuestran, en los que se establece una relación entre el tiempo de carga y el porcentaje de conversiones: incluso una décima de segundo puede reducir los porcentajes de conversiones hasta en un 7% en dispositivos móviles. También se ha demostrado el impacto del tiempo de carga en los porcentajes de rebote: uno o dos segundos de diferencia permiten incrementar el porcentaje de rebote hasta en un 103% en estos dispositivos.4
A raíz de este proceso de optimización basado en PageSpeed Insights de Google, büecher.de ha puesto en marcha un sistema de supervisión permanente de los tiempos de carga en dispositivos móviles de las páginas de su sitio web y de las de los sitios web de la competencia. Ahora, la puntuación en el índice de PageSpeed Insights para móviles de las quince páginas de todos los tipos supervisadas de la empresa no baja de los 92 puntos, y la página principal para móviles tarda bastante menos en cargarse, unos 3,5 segundos frente a los 5,3 segundos anteriores. "Estamos satisfechos ya que, desde que pusimos en marcha estas medidas, tenemos la mejor puntuación en móviles de entre los cinco mejores proveedores de medios de pedidos por correo", destacan Martin y Ruslan.
Ambos valoran la facilidad con que colaboran ambos equipos. "Tenemos una política de puertas abiertas", subraya Ruslan. "Dado que el proyecto se finalizó en el departamento de TI, la necesidad de comunicación durante el proceso de optimización no fue tanta", añade Martin. "Las estructuras de la empresa permitieron la comunicación interdepartamental directa". Muchas de las medidas se han integrado permanentemente en el proceso de desarrollo de la tienda, de modo que la velocidad de carga seguirá siendo excelente a largo plazo.
El equipo tiene grandes aspiraciones para el futuro: "intentamos mantener la puntuación actual y seguiremos mejorándola en la medida de lo posible", afirma Martin. "Hace poco volvimos a vincular los recursos de Google PageSpeed Race 2017 a este proyecto y ya hemos conseguido otras mejoras. Nuestro gran objetivo es obtener una puntuación media de 95 sobre 100".
