6 consejos para mejorar el rendimiento y la experiencia de usuario

6 consejos para mejorar el rendimiento y la experiencia de usuario

2013 ha visto un aumento significativo en la cantidad de personas que recurren al diseño web receptivo como una solución para brindar una experiencia consistente en diferentes resoluciones de pantalla.

Este es el por qué.

Los visitantes de la web esperan una experiencia similar independientemente del dispositivo que estén utilizando. Por lo tanto, si una persona visita su sitio y no está optimizado para su máquina, es muy probable que termine yéndose y no regrese.

diseño de respuesta

Lo que Google recomienda

Google ha salido con algunos recomendaciones y herramientas para ayudar a los webmasters a mejorar el rendimiento en los dispositivos de teléfonos inteligentes. Si desea posicionarse bien en Google y ganar puntos con sus visitantes (¿y quién de nosotros no lo quiere?), vale la pena escuchar.

La investigación ha demostrado que si hay un retraso superior a un segundo, puede interrumpir el tren de pensamiento del usuario y provocar una experiencia de usuario deficiente.

Google recomienda que su página web no necesite cargarse dentro de este período de tiempo pero, al priorizar el contenido de la mitad superior de la página mientras el resto de la página web se carga en segundo plano, esto debería ser posible.

google-rwd-velocidad

Google recomienda que el tiempo de respuesta de su servidor sea inferior a 200 ms y otros 200 ms para que se reproduzca el contenido de la mitad superior de la página.

También recomiendan que:

  • Se debe minimizar el número de redireccionamientos
  • Se debe minimizar el número de viajes de ida y vuelta al primer renderizado
  • Evite el bloqueo externo de JavaScript y CSS en el contenido de la mitad superior de la página
  • Optimice la ejecución de JavaScript y el tiempo de renderizado

Pero hay otro problema aquí.

Las páginas web son cada vez más grandes

El tamaño medio de una página web es ahora un considerable 1532 KB y creciendo más grande cada día. Esto es malo tanto para los propietarios de sitios como para los usuarios. No necesita ser un experto para saber que las páginas más grandes conducen a un rendimiento más lento y costos de ancho de banda más altos.

Si bien las páginas más grandes tienen un impacto en los usuarios de escritorio, las personas a las que más afecta esto son los usuarios de dispositivos móviles. Las personas usan sus teléfonos inteligentes para descubrir información, ya que es rápido y fácil de hacerlo, pero con la creciente cantidad de páginas, puede llevar mucho tiempo cargar una página web en un dispositivo móvil, especialmente si está usando 3G.

Recientemente, Guy Podjarny realizó algunas pruebas en sitios que utilizan un diseño web receptivo (RWD). Descubrió que la mayoría de los sitios RWD descargaban el contenido completo de la página en diferentes resoluciones de pantalla, a pesar de que había algunas diferencias en el contenido y el tamaño de las imágenes que se mostraban en las pantallas de varios tamaños.

tamaño-de-página-2013

A medida que las páginas web continúan creciendo y crece la demanda de páginas perfectamente optimizadas para todos los dispositivos, es importante que sus diseñadores y desarrolladores prioricen el rendimiento y establezcan un presupuesto de rendimiento para su proyecto.

Echemos un vistazo a cómo podrías hacer eso…

#1 Establezca un presupuesto de rendimiento

Un presupuesto de rendimiento es un límite predeterminado en la velocidad o el tamaño total de una página. Al igual que un presupuesto financiero, sirve como un tope para gastar (o, en este caso) para inflar la página. Esto significa que si es necesario agregar o modificar nuevas páginas o elementos, debe asegurarse de que haya suficiente espacio dentro del «presupuesto».

Si descubre que agregar un nuevo elemento significa que excederá su presupuesto, debe tomar la decisión de optimizar una función existente para que sea menos compleja o más rápida, eliminar una función existente por completo o no agregar la nueva función en absoluto.

#2 Optimización de imágenes en diseño web receptivo

Uno de los mayores problemas con las páginas web infladas y la carga lenta de páginas en sitios web receptivos son las imágenes. Especialmente con el creciente número de «Dispositivos Retina», la gente quiere imágenes de mayor resolución para sus sitios y es importante que las páginas no se abarroten con archivos de imágenes de 1 MB.

contenido-tipo-tamaño

Para administrar esto, puede usar un servicio como Imágenes adaptables. Es un script PHP muy pequeño que detecta el tamaño de la pantalla y luego automáticamente cambia el tamaño, almacena en caché y sirve una versión reducida de la imagen. El software también se puede personalizar, por lo que puede configurar la calidad de las imágenes y el almacenamiento en caché del navegador.

Algunas personas podrían argumentar que los proveedores de servicios móviles ya comprimen las imágenes automáticamente pero, desafortunadamente, ese no es siempre el caso con todos ellos.

#3 Habilitar compresión

Debe comprimir sus recursos usando gzip para reducir la cantidad de bytes que una página envía a través de la red. Esto hará que sea mucho más fácil para los usuarios acceder y navegar por su sitio web con páginas que se cargan más rápido, además de hacer que el uso de los recursos de su servidor web sea más eficiente.

Además, debe minimizar CSS y JavaScript eliminando los espacios en blanco y los saltos de línea innecesarios, ya que esto ayudará a reducir el tamaño de los archivos y aumentará la velocidad con la que se descargan y analizan.

#4 Excluye elementos de página innecesarios

Es fundamental que comprenda cómo los usuarios utilizan los diferentes elementos de su página, ya que facilita determinar qué elementos se pueden eliminar para mejorar el rendimiento.

Como ejemplo hipotético, es posible que desee probar un nuevo widget en una página web que muestre sus testimonios, pero agregarlo excederá su presupuesto de rendimiento. En la página web, tiene tres formularios de registro de correo electrónico en diferentes ubicaciones. Si tiene la configuración de análisis correcta, sabrá qué formulario proporciona la menor cantidad de registros de correo electrónico y puede eliminarlo fácilmente a favor del nuevo widget de testimonios.

Para otras páginas, podría valer la pena considerar la exclusión de solicitudes de terceros, como los botones para compartir en redes sociales. ZurBlog destaca que a «… cargar los botones de redes sociales de Facebook, Twitter y Google para un total de 19 solicitudes requiere 246.7k de ancho de banda».

Si una página receptiva no depende en gran medida del intercambio social como su principal fuente de tráfico, podría tener sentido eliminarla.

#5 Elija la solución de hospedaje adecuada

No importa cuántos ajustes realice en su sitio web, gran parte del rendimiento se reduce a la calidad de los servidores que está utilizando.

Existe una amplia gama de diferentes paquetes de alojamiento que ofrecen una variedad de beneficios y estructuras de precios complejas, desde alojamiento compartido económico que cuesta unos pocos dólares al mes, hasta servicios en la nube y servidores dedicados totalmente administrados que cuestan cientos de dólares al mes.

Es importante invertir tiempo en la investigación de paquetes de alojamiento web para asegurarse de obtener la mejor relación calidad-precio y poder lograr el rendimiento que demandan sus usuarios.

Puede comenzar observando el rendimiento de sus competidores y sitios web en diferentes nichos para ver cuáles son los más rápidos. Una vez que sepa qué sitios funcionan mejor, puede ingresar sus detalles en whoishostingthis.comque le mostrará qué proveedor de alojamiento están utilizando, así como reseñas sobre la calidad de la atención al cliente y los problemas con el tiempo de inactividad.

Si aún no está seguro de si vale la pena invertir en una configuración de servidor más robusta, considere esto: Google usa la velocidad de la página como un factor de clasificación y existe una correlación entre la tiempo hasta el primer byte (TTFB) y clasificaciones de búsqueda.

ttfb-velocidad

Los sitios con un TTFB más bajo responden más rápido y tienen mejores clasificaciones de búsqueda que los sitios más lentos con un TTFB más alto.

Además de eso, cada segundo adicional que tarda en cargarse su sitio web, provocará un 7% de disminución en su tasa de conversión.

#6 Use una red de entrega de contenido para contenido estático

Una red de entrega de contenido (CDN) es una red de diferentes servidores que duplican su contenido a través de ellos; esto mejora el rendimiento al entregar el contenido en función de qué tan cerca están sus usuarios del servidor determinado por la cantidad mínima de nodos.

Por ejemplo, si una CDN tiene servidores en Londres, Texas y China, es probable que un usuario de la India vea el contenido en el servidor de China, mientras que un usuario de París probablemente recibirá el contenido a través del servidor de Londres.

Al elegir una red de entrega de contenido, las personas tienden a considerar la velocidad y el ancho de banda.

Para maximizar la velocidad, deberá asegurarse de que su proveedor tenga ubicaciones de servidor cerca de la mayoría de su público objetivo. Por ejemplo, si su audiencia se encuentra principalmente en el Reino Unido, es importante que su CDN tenga servidores en el Reino Unido, Francia o Irlanda.

En cuanto al ancho de banda, mire sus estadísticas mensuales en su panel de control de alojamiento normal. Si solo usa 5 GB de ancho de banda por mes, no tiene mucho sentido optar por los paquetes más grandes. Debería considerar comprar un paquete ligeramente más alto que sus requisitos actuales para permitir el crecimiento.

Las redes de entrega de contenido más populares son MaxCDN y Cloudflare, que ofrecen planes iniciales muy asequibles.

Una vez que haya pasado por este proceso y haya seguido las pautas recomendadas por Google, debe probar su sitio con el Herramienta PageSpeed. Le mostrará qué tan bien funciona su sitio y le hará las recomendaciones necesarias para futuras mejoras.

bueno para google y sus usuarios móviles

Al seguir estos pasos y seguir las pautas proporcionadas por Google, su sitio receptivo estará optimizado para el rendimiento y brindará a sus usuarios una gran experiencia.

¿Ya creaste un sitio Responsive? ¿Ha priorizado el rendimiento? Estaré encantado de responder a sus preguntas en los comentarios a continuación.

[authorsure_author_box]