15 formas de mejorar el rendimiento del sitio

Cualquiera que haya ido a hacer la compra de comestibles el día antes de una gran festividad conoce el sufrimiento de dar vueltas buscando aparcamiento y abrirse paso hasta artículos que otras cincuenta personas también buscan. Esa no es una experiencia que nadie quiera replicar en su tienda de comercio electrónico, pero podría pasar si no te esfuerzas por mejorar el rendimiento de tu sitio web.

Vale, vale, quizá estemos exagerando un poco. Nada es tan malo como intentar encontrar una patata medio decente mientras tu villancico menos favorito suena a todo volumen por el sistema de sonido de la tienda. Sin embargo, sabemos que a los clientes les encanta la comodidad que ofrecen las compras online. Casi el 70 % de los consumidoresSe abre en una ventana nueva tiene en cuenta la velocidad del sitio a la hora de decidir si compra a un retailer online. Y la mayoría de los compradores online esperan un tiempo de carga de página de 3 segundos o menosSe abre en una ventana nueva.

Si no le has hecho un chequeo de rendimiento a tu web últimamente, ya va siendo hora. Te contamos cómo evaluar tu rendimiento actual, además de algunos pasos que cualquiera puede dar para optimizar un sitio de e-commerce y lograr una experiencia de compra veloz.

Capítulos:

1. Por qué importa el rendimiento de la web

2. Las 7 principales métricas de rendimiento web

3. Cómo medir el rendimiento de tu web

4. Cómo mejorar el rendimiento de tu web de e-commerce

5. El rendimiento web va de velocidad

Por qué importa el rendimiento del sitio web

¿De verdad importa si no se alcanza esa marca de 3 segundos de carga? Sí, importa. No priorizar la velocidad de carga de la web reduce la calidad de tu experiencia de usuario, y eso es malo en varios sentidos.

Lo primero y más obvio es que unos tiempos de carga más altos suponen una mayor tasa de reboteSe abre en una ventana nueva. Incluso los usuarios que aguantan las primeras cargas lentas de página pueden abandonar tu sitio antes de comprar.

Es probable que unas tasas de conversión iniciales más bajas vayan acompañadas de una menor fidelidad en general. Los clientes que recuerdan su experiencia de compra poco óptima tienen menos probabilidades de volver a intentarlo, y no querrán seguir los enlaces que les lleven a tu sitio.

Un mal rendimiento del sitio web también afecta a tu posicionamiento en las SERP de Google. Como el algoritmo del buscador da prioridad a la experiencia de usuario, las páginas con una velocidad de carga lenta quedan relegadas en los resultados de búsqueda. Los puntos de venta más pequeños que compiten por la atención podrían perder frente a sus competidores más rápidos.

Las 7 principales métricas de rendimiento de un sitio web

El tiempo de carga de una página no es una métrica de rendimiento web independiente. Es una evaluación global que reúne varias métricas. Cuatro de ellas son los 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 «por encima del pliegue», es decir, sin desplazarse hacia abajo

• Interaction to Next Paint mide la capacidad de respuesta de una página ante interacciones, como hacer clic en un botón de «añadir al carrito» o escribir información en un formulario

• First Input Delay mide el intervalo entre el momento en que un usuario interactúa con tu sitio web (por ejemplo, al hacer clic en el botón «añadir al carrito») y el momento en que su navegador empieza a procesar esa solicitud

• El Cumulative Layout Shift mide con qué frecuencia se desplaza el contenido de la página mientras esta se carga

Google considera estos aspectos los más importantes porque son los que más efecto tienen en la experiencia de usuario. Sin embargo, hay otras cuatro métricas que también recogen partes importantes de la experiencia de usuario:

• El Time to First Byte mide la rapidez con la que tu proveedor de DNS empieza a entregar el contenido de tu sitio web tras recibir la solicitud

• El Total Blocking Time mide cuánto 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 cargando páginas no pueden procesar interacciones)

• First Contentful Paint mide el tiempo que tarda en renderizarse el primer elemento del contenido de tu sitio web

Si quieres profundizar en alguna de estas métricas, el sitio web.devSe abre en una ventana nueva de Google explica con más detalle por qué importa cada una y cómo medirlas. O puedes seguir leyendo mientras hablamos de cómo medir el rendimiento de tu web.

Cómo medir el rendimiento de tu sitio web

Medir el rendimiento de tu sitio es fácil con la herramienta gratuita de Google,PageSpeed InsightsSe abre en una ventana nueva. Esta herramienta evalúa tu sitio según las métricas indicadas arriba y lo clasifica como bueno, mejorable o deficiente. También recibirás observaciones sobre el rendimiento, la accesibilidad, el uso de buenas prácticas y el SEO de tu sitio.

Hay una opción para ver cómo funciona tu sitio en móvil frente a escritorio, junto con consejos para optimizarlo. Recibes mucha ayuda por el módico precio de vivir en el ecosistema web de Google y, seamos sinceros, eso ya está ocurriendo.

Cuando consultes tu informe, puede que notes que el Total Blocking Time queda excluido del cuadro «Core Web Vitals Assessment». Desplázate hacia abajo hasta el cuadro Performance y consulta después la tabla Metrics para ver tus resultados.

PageSpeed Insights te facilita entender por qué tu sitio obtuvo las posiciones que obtuvo, con gráficos con código de colores y consejos personalizados. Haz una prueba ahora mismo —solo lleva unos segundos— para obtener una referencia del rendimiento de tu sitio y ver dónde tienes margen de mejora.

Cómo mejorar el rendimiento de tu sitio web de e-commerce

Si sigues aquí, asumiremos que tu evaluación de Core Web Vitals ha mostrado que tienes trabajo por hacer. No hay nada de qué avergonzarse. ¡Ni siquiera el sitio web.dev de Google supera la evaluación! Aquí tienes nuestros mejores consejos para ayudarte a mejorar el rendimiento de tu sitio de e-commerce y las herramientas que necesitas para conseguirlo.

1. Reduce las solicitudes HTTP

Las solicitudes HTTP están en el centro de la carga de las páginas web. No necesitas conocer aquí los detalles técnicos, solo saber que un navegador debe hacer estas solicitudes para cargar los archivos CSS, los scripts, las imágenes y otros contenidos de tu página. Cada solicitud obliga al navegador a enviar un mensaje a tu proveedor de alojamiento web, que luego tiene que responder con el contenido adecuado.

Cuantas más solicitudes HTTP tengas, más tiempo se tardará en completarlas todas. Imagina que vas a un restaurante y primero pides agua y luego, cuando vuelve el camarero, pides un refresco. Cuando te trae el refresco, pides un entrante. Y por fin, después de que llegue el entrante, has decidido tus platos principales. Tardarías mucho en recibir y terminar tu comida, por rápido que trabajara el camarero.

Dale un respiro a tu servidor (web) eliminando las solicitudes HTTP innecesarias. Si no necesitas un script o un archivo CSS, no lo referencies en la cabecera de tu página. También puedes intentar reducir el contenido multimedia para aumentar la velocidad de carga de tu página.

2. Usa HTTP/2

No todas las solicitudes HTTP son iguales. HTTP/2, un estándar que debutó en 2015, incluye capacidades que ayudan a que tus páginas web carguen más rápido. Por un lado, permite a los desarrolladores priorizar qué elementos se cargan primero, de modo que puedes indicar a los navegadores que soliciten recursos ligeros antes que scripts más grandes. También puede servir varios recursos a la vez. Volviendo a nuestra metáfora del restaurante, HTTP/2 te permite hacer todo tu pedido de una vez para que el camarero pueda traerte la comida más rápido.

KeyCDNSe abre en una ventana nueva ofrece una prueba HTTP/2 gratuita para comprobar si tu web admite el protocolo HTTP/2. O, si quieres verlo más de cerca, abre las herramientas para desarrolladores de tu navegador, ve a la pestaña de red y busca la columna «Protocolo». (Puede que tengas que hacer clic con el botón derecho en la lista de columnas y añadir Protocolo.)

La compatibilidad con HTTP/2 depende de tu proveedor de alojamiento web, así que es a quien debes acudir si necesitas activar el protocolo. El proceso es diferente en cada proveedor.

3. Elimina las redirecciones innecesarias

Muchas empresas utilizan redirecciones para evitar la pérdida de enlaces durante los rediseños de sitios web. Sin embargo, cada vez que rediriges a un usuario a una nueva página, le obligas a esperar otra carga de página. Y sobre todo las redirecciones que llevan a otra redirección: ¡no, gracias! Para cuando el usuario llegue a la URL real, ya estará listo para cerrar tu página.

Las redirecciones tienen la costumbre de acumularse con el tiempo. Eso significa que debes auditarlas periódicamente; es especialmente importante hacerlo tras cualquier rediseño o reestructuración de tu web.

Screaming Frog SEO Spider puede ayudarte a revisar todo tu sitio en busca de redirecciones e incluso detectar por ti cadenas y bucles de redirección. También podrías usar la Ahrefs SEO Toolbar para comprobarlo página por página, pero no lo recomendamos. A menos que tengas una obligación de la que de verdad quieras librarte.

4. Limita los scripts externos

La mayoría de los desarrolladores usa scripts de terceros para añadir funcionalidades que no tienen recursos para programar internamente. Sin embargo, incorporar scripts externos siempre es arriesgado para la velocidad de la página. No tienes control sobre el código, así 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 el salto de contenido (medido con la métrica Cumulative Layout Shift).

Revisa cada página para asegurarte de que no se carguen scripts innecesarios. Por ejemplo, puede que tengas activada una función de reseñas en todo tu sitio, pero no necesitas ese script en las páginas pensadas para navegar. También puedes preguntarte si de verdad necesitas esa ventana modal para recoger los correos electrónicos de los clientes o si está alejando a más compradores de los que atrae.

Más florituras no siempre es mejor. Un sitio web sencillo con una buena experiencia de usuario puede desbancar a una tienda sobrediseñada.

5. Activa la carga diferida (asíncrona)

Cuando un navegador renderiza un sitio web, por defecto procesa cada solicitud en orden y solo pasa al siguiente comando después de terminar su tarea actual. Los scripts grandes ralentizan todo el proceso, ya que un navegador debe cargar el archivo completo antes de poder pasar a renderizar el resto del contenido.

Evita este retraso indicando al navegador que cargue tus scripts de forma asíncrona, es decir, mientras sigue renderizando la página web. Basta con añadir el atributo async a tus etiquetas de script (tu código se parecerá a esto: <script src=”my_script.js” async></script>).

Algunos expertos recomiendan añadir las etiquetas <script> cerca del final del contenido del body, ya que es posible que los navegadores antiguos no puedan leer el atributo async, pero no hace falta hacerlo. Te costaría encontrar un navegador que no pudiera manejar la etiqueta async.

6. Usa diseños mobile-first

La optimización del rendimiento de un sitio web debe incluir un enfoque mobile-first. Los smartphones son ya el origen de casi cuatro de cada cincoSe abre en una ventana nueva visitas a sitios web de e-commerce y de dos de cada tres compras de e-commerce. Por desgracia, 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 %Se abre en una ventana nueva de los visitantes móviles dispuestos a abandonar si un sitio tarda más de 3 segundos en cargarse, los retailers de e-commerce probablemente están perdiendo mucho negocio.

Casi todos los sitios web que se publican hoy en día son responsive, pero los diseñadores que programan para escritorio y solo después optimizan para móvil quizá estén siguiendo el orden equivocado. Usar emuladores de teléfono móvil para diseñar para pantallas pequeñas pone en primer plano las necesidades de esta audiencia en crecimiento.

Además, es fácil: las Dev Tools de Google Chrome te permiten activar el «modo dispositivo» para ver cómo se verá tu sitio en pantallas más pequeñas.

Diseñar para teléfonos móviles también te obliga a sacar el máximo partido al limitado espacio de pantalla, lo que puede significar que optes por menos elementos decorativos que puedan ralentizar una página. También te conviene simplificar la navegación y las interacciones en lugar de buscar experiencias llamativas o únicas que requieran scripts y plugins externos.

Si trabajas con un sitio ya existente, probablemente no puedas aplicar esta práctica ahora mismo. Simplemente tenla en cuenta para tu próximo rediseño.

7. Comprime los archivos de texto con gzip

Los archivos HTML y CSS pueden no parecer demasiado onerosos de cargar, pero cuando se cuenta en milisegundos, cada byte importa. La compresión reduce el tamaño de los archivos de texto para que puedan hacer el viaje desde tu servidor hasta el navegador de un cliente más rápidamente. Gzip es el framework de compresión más común, pero Brotli y Deflate también funcionan bien para acelerar tu sitio web.

Esta es otra función que se configura en el lado del alojamiento. La mayoría de los proveedores de hosting la activan por defecto, pero conviene comprobar el tuyo con una prueba gratuita de compresión HTTPSe abre en una ventana nueva. Si descubres que tu contenido no está comprimido, es hora de ponerte en contacto con tu proveedor de hosting.

8. Minifica los archivos CSS, JavaScript y HTML

Los frameworks de compresión como Gzip no son los únicos que ahorran bytes. También puedes minificar tus archivos de texto eliminando todo lo que no sea una parte clave del código, como los comentarios, el formato o los nombres de variables largos. Muchos de estos elementos son útiles para los desarrolladores humanos, pero los navegadores web no los necesitan para mostrar tu página web directamente.

No hace falta que revises y elimines tú mismo los comentarios y los espacios y tabulaciones sobrantes. Minifier.org ofrece una herramienta gratuita que puede encargarse del CSS y del JavaScript. web.dev de Google recomienda este minificador de HTML gratuitoSe abre en una ventana nueva.

Si buscas herramientas que puedan minificar en masa, el PageSpeed ModuleSe abre en una ventana nueva de Google funciona con servidores web Apache o Nginx y minifica tus archivos automáticamente. Sin embargo, instalar herramientas como esa o CSSNano puede requerir que llames a TI.

9. Optimiza las imágenes y los vídeos

Los archivos multimedia suelen reducir el rendimiento de un sitio web simplemente porque son muy pesados. Los comerciantes de e-commerce, que dependen en gran medida de imágenes y vídeos, deben optimizar estos archivos con diligencia para reducir la carga sobre la conexión a internet de los visitantes.

La parte fácil de optimizar las imágenes es cambiarles el tamaño. Ningún archivo debería superar los 20 megabytes (MB), pero en realidad solo tus imágenes hero deberían ser tan grandes. Shopify recomienda a los comerciantes mantener las imágenes en torno a los 500 kilobytes (KB) si es posible, aunque admite que algunos sitios necesitan archivos de hasta 2 MB. Probablemente tendrás que comprimir tus imágenes para alcanzar estos objetivos. Por suerte, hay muchas herramientas gratuitas de compresión de imágenes que puedes usar.

Una vez que has reducido el tamaño de los archivos, asegúrate de aplicar principios de diseño responsive para que todo siga siendo rápido para los usuarios que cargan tu web desde dispositivos más pequeños. MDN Web Docs, gestionado por Mozilla, ofrece un buen tutorial sobre imágenes responsive 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 los equipos de los usuarios, lo que acelera los tiempos de carga para los visitantes recurrentes. En lugar de contactar con tu servidor para cada archivo, los navegadores pueden obtener recursos en caché de la memoria local del equipo.

El almacenamiento en caché es una excelente solución para la mayoría de los comerciantes de e-commerce, ya que tus recursos permanecen bastante estáticos. Si haces una gran renovación del sitio o sustituyes las imágenes de producto, tendrás que asegurarte de que los navegadores tengan instrucciones para volver a descargar el contenido nuevo y sustituir los recursos almacenados en caché. Sin embargo, es algo lo bastante poco frecuente para la mayoría de los retailers online como para que configurar el almacenamiento en caché sea el camino a seguir.

Tu proveedor de alojamiento web es, una vez más, la parte encargada de la configuración de tu caché. Tendrás que buscar su documentación y seguir las instrucciones para activar las cachés locales y establecer fechas de caducidad (que indican a los navegadores con qué frecuencia deben actualizar los recursos en caché de tu sitio).

11. Usa una red de distribución de contenido (CDN)

Las cachés del navegador solo ayudan a las audiencias que ya han visitado tu sitio web. Las redes de distribución de contenido, o CDN, almacenan los recursos lo más cerca posible de cada visitante para reducir los tiempos de carga.

Las CDN no dependen de máquinas locales para almacenar los recursos. Simplemente distribuyen tus recursos a una red de servidores situados en distintas ubicaciones. Eso significa que, en lugar de tener un servidor en Virginia que responda a todas las solicitudes, puedes tener un servidor en Virginia, otro en California, otro en Illinois, etc. Las empresas que atienden a audiencias internacionales pueden trabajar con CDN internacionales, de modo que tengan servidores en varios países, regiones y continentes.

Cada vez que un navegador envía una solicitud para cargar tu 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 como la velocidad de carga de las páginas se mide en una escala muy pequeña, las CDN marcan una diferencia notable.

12. Audita tus plugins con regularidad

Los plugins, complementos y extensiones ahorran muchísimo tiempo a la mayoría de los desarrolladores web. Pero, al igual que los scripts externos, los plugins sobrecargados pueden ralentizar tu página. Mejora el rendimiento de tu sitio web revisando tu biblioteca de plugins para ver si queda algún lastre que ya no utilices.

A veces necesitas todos tus plugins, pero tus páginas siguen cargando demasiado despacio. En ese caso, es hora de averiguar quién es el culpable. Copia tu sitio en un entorno de staging, desactiva todos tus plugins y prueba la velocidad de carga de tu sitio. Después, activa los plugins de uno en uno para determinar si un solo plugin está hundiendo tus métricas de rendimiento. (Asegúrate de activar, probar y luego desactivar cada plugin para no medir por accidente efectos acumulativos.)

Por suerte, con tantos plugins disponibles, lo más probable es que puedas encontrar un sustituto para cualquier herramienta lenta.

Otra opción es buscar plugins optimizados para la velocidad. Por ejemplo, nuestra tecnología de visualización de Ratings & Reviews se diseñó para que tu sitio web funcione con rapidez, y nuestros desarrolladores compartieron los pasos que dieron para cumplir esa promesa. Busca herramientas creadas con esta filosofía —que usen buenas prácticas como la minificación y la reducción de archivos de script, el almacenamiento en caché y la carga diferida— para que tus auditorías sean pan comido.

13. Elimina los pop-ups innecesarios

Sí, lo diremos. Los pop-ups son muy impopulares. Dan lugar a una mala experiencia, sobre todo en dispositivos móviles. Incluso si crees que tus pop-ups están hechos con buen gusto y son útiles, los usuarios de internet se enfrentan todo el día a una avalancha de modales, superposiciones y widgets de chat. Todo el mundo está harto de los pop-upsSe abre en una ventana nueva, y si contribuyes a ello, estás erosionando la confianza de tus consumidores.

La mayoría de los pop-ups llaman a scripts externos y hacen referencia a recursos como imágenes y fuentes, que el navegador tiene que cargar. Los modales que aparecen de forma condicional tienen que recopilar datos de la audiencia antes de activarse, lo que también lleva tiempo. Y si tu Total Blocking Time es alto, puede que los usuarios no puedan cerrar estos elementos mientras se carga el resto de tu sitio. Este retraso influiría en la percepción que tienen los usuarios de la velocidad de tu sitio, aunque no hubiera una ralentización real.

Sin embargo, la ralentización es real, igual que la antipatía casi universal hacia estas herramientas. Eliminarlas de tu 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 está diciendo 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 tu web. Después, su navegador empieza a leer tus archivos HTML y a solicitar recursos a tu servidor o CDN para poder renderizar el sitio web que has diseñado.

Son muchos los servicios que se unen para que tu sitio aparezca. Si alguno de ellos es lento, la velocidad de tu página se verá afectada negativamente. Por eso la opción más barata no es necesariamente la mejor para tu infraestructura técnica.

Por ejemplo, muchos planes básicos de alojamiento web son compartidos. Esto significa que otros sitios web usan el mismo servidor que tú, así que un pico de tráfico en uno de ellos podría ralentizar tus tiempos de carga. El alojamiento VPS (para sitios en crecimiento) o los servidores web dedicados (para quienes se lo puedan permitir) darán mejores resultados.

También quieres asegurarte de que tu registrador de dominios, que se encarga del alojamiento DNS, tenga un alto rendimiento. DNSPerf mantiene un registro continuo del rendimiento del DNS para que puedas ver por ti mismo cómo se comparan los distintos proveedores.

Por supuesto, la velocidad no importa solo en los niveles más altos. Hablamos de buscar plugins ligeros 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, pueden seguir afectando al rendimiento de tu sitio web de e-commerce.

15. Supervisa el funcionamiento de la web

Comprobar de vez en cuando el rendimiento de tu sitio web para ver si hay grandes problemas es una buena idea. Supervisarlo constantemente para enterarte en el mismo instante en que surja un problema es aún más inteligente.

Puedes invertir en herramientas que recopilen datos sobre la experiencia de tus usuarios para mostrar cómo funciona tu sitio en el mundo real. Como muchos compradores te visitarán desde configuraciones distintas a la tuya, la monitorización de usuarios reales ofrece una perspectiva nueva.

Otras herramientas fingen ser visitantes humanos, usando una serie de scripts para navegar por tu web y probar su rendimiento. Los sistemas de monitorización sintética como estos son más útiles para los equipos que quieren recopilar datos de pruebas controladas. Si estás en pleno proceso de optimización de tu web, la monitorización sintética te ayudará a detectar los cambios que realmente marcan la diferencia. Estos sistemas también pueden ejecutar pruebas programadas con el objetivo de detectar problemas graves antes de que se topen con ellos tus clientes.

Hay muchas herramientas que realizan ambas tareas (y más):

• Site24x7 realiza por ti monitorización sintética y de usuarios reales

• LogRocket monitoriza a los usuarios e identifica los errores y las interacciones con la web con las que suelen tener dificultades

• New Relic es un sistema de monitorización sintética de extremo a extremo que se integra con prácticamente cualquier infraestructura que existe

Uses la herramienta que uses, asegúrate de configurar las alertas para que te avisen cuando algo vaya mal. Cuanto antes puedas solucionar el problema, menos clientes decepcionarás.

El rendimiento de la web gira en torno a la necesidad de velocidad

A medida que las conexiones a internet y móviles se vuelven más rápidas y aún más omnipresentes, los estándares de los consumidores seguirán subiendo. Ofrecer una experiencia rápida y cómoda es una expectativa básica. Las empresas que consigan destacar en móvil y reducir los tiempos de carga a un segundo o menos tendrán la oportunidad de captar más cuota de mercado.

La experiencia de cliente que ofreces está directamente relacionada con tus tasas de conversión y de retención, y el rendimiento de tu sitio web está directamente relacionado con esa experiencia de cliente. La optimización del sitio web no es un proyecto que pueda esperar a un día de lluvia. Es una parte esencial para atraer clientes a tu sitio y conseguir más ventas.

Mejorar la velocidad de tu web no es la única forma de llegar a más clientes. Descubre estas formas de aumentar el tráfico orgánico para mantener tu impulso en las SERP.