Rendimiento del sitio web y monitoreo de la salud: consejos y mejores prácticas

Configurar y ejecutar un sitio web o un proyecto de comercio electrónico es excelente; sin embargo, su trabajo está lejos de terminar una vez que su sitio esté en funcionamiento.

Sin un control adecuado de la salud y el rendimiento, su sitio web sufrirá las consecuencias, que pueden ser mucho mayores que simplemente una velocidad de carga lenta.

Dirijamos nuestra atención a un escenario hipotético e ideal en el que todos los sitios web del mundo funcionen como deberían. ¿Sabías que, además de disparar la satisfacción de los usuarios, también contribuiríamos a un mejor medio ambiente?

Los sitios web de bajo rendimiento no solo afectan a cualquiera que los cree o los use, sino que también dejan una mayor huella de carbono.

De acuerdo con la calculadora de carbono del sitio web, los sitios web tienen una huella de carbono y la página del sitio web promedio emite 0,5 gramos de dióxido de carbono por visita. Esa es solo la mediana.

Al mirar la media, que también considera sitios web altamente contaminantes, ese número sube a 0,9 gramos.

Aparte de los problemas a escala global, un sitio web poco saludable y con un rendimiento inadecuado le costará tiempo, dinero e ingresos. La salud del sitio web es similar a la nuestra: es fácil de descuidar y difícil de mejorar.

Debe conocer los componentes principales que conforman el estado del sitio web para llevar a cabo prácticas de monitoreo adecuadas para ayudar a ahorrar tiempo de procesamiento.

Con la aparición de creadores de sitios web rápidos y fáciles, la creación de sitios web se ha vuelto accesible para todos. ¡Todo lo que necesita hacer es registrarse, elegir un dominio, elegir su plantilla y listo! Tienes un sitio web en segundos.

Sin embargo, muchos propietarios de sitios web descartan el hecho de que la creación de un sitio web es solo el primer paso. El mantenimiento adecuado del rendimiento y la supervisión del estado también son cruciales.

Y en ese sentido, veamos algunos indicadores esenciales de salud y rendimiento del sitio web: qué son, cómo monitorearlos y cómo realizar mejoras.

Aspectos a monitorear para un alto puntaje de salud del sitio web

Vitales principales de la web

Imagen del autor, octubre de 2022

Perspectivas de velocidad de página de Google

Las primeras métricas que debe considerar al realizar pruebas de rendimiento son sus Core Web Vitals. Estos indicadores de rendimiento muestran la velocidad, la estabilidad y la capacidad de respuesta, lo que lo ayuda a comprender la calidad de la experiencia de usuario de su sitio web.

Varias herramientas rastrean sus Core Web Vitals, pero muchos propietarios de sitios web gravitan hacia una herramienta simple: Google PageSpeed ​​​​Insights.

Después de ingresar su URL en la herramienta, se le presentará un informe que muestra si aprobó su prueba Core Web Vitals y cualquier otro aspecto que deba controlar. Estas son las tres métricas clave que verá:

Pintura con contenido más grande (LCP)

Trate de obtener una puntuación de 2,5 segundos o menos .

Si su puntaje supera los 2,5 segundos, esto podría indicar lo siguiente: su servidor está retrasado, los tiempos de carga de los recursos no están a la par, tiene una gran cantidad de JavaScript y CSS que bloquean el procesamiento, o hay un procesamiento lento en el lado del cliente.

Primera demora de entrada (FID)

Apunta a una puntuación de 100 milisegundos o menos .

Si su puntaje excede ese tiempo, es posible que deba reducir el impacto del código de terceros, reducir el tiempo de ejecución de JavaScript, minimizar el trabajo del subproceso principal, mantener pequeños los tamaños de transferencia y el número de solicitudes bajo.

Cambio de diseño acumulativo (CLS)

Trate de obtener una puntuación de 0,1 o menos .

Si su puntaje supera esto, puede evitar cambios de diseño aleatorios al incluir atributos de tamaño en su contenido visual y de video (o reservar el espacio con cuadros de relación de aspecto CSS). Evite superponer su contenido y tenga cuidado al animar sus transiciones.

Bloqueadores de velocidad de página

Varios factores pueden afectar la velocidad de carga de su sitio web. Sin embargo, si tiene poco tiempo y le gustaría centrarse primero en los principales culpables, preste mucha atención a los siguientes factores:

• Código JavaScript y CSS no utilizado.
• Render bloquea JavaScript y código CSS.
• Código JavaScript y CSS no minimizado.
• Tamaños de archivo de imagen grandes (más sobre eso a continuación).
• Demasiadas cadenas de redirección.

Para mejorar la carga de archivos JavaScript y CSS, considere cargarlos previamente.

Otra opción sería habilitar sugerencias tempranas, que le dicen al navegador en la respuesta del servidor HTTP qué recursos debe comenzar a descargar aprovechando el "tiempo de reflexión del servidor", acelerando así la carga de la página.

Para probar su sitio web:

1. Vaya a https://pagespeed.web.dev/
2. Introduzca la URL de la página que desea escanear.

Recomendaría elegir su página de inicio primero.

Otra herramienta útil es WebPageTest.org, que también muestra su Core Web Vitals y otras métricas que pueden ayudarlo a mejorar drásticamente el rendimiento y la salud de su sitio web. Además, ¡es gratis!

Simplemente pegue la URL de una página en el cuadro de búsqueda que se muestra en el sitio y realizará una prueba completa desde una ubicación predeterminada.

También puede registrarse como usuario y elegir entre una lista de ubicaciones para probar su sitio web desde diferentes países, dispositivos y navegadores.

WebPageTest le mostrará exactamente dónde se encuentra su sitio web en términos de rendimiento y qué podría estar ralentizándolo a través de un Resumen de rendimiento compuesto por cuatro secciones clave: Oportunidades y experimentos, Métricas observadas, Mediciones de usuarios reales y Ejecuciones individuales.

Imagen del autor, octubre de 2022

En UCRAFT, usamos una combinación de herramientas como PageSpeed ​​Insights, Chrome Dev Tools, WebPageTest y varias otras, para obtener una comprensión clara de en qué debemos trabajar cuando se trata del rendimiento de nuestro sitio web, especialmente porque la industria SaaS es altamente competitivo ya.

Elementos de diseño

Captura de pantalla del autor, octubre de 2022

Cuando pensamos en el rendimiento del sitio web y el monitoreo de la salud, generalmente dejamos que el equipo técnico se ocupe de ellos.

Pero, ¿y si le dijera cómo diseña su sitio web y los elementos que elige pueden hacer o deshacer su rendimiento?

Así es, es hora de involucrar al equipo de diseño.

Optimización de imagen

Las imágenes son excelentes, pero pueden ralentizar su sitio web si no tienen el tamaño adecuado. Asegúrese de cambiar el tamaño de sus imágenes y evite cargar archivos gigantes cuando no se mostrarán en su totalidad.

Del mismo modo, comprima sus imágenes y pruebe diferentes tipos de archivos como WebP, JPEG 2000 y JPEG XR en lugar de optar por archivos JPEG o PNG más pesados.

Considere implementar la carga diferida nativa para garantizar que las imágenes se carguen cuando el usuario las vea, en lugar de cargarlas todas a la vez.

Casi todos los navegadores, incluidos Chrome, Safari y Firefox, admiten el atributo loading=”lazy” en <img> o <iframe>, que le indica al navegador que los cargue cuando el usuario se desplaza más cerca de ellos.

Asegúrese de no cargar de forma diferida las imágenes de la mitad superior de la página, ya que degradará la puntuación LCP de su página, y Google recomienda usar el atributo fetchpriority=”high” en las imágenes de la mitad superior de la página para mejorar la LCP.

Si usa ese atributo, no es necesario precargar las imágenes. Debe precargar o establecer el atributo "fetchpriority" en las imágenes de la mitad superior de la página.

Además, aproveche la capacidad de respuesta del atributo "srcset" para cargar imágenes del tamaño adecuado según el tamaño de la pantalla y evite cargar imágenes grandes de forma redundante en pantallas pequeñas. Esto será de gran ayuda para mejorar la puntuación LCP.

fuentes

Las fuentes personalizadas extravagantes a menudo son difíciles de leer para los usuarios sin visión 20/20, pero también pueden ralentizar considerablemente su sitio web.

Cambie las fuentes alojadas externamente por fuentes más seguras para la web y pruebe las fuentes de Google, siempre que estén alojadas a través de la CDN de Google.

Además, considere incorporar fuentes variables en la estética general de su sitio web, ya que esta especificación de fuentes puede reducir significativamente el tamaño de los archivos de fuentes.

Asegúrate de precargar tus fuentes.

Animaciones/Características Adicionales

Esto es evidente: no se exceda con animaciones, videos, efectos especiales, controles deslizantes u otros elementos sofisticados.

Es bueno incluir algunos elementos interactivos aquí y allá, pero saturar su sitio web con demasiadas "cosas" en movimiento puede ser frustrante tanto para los usuarios como para sus servidores.

No use animaciones no compuestas, ya que provocan que se vuelva a pintar la página, lo que aumenta el trabajo del subproceso principal, y la página web puede parecer visualmente inestable cuando se carga.

Solución PWA para optimización móvil

¿Por qué no seguir toda la ruta optimizada para dispositivos móviles y convertir su sitio móvil en una aplicación web progresiva (PWA)?

Dado que las PWA se construyen con trabajadores de servicio, cargan el contenido almacenado en caché a un ritmo más rápido. No solo eso, sino que las PWA se parecen a las aplicaciones móviles nativas, lo cual es excelente para el rendimiento y la experiencia de usuario.

Métricas de rendimiento técnico adicionales

tiempo de actividad

El tiempo de actividad muestra qué tan bien está funcionando su sitio web.

Si su sitio web falla o se cae con frecuencia, dañará su experiencia de usuario, las clasificaciones de Google y, por lo tanto, sus ingresos.

Si es posible, intente tener un tiempo de actividad del 99,999 % y pruebe su sitio web desde diferentes ubicaciones.

Herramientas para monitorear el tiempo de actividad:

• Pastel de estado.
• Pingdom.
• Mejor tiempo de actividad.
• Uptime Robot.

Rendimiento de la base de datos

Si revisó los aspectos básicos y su sitio web aún responde lentamente, es posible que se deba a un rendimiento deficiente de la base de datos.

Puede verificar esto monitoreando el tiempo de respuesta de sus consultas e identificando las consultas de la base de datos que están tomando la mayor parte del tiempo.

Una vez que hayas hecho eso, ¡empieza a optimizar! Puede usar herramientas como Blackfire.io para ayudarlo a identificar fácilmente los cuellos de botella y encontrar soluciones basadas en datos precisos.

Hardware del servidor web

Su sitio web puede retrasarse si su espacio en disco está repleto de archivos de registro, imágenes, videos y entradas de bases de datos. Asegúrese de monitorear la carga de su unidad central de procesamiento (CPU) regularmente, especialmente después de implementar actualizaciones o cambios de diseño.

Herramientas como New Relic pueden ayudarlo a mejorar toda su pila a través de una supervisión y depuración eficientes.

Visibilidad de búsqueda

Muchas de las métricas discutidas anteriormente ya tienen un impacto significativo en la visibilidad de búsqueda.

Entonces, cuando ejecuta las páginas de su sitio web a través de Google PageSpeed ​​Insights y las optimiza, también está haciendo cosas importantes para su SEO.

También puedes optar por herramientas de rastreo de sitios web como Semrush o Sitechecker.pro, Screaming Frog, DeepCrawl o cualquier otra herramienta que mejor se adapte a tus necesidades.

Los rastreadores de sitios web ayudan a encontrar todo tipo de problemas, como:

• Enlaces rotos.
• Imágenes rotas.
• Supervise las métricas fundamentales de la web.
• Cadenas de redirección.
• Errores de datos estructurados.
• Sin páginas indexadas.
• Faltan encabezados y meta descripciones.
• Contenido mixto.

Asegúrate de tener todo listo cuando se trata de los siguientes puntos:

• Mapa del sitio XML : asegúrese de que su mapa del sitio tenga el formato correcto y verifique si es necesario realizar actualizaciones y vuelva a enviar su mapa del sitio a través de Google Search Console.
• Robots.txt : asegúrese de utilizar un archivo robots.txt para sus páginas web (HTML, PDF o cualquier otro formato no multimedia que los motores de búsqueda puedan leer) para administrar mejor el tráfico de rastreo, especialmente si sospecha que su servidor puede verse abrumado por solicitudes del rastreador de Google.

Seguridad y almacenamiento en caché del sitio web

¡Obtenga su certificado SSL!

Un sitio web saludable es un sitio web seguro.

Incluso si su sitio web se carga en el momento perfecto y obtiene una puntuación de 100/100, no hay forma de que los usuarios (o los motores de búsqueda) confíen en su sitio si no comienza con https://.

Un certificado SSL es esencialmente un código en su servidor que crea una conexión encriptada, lo que garantiza que los datos del usuario permanezcan seguros.

Obtener un certificado SSL no es un proceso particularmente difícil, pero puede ser largo si se hace manualmente.

Sin embargo, si está utilizando un proveedor de alojamiento bien establecido como BlueHost, la mayoría de las veces, su proveedor podrá emitir un SSL gratuito para su dominio.

Considere usar un CDN

Las redes de entrega de contenido (CDN) son servidores distribuidos que funcionan al unísono para entregar contenido de Internet rápido.

En otras palabras, un CDN es una herramienta que acelera el rendimiento de su sitio web al mantener su contenido en servidores cercanos a los usuarios, independientemente de su ubicación geográfica. Esto también se conoce como almacenamiento en caché.

Si tiene una presencia global, ¡un CDN es imprescindible! Aumentará la velocidad de carga de su página, disminuirá los costos de ancho de banda, distribuirá su tráfico (reduciendo las posibilidades de que su sitio se caiga) y aumentará la seguridad a través de funciones como la mitigación de DDoS.

Los principales jugadores de la industria incluyen Cloudflare, Amazon Cloudfront y Google Cloud CDN. Sin embargo, hay muchas otras opciones, así que investigue y elija la mejor CDN para su sitio web y los requisitos comerciales.

Configurar el cortafuegos de aplicaciones web

Un firewall de aplicaciones web (WAF) protege las aplicaciones web al filtrar el tráfico HTTP sospechoso. Está dirigido a evitar que las aplicaciones sufran ataques como:

• Falsificación entre sitios.
• Cross-site-scripting (XSS).
• Inclusión de archivos.
• Inyección SQL.

A continuación se muestra una lista de los firewalls de aplicaciones web más populares y confiables:

• WAF de Cloudflare.
• Cortafuegos GoDaddy.
• Microsoft Azure.

O si usa WordPress, puede considerar instalar complementos como:

• WordFence.
• Sucuri.
• Seguridad todo en uno (AIOS).

Veredicto

¡Eso es un envoltorio! Como puede ver, el rendimiento y la salud del sitio web dependen de varios aspectos.

Si su sitio web está retrasado, el primer paso lógico es verificar su Core Web Vitals y ver qué puede mejorar. También puede echar un vistazo a otras métricas técnicas y mejorarlas.

El SEO también es vital para la salud de su sitio web, así que verifique la visibilidad de su búsqueda, los enlaces y los posibles bloqueadores de carga para ver qué puede mejorar.

Y tampoco se olvide de su certificado SSL y el almacenamiento en caché.

El diseño de su sitio web también puede afectar la velocidad de carga y el rendimiento, especialmente si a usted o a sus diseñadores les gusta usar elementos de diseño pesados.

Recuerda optimizar tus imágenes, evitar fuentes pesadas y usar animaciones con moderación.

Más recursos:

• Cómo usar Chrome UX Report para mejorar el rendimiento de su sitio
• 6 consejos para potenciar el rendimiento de la Red de Display de Google
• SEO técnico avanzado: una guía completa

Imagen destacada: JulsIst/Shutterstock