Velocidad de carga web y experiencia de usuario

Como velocidad de carga web entendemos al tiempo que tarda nuestro navegador en mostrar la página completa desde que hace su petición al servidor web.

En esta sección hablaremos de los tiempos de respuesta y la velocidad de la carga de la web, pero desde el punto de vista de experiencia de usuario. Este apartado está muy relacionado con el de hosting y seo, pero indagaremos en diferentes aspectos que influyen no sólo a la velocidad de carga de nuestra web, sino que también afectan a la experiencia de usuario, la cual, puede ser mala incluso con buenos tiempos de respuesta.

Pare analizar estos factores utilizaremos la herramienta de Google PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/

velocidad de carga web google speed insight

Utilizando esta herramienta Google analizará el tiempo de respuesta de la página web introducida en la herramienta y analizará la experiencia de los usuarios tanto en móvil como en PC.

A continuación, pasaremos a explicar los diferentes puntos que analiza la herramienta y como resolverlos:

VELOCIDAD

  • Javascripts y css que bloquen la presentación de la página.

En muchas ocasiones los javascripts y css son cargados en el header y de manera síncrona. Esto lo que podrá provocar en el caso de que estos sean pesados y complejos es que la presentación de la página se ralentice hasta terminar de ejecutar los estilos y el código javascript. Para evitar estos problemas se recomienda cargar los javascripts (siempre que sea posible) y los css al final de la página o introducirlos en el propio HTML en el caso que no sean muy pesados. La otra opción es configurar la descarga y ejecución de estos ficheros de forma asíncrona utilizando la etiqueta script y el atributo async.

<script async src="fichero.js">

EXPERIENCIA DE USUARIO

En esta sección se medirán elementos como:

  • Tamaño y localización de los botones para dispositivos móviles.

Esta herramienta es capaz de analizar la localización y el tamaño de los botones y tomar una decisión sobre si pulsar los mismos con los dedos será fácil o no.

  • Adaptar el tamaño de la página a los dispositivos móviles.

Se comprueba que la página encaja perfectamente en dispositivos móviles. Esto está muy relacionado con el apartado que veremos más adelante en la sección de adaptación a móviles de las páginas webs.

  • Utilizar tamaños de fuentes adecuados a los dispositivos móviles.

Es muy importante comprobar que los textos de nuestra página son fácilmente legibles en todos los dispositivos móviles.

Herramientas útiles para optimizar la velocidad de carga de la web

A continuación, os enumeramos algunas de las herramientas más útiles para optimizar el tiempo de respuesta de nuestra web.

Compresión de imágenes

A la hora de comprimir imágenes tenemos que tener en cuenta dos posibles métodos a combinar para la reducción del tamaño.

Compresión: reducimos el tamaño de la imagen reduciendo el número de pixels de la misma.

Reducción de tamaño: reducimos el tamaño de las imágenes en imágenes que tienen un alto y ancho más grande de lo que necesitamos.

En algunas ocasiones podremos utilizar sólo la compresión y en otras podremos utilizar ambos métodos.

Compressor.io

velocidad de carga web compressor io

Herramienta gratuita que te permite comprimir imágenes de varios tipos y configurar la compresión si queremos que sea de mucha pérdida de calidad (lossy) o con la menor pérdida de calidad posibles (lossless).

Kraken.io

velocidad de carga web kraken io

Herramienta más completa que la anterior, pero de pago. Sus precios no son excesivos y si nuestra web va a requerir mostrar muchas imágenes puede ser interesante realizar su pago, al menos, durante los meses que dure el desarrollo de nuestra web.

La herramienta permite comprimir y reducir el tamaño de las imágenes.

Además, permite integrarse con plataforma como WordPress y Magento y posee la posibilidad de hacer compresiones por lotes, muy interesante funcionalidad cuando hablamos de grandes webs con muchas imágenes.

Podéis hacer diferentes pruebas de forma gratuita en https://kraken.io/web-interface

Minificación HTML, css y javascript

El objetivo de la minificación, como ya se ha comentado anteriormente, es el de reducir el tamaño de nuestros ficheros para optimizar la velocidad de carga web. Si las compresiones las queremos hacer de forma manual os recomendamos utilizar las siguientes webs:

Minificar css: https://cssminifier.com/

Minificar HTML: http://www.willpeavy.com/minifier/

Minificar js: https://jscompress.com/

De todas formas, si utilizamos un CMS o nuestra propia arquitectura web, podremos utilizar plugins o software de terceros que nos ayudarán a automatizar esta tarea y así evitar perder el tiempo haciéndola de forma manual.

Espero os parezca interesante como se enfoca en este artículo dos puntos muy importantes: la velocidad de carga web y la experiencia de usuario. ¿Conocéis algún otro factor a tener en cuenta? ¿Conocéis alguna herramienta que queráis sugerir?

2 comentarios en «Velocidad de carga web y experiencia de usuario»

  1. Hola Javier, en una parte mencionas lo siguiente: «La otra opción es configurar la descarga y ejecución de estos ficheros de forma asíncrona utilizando la etiqueta ….», a que etiqueta te refieres? Un saludo y buen post!

    Responder
    • Mil perdones por la demora en contestar…..no hemos parado en las últimas semanas. Muchas gracias por el aviso, efectivamente me había comido una parte. Ya la he actualizado. Me refería a añadir el atributo async para descargar los javascript de forma asíncrona.

      Responder

Deja un comentario

Recibe en tu correo de forma gratuita mi plantilla de análisis SEO y únete a Fullanchor
De acuerdo
Recibe en tu correo de forma gratuita mi plantilla con la checklist de redacción SEO
De acuerdo
¿No tienes tiempo para escribir artículos SEO?

Compra textos seo para impulsar tu web en Serptext 

Ver Serptext

Descubre como posiciona tu web y como lo hacen tus competidores

Introduce tu dominio y pruéba gratis SE Ranking

Si continuas utilizando este sitio, aceptas el uso de las cookies. Más Información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar