Rendimiento y velocidad web: las mejores técnicas
Publicado: 2021-08-30La velocidad de carga y el rendimiento web están en boca de todos en las comunidades de SEO y webperf, y más ampliamente en E-marketing y E-commerce.
Como nos recuerda Andy Davies, consultor y referente en rendimiento web:
“El contexto influye en la experiencia,
la experiencia influye en el comportamiento,
el comportamiento influye en los ingresos del negocio”.
Entonces, ya sea que esté tratando de aumentar sus ingresos, su SEO o ambos, seguramente sabrá que las páginas rápidas son esenciales para la calidad de su experiencia de usuario. La velocidad también ayuda a enviar las señales correctas a Google, que ha tenido en cuenta la velocidad desde la actualización de Page Experience.
Como también sabes, un sitio debe cumplir con las expectativas de los usuarios antes de cumplir con las de los motores de búsqueda. Por lo tanto, la velocidad de visualización y la interactividad son parte de los requisitos previos para una experiencia de usuario de calidad, ¡principalmente para promover el compromiso y las conversiones! Tenga en cuenta, por ejemplo, que, según un estudio de Google, el 77% de los usuarios de Internet se inclinan más por realizar un pedido en un sitio o una aplicación que les permita finalizar su compra rápidamente.
Pero, ¿qué técnicas tienen el impacto más visible en sus visitantes, para ofrecerles una experiencia de navegación fluida y una verdadera sensación de velocidad?
Aquí hay una lista de verificación organizada por palancas de optimización, para una mejor velocidad de visualización e interactividad.
Optimizar la velocidad de visualización de un sitio
Cuanto más clara es una página, menos tiempo necesita mostrarse.
Además de la optimización de recursos, puedes establecer la velocidad de visualización y las dimensiones de los diferentes elementos que componen una página para mejorar la sensación de velocidad y usabilidad. Aquí hay algunas técnicas esenciales:
- Comprimir imágenes a los formatos más eficientes
Los formatos de nueva generación WebP (recomendado por Google) y AVIF (que ofrece aún mejores resultados) te permiten reducir el peso de las imágenes hasta en un 50% respecto a JPEG, manteniendo una calidad visual óptima. Sabiendo que el peso de las imágenes representa alrededor del 50% del peso de las páginas, es una palanca esencial para hacer que tus páginas sean rápidas. - Adapte la visualización de medios e imágenes a diferentes pantallas
Cambie el tamaño y defina el tamaño de los medios y las imágenes dependiendo de si el usuario visita su sitio desde un dispositivo móvil o una computadora. - Reducir el peso de los recursos de la página
Optimice su código: la minificación (eliminación de caracteres innecesarios) de archivos HTML, JS y CSS, y la compresión de recursos (formatos Gzip y Brotli) y, en algunos casos, la concatenación, son buenas prácticas para reducir el peso de las páginas y, por lo tanto, acelerarlas. la visualización en el navegador. - Carga lenta
Esta técnica consiste en cargar solo lo que se ve en pantalla, en lugar de cargar toda la página. Es decir, el navegador sólo realiza el esfuerzo estrictamente necesario en relación con lo que el visitante necesita ver en su pantalla. - Optimizar fuentes
Puede optimizar el formato de sus fuentes (p. ej., WOFF2, que ahorra entre un 30 y un 50 % en el tamaño del archivo), y también elegir mostrar el texto incluso si el navegador aún no ha cargado la fuente, para acelerar la representación. - Elimine los recursos de bloqueo y cárguelos de forma asíncrona
Evite bloquear la representación de sus páginas: prefiera cargar recursos de forma asíncrona, especialmente para CSS (CSS crítico), JS (async y defer) y fuentes (display:swap).
Eso sí, si no tienes otra opción porque algunos recursos son imprescindibles al inicio de la carga de la página, estos recursos deben ser lo más ligeros posible. - Adopte la estrategia de almacenamiento en caché adecuada
Para que las páginas se muestren lo más rápido posible para sus usuarios, guarde en caché los elementos estáticos.
Para hacer esto, debe identificar el contenido dinámico y el contenido estático de antemano, y definir las reglas para almacenar en caché el contenido estático: durante cuánto tiempo y en qué caché (navegador, origen o CDN).
[Estudio de caso] Administrar el rastreo de bots de Google
Lea el estudio de casoMejore la interactividad: páginas que responden al instante
Además de la velocidad a la que se muestran los elementos en el navegador, la capacidad de interacción es fundamental para proporcionar una satisfacción total a tus usuarios.
De lo contrario, los expone a una frustración que se traduce en comportamientos como clics de ira, el mouse moviéndose frenéticamente en la página o desplazamiento aleatorio para verificar que la página funciona.
En el peor de los casos, sus visitantes regresan a la página anterior, o abandonan su sitio para hacer una nueva búsqueda en Google, o se van a sus competidores.
Recuerda que en caso de una experiencia negativa, el 43% de los internautas acudirá al sitio de un competidor para su próxima compra. Por lo tanto, debe darse los medios para atraer pero también para mantener a sus visitantes.
Muy a menudo, son los scripts de terceros y Javascript los que pueden ser responsables de una mala interactividad. De hecho, mientras el navegador esté ocupado recuperando, analizando y ejecutando JavaScript, no puede responder a las interacciones del usuario.
Aquí nuevamente, hay técnicas para optimizar su código y sus Terceros, y permitir que sus visitantes disfruten de una experiencia óptima:
- Reducir el impacto de Terceros retrasando su carga
Puede comenzar a cargar y ejecutar scripts después de que los elementos de contenido prioritarios se muestren en su página. Pero cuidado: tenga en cuenta que aplazar la carga de JavaScript no lo hace gratuito en términos de rendimiento.
Puede ser cuestión de posponer la carga de algunas funcionalidades (chat, widgets, seguimiento...) después de la visualización de los elementos principales para tranquilizar al usuario, pero no anula el tiempo necesario para que el navegador procese el código, sino que sólo lo cambia en el tiempo. - Reducir el tiempo de ejecución de JavaScript
Divida las tareas que toman tiempo de su navegador (Tareas largas) y también asegúrese de favorecer el procesamiento corto en respuesta a las interacciones del usuario (por ejemplo, evite escuchar activamente ciertos eventos como el desplazamiento; y aproveche los momentos en que el navegador tiene tiempo libre para ejecutar cierto procesamiento de JavaScript). - Reducir el trabajo del hilo principal
El navegador podrá responder más rápido a las interacciones al reducir la cantidad de solicitudes y el tamaño de los intercambios.
Ahorre tiempo también: automatice las técnicas de optimización de su sitio
Acabamos de cubrir dos aspectos muy importantes de la experiencia del usuario: la velocidad de visualización y la interactividad. ¡La buena noticia es que todas las optimizaciones que acabamos de mencionar en esta lista de verificación se pueden automatizar!
Además, es posible que haya vinculado a dos de los principales elementos vitales de la Web de Google que le permiten evaluar estos aspectos, respectivamente: la pintura con contenido más grande y el primer retraso de entrada.
Por supuesto, también debe pensar en mejorar la estabilidad visual de sus páginas para una experiencia de usuario óptima, trabajando en su puntaje de cambio de diseño acumulativo.
Debes saber que estas 3 métricas (LCP, CLS y Total Blocking Time, o TBT, equivalente a FID) representan el 70% de la puntuación atribuida por PageSpeed Insights.
Entonces, lógicamente, cualquier cosa que haga para acelerar sus páginas y optimizar estas métricas tendrá un impacto positivo en sus usuarios, así como en sus puntajes de rendimiento.
En resumen, puede aplicar el mismo enfoque a su UX que lo hace en SEO: el contenido y la experiencia de calidad garantizan la satisfacción del usuario y contribuyen a que Google lo indexe mejor.
Además, al igual que en el SEO, las optimizaciones de webperf deben mantenerse en el tiempo.
Esto requiere tiempo y experiencia porque las técnicas y las métricas evolucionan rápidamente. Además, incluso en equipos grandes, los recursos técnicos no siempre tienen el tiempo o el conocimiento para mantener de manera efectiva la velocidad de un sitio; y desplegar recursos y energía para una operación de comando que cae como un soufflé es muy frustrante e incluso desalentador.
Entonces, en lugar de perder tiempo en mantenimiento, temer los efectos secundarios en cada evolución del sitio y multiplicar los complementos a riesgo de sobrecargarlo, ¡es mejor automatizar la aplicación de todas las técnicas de optimización frontend con una sola herramienta!
Debe saber que, en la mayoría de los casos, para sitios de comercio electrónico de alto tráfico, el ROI de una solución de optimización webperf es fácil de medir.
De hecho, Google ha estimado que -0,1 segundos de tiempo de carga pueden generar un 8 % de conversiones, lo que una solución de optimización de frontend puede lograr muy fácilmente.
En Fasterize, hemos descubierto que, a menudo, incluso un aumento en las tasas de conversión de menos de 1 punto es suficiente para garantizar el ROI de nuestra solución SaaS; por no hablar del ahorro de tiempo de los equipos técnicos.
Siendo los negocios los tendones de la guerra, puede hacer el cálculo usted mismo, ¡y es fácil de hacer! Le permite comprender el interés de automatizar la optimización del rendimiento y convencer e involucrar a sus equipos internos.
¡Ahorre tiempo en todos los frentes!