5 formas de optimizar el tiempo de carga de la página y la experiencia de usuario en 2022

La velocidad a la que se carga el contenido de su página tiene un impacto significativo en UX, SEO y, por supuesto, en la primera impresión de su lector.

Si desea que su contenido obtenga tráfico, cobertura y reconocimiento en los motores de búsqueda, debe cuidar el rendimiento de su sitio; de los cuales la velocidad de la página es crucial.

Pero, ¿por qué molestarse en absoluto? Porque la optimización de la velocidad de la página tiene un impacto significativo en la experiencia del usuario (UX), y la UX afecta las clasificaciones de Google, así como la impresión que los visitantes tienen de su sitio web.

Los usuarios son un grupo impaciente y, a menudo, equiparan la velocidad con la calidad: la mayoría no está dispuesta a esperar a que se carguen las páginas. Si un sitio tiene problemas de rendimiento, existe una alta probabilidad de que abandone su página y visite otro recurso en su lugar, razón por la cual el rendimiento afecta directamente las métricas del sitio, como la tasa de rebote y el promedio. Tiempo en la página.

¿Por qué es importante el tiempo de carga de la página?

Más de la mitad de los visitantes de su sitio web abandonan una página si tarda más de 3 segundos en cargarse. Al mismo tiempo, el 47% de los visitantes esperan que un sitio web se cargue en no más de 2 segundos. En resumen, el tiempo de carga de la página es fundamental.

Hace unos años, Google anunció que la velocidad de carga de la página es uno de los indicadores más críticos para clasificar los sitios en las búsquedas. Desde entonces, se cree que han puesto cada vez más peso en la velocidad de carga de la página.

Además, Google anunció que después de mayo de 2021, todos los resultados de los motores de búsqueda tendrían en cuenta tanto la velocidad de carga de la página como la optimización para dispositivos móviles. 

Se considerarían igualmente significativos junto con otros indicadores de Core Web Vitale, que es un conjunto de métricas que muestran tres Indicadores de salud del sitio web: velocidad de carga, interactividad y estabilidad visual.

Cómo administrar el tiempo de carga de la página: 5 formas

La optimización y la gestión de la velocidad de carga son una responsabilidad compartida entre el equipo de desarrollo y los creadores de contenido. Aquí hay cinco cosas a considerar al crear contenido para 2022. También se incluyen en la lista puntos clave para discutir con su equipo de desarrollo.

1. Plan de optimización de imágenes

Uno de los factores más importantes que afectan la velocidad de carga de la página es el tamaño de la imagen.

También es una de las formas más fáciles y efectivas de aumentar la velocidad de carga de su página.

Los diseñadores a menudo se preocupan por la calidad de las fotos y las imágenes, pero olvidan que el tamaño puede tener un impacto crítico en la velocidad de carga de la página.

Es especialmente importante para las imágenes en la primera pantalla que se carga. Idealmente, siempre debe usar, diseñar y recortar imágenes para que se ajusten a la pantalla del dispositivo y estén bien comprimidas.

Si la plataforma que está utilizando no modifica las imágenes, puede preparar imágenes del tamaño correcto con anticipación (según el tipo de contenido). Por supuesto, puede hacerlo usted mismo, pero también hay varias herramientas que redimensionan y comprimen automáticamente las imágenes sin afectar su calidad:

• Imageoptim y Squoosh.app son útiles para optimizar imágenes de una en una (optimizando sin perder calidad y eliminando metadatos innecesarios).
• Photoshop y otro software que le permite optimizar imágenes en lotes.
• También puede experimentar con el formato de las imágenes.

En la búsqueda de la calidad, los creadores de contenido a menudo abusan de las imágenes en formato de archivo PNG, a pesar de que el formato PNG no tiene sentido como una opción óptima para la velocidad de carga de la página. Por ejemplo, no tiene sentido usar PNG para fotos, mientras que para imágenes gráficas suele ser la mejor opción. Experimente con diferentes formatos de archivo para elegir la mejor combinación de velocidad y calidad de descarga.

Y si usa bibliotecas de imágenes (Unsplash u otras), elija el tamaño de imagen adecuado para su uso; no use imágenes de tamaño original (pueden ser demasiado grandes o demasiado pequeñas).

2. Optimice y mejore las imágenes que ya están en su sitio web

Hay varias opciones por parte del equipo de desarrollo, que pueden ayudar significativamente con la optimización de las imágenes ya publicadas en su sitio web. Éstos incluyen:

• Conversión de imágenes a formatos de archivo de imagen modernos

Vale la pena convertir imágenes a formatos de imagen modernos (webp, etc.). Google menciona el uso de formatos de imagen modernos como una influencia importante en la velocidad de carga de la página.

• Carga diferida

La carga diferida ayuda a acelerar la carga de imágenes debajo de la primera pantalla. Esta técnica es más útil si está utilizando muchas imágenes o incrustaciones en su contenido. Sin embargo, recuerde que la carga diferida solo ayuda a que la página se cargue más rápido la primera vez, no resuelve el problema de las imágenes pesadas. Por lo tanto, los enfoques de optimización de imágenes sugeridos en la sección anterior siguen siendo importantes.

• Usando srcset

Mejore la configuración de la imagen receptiva para que el navegador obtenga el tamaño de imagen adecuado. Por ejemplo, srcset es un atributo que le permite especificar un conjunto de tamaños de imagen, y luego el navegador elige el mejor tamaño para mostrar al usuario, según las características de la pantalla del usuario. En este caso, no necesitará optimizar las imágenes antes de subirlas al sitio.

3. Incluya GiFs en lugar de formatos de video

Trate de no usar GiFs, porque casi siempre afectan dramáticamente la velocidad de carga de la página. En su lugar, convierta sus gifs a formatos de video. 

Están optimizados mucho mejor para la velocidad de carga de la página y tienen mejor calidad. Si usa un GiF, intente usar un servicio especial como giphy o imgur donde ya están optimizados, o use un servicio que pueda ayudarlo a convertirlos en formatos de video.

4. Análisis de auditoría y rastreadores

Los scripts y rastreadores de análisis son factores críticos que también afectan la velocidad de carga de la página. Sin embargo, a menudo es imposible negarse a usarlos. En el caso de que tenga que usarlos, es esencial auditar periódicamente los rastreadores y formularios del sitio que ya no se usan y, cuando los encuentre, deshabilitarlos de inmediato.

Si es posible, intente utilizar todas sus herramientas desde un solo servicio. ¿Por qué? Porque a menudo están mejor adaptados para trabajar juntos en términos de velocidad de carga de la página. Considere también aplazar la carga de algunas partes de los rastreadores JS, dividiéndolas en dos categorías:

• Los rastreadores de alta prioridad, que deben medir cada acción de cada usuario (es decir, Google Analytics), deben cargarse de la manera estándar, lo antes posible en la sección <head>.

• Rastreadores de baja prioridad para los cuales la pérdida de visitas fallidas es aceptable. Considere usar la carga diferida para los formularios de comentarios, la recopilación de segmentos para la reorientación y herramientas similares. Posponga la carga de 5 a 10 segundos o use técnicas más avanzadas. La ventaja de una carga más rápida del sitio a menudo compensa la pérdida de una pequeña cantidad de datos.

5. Utilice la carga asincrónica, aplazando la carga de CSS y JavaScript

La mayoría de las páginas de sitios web tienen mucho CSS y javascript en el encabezado del sitio, lo que bloquea la carga y visualización de la página. Esto se traduce en tiempos de carga más largos.

La práctica recomendada en 2022 es cargar inmediatamente solo los recursos que se necesitan para mostrar ‘contenido en la mitad superior de la página’. Luego se podrán cargar otros recursos de manera diferida y ordenada.

La optimización del tiempo de carga de la página ofrece resultados

Los pasos esenciales necesarios para optimizar la velocidad de carga de su página incluyen:

1. Optimizando sus imágenes
2. Mejorando sus imágenes ya publicadas
3. Reemplazo del formato GiF para video
4. Auditar y cambiar periódicamente sus análisis y seguimientos
5. Mirando el uso de carga asíncrona.

Por supuesto, esta es solo una breve lista de los pasos que debe seguir, pero son los primeros pasos importantes no solo para satisfacer las demandas de una buena UX sino también para tiempos de carga de página más rápidos.