Asegúrese de que su sitio web esté disponible y sea utilizable para todos durante el brote de COVID-19

Cómo asegurarse de que la funcionalidad principal de su sitio web esté siempre disponible y sea accesible, segura, fácil de usar, detectable y rápida

En esta página, se proporcionan instrucciones que te ayudarán a garantizar que tu sitio web esté disponible, sea accesible, seguro y utilizable para todos en todo momento.

La orientación que se brinda en esta página proviene de un grupo multidisciplinario de equipos de Google que están cambiando su enfoque a corto plazo para admitir sitios web que ayudan a las personas a mantenerse seguras durante la situación del COVID-19. Estos Googlers han observado que los sitios enfrentan aumentos sin precedentes en la demanda de personas que buscan información crítica, muchos de los cuales antes o nunca antes utilizaron la Web. Puede ser un desafío garantizar que los sitios estén disponibles durante este período y sean accesibles para todos.

Orientación

Disponibilidad, confiabilidad, resiliencia y estabilidad

Si tu sitio experimenta aumentos repentinos de tráfico y falla, o si deseas evitar que falle, la siguiente guía puede ayudarte a corregir problemas rápidamente o a detectarlos antes de que se conviertan en problemas importantes.

  • Consulta Cómo corregir un servidor sobrecargado para aprender a detectar, mitigar y evitar problemas de aumento de tráfico.
  • Quita las imágenes, los videos, las secuencias de comandos y las fuentes innecesarias. Asegúrate de que cada página se centre en ofrecer las funciones que realmente necesitan los usuarios del sitio.
  • Optimizar las imágenes puede reducir en gran medida el uso del ancho de banda del servidor porque las imágenes son la principal fuente de sobredimensionamiento en la Web.
  • Transfiere la mayor cantidad posible de tu contenido estático a las CDN. Más detalles de proveedores comunes: AWS, Azure, Cloudflare, Google Cloud y Firebase.
  • Verifica si tu CDN tiene optimizaciones que sean fáciles de activar, como compresión de imágenes dinámicas, compresión de texto o reducción automática de los recursos de JS y CSS.
  • La optimización del almacenamiento en caché de HTTP puede reducir de manera significativa las demandas en tus servidores con un cambio de código mínimo. Consulta La caché de HTTP: tu primera línea de defensa para obtener una descripción general y el almacenamiento en caché de HTTP y las prácticas recomendadas de almacenamiento en caché para obtener recomendaciones específicas. La auditoría Entrega elementos estáticos con una política de caché eficiente en Lighthouse puede ayudarte a detectar con rapidez los recursos que no se almacenan en caché. Ten en cuenta que los diferentes tipos de recursos tendrán diferentes requisitos de actualización y, por lo tanto, requerirán distintas estrategias de almacenamiento en caché.
  • Los service workers son otra forma de reducir significativamente las demandas en tus servidores, pero pueden requerir una inversión técnica significativa. También permiten que tu sitio web funcione sin conexión, lo que te permite presentar el horario de atención, los números de teléfono y otra información a los usuarios recurrentes sin conexión. Workbox es el enfoque recomendado para agregar service workers a sitios web, ya que automatiza una gran cantidad de código estándar, facilita el seguimiento de las prácticas recomendadas y evita errores sutiles que son comunes cuando se usa directamente la API de ServiceWorker de bajo nivel.
  • Si tu sitio experimenta un aumento importante en el uso, verifica si tienes la protección adecuada contra los ataques DDoS porque es posible que ahora sea un objetivo más atractivo. Más detalles de proveedores comunes: AWS, Azure, Cloudflare y Google Cloud.

Consulta Confiabilidad de la red para obtener más orientación.

Accesibilidad

Centrarse en la accesibilidad es más importante que nunca porque es probable que más personas con diferentes necesidades accedan a tu sitio. Sigue los lineamientos que se indican a continuación para asegurarte de que todos puedan acceder a la funcionalidad principal del sitio web.

Identidad, seguridad y privacidad

Puede resultar tentador usar atajos para obtener correcciones importantes, pero siempre debes tener cuidado de no generar brechas de seguridad al hacerlo. Las personas necesitan acceder a contenido de temas que son extremadamente privados. Los sitios web deben proteger estos datos sensibles de los usuarios a toda costa y convencer a las personas de que su información de identificación personal (PII) está segura.

Consulta Seguridad y protección para obtener más información.

Usabilidad, IU y UX

Las personas confían cada vez más en la Web para satisfacer necesidades básicas. Muchas de estas personas no usan la Web con frecuencia. Vale la pena auditar la usabilidad de la funcionalidad principal de tu sitio y asegurarte de que sea lo más simple y fácil posible.

  • Considera agregar un banner destacado (que se pueda quitar con un botón X) en la parte superior del sitio web, en el que se comuniquen las actualizaciones del servicio de forma clara. Usa un llamado a la acción en el banner para dirigir a las personas a recursos más específicos. Considera usar fuentes y colores distintos que se destaquen del resto del contenido de tu página. Redacta una redacción empática, centrada en las necesidades de las personas y transparente en cuanto al tipo de servicio que puedes esperar.
  • Busca oportunidades para minimizar las interacciones físicas en tus recorridos del usuario críticos (CUJ) y sugiere esos cambios a tu equipo de productos. Por ejemplo, si tu servicio de entrega suele requerir una firma, comprueba si hay alguna manera de solucionarlo.
  • Verifica que tus CUJ sean lo más intuitivos y simples posible, y sugiere cambios a tu equipo de productos si ves oportunidades para mejorar.
  • Revisa los principios de un buen diseño para dispositivos móviles y prueba tus CUJ en varios dispositivos móviles para asegurarte de que no haya problemas evidentes. Es probable que las personas que no usan la Web con frecuencia y de repente se encuentren con que depender de ella accedan más a tu sitio desde dispositivos móviles.
  • Refactoriza tu sitio para usar patrones de diseño responsivos tanto como sea posible.
  • Asegúrate de que tus formularios sean eficientes y bien diseñados.

SEO

Las personas buscan información crítica sobre la salud y el trabajo. Es importante que te asegures de que tus sitios sean visibles para todos los motores de búsqueda. Las auditorías de SEO de Lighthouse pueden ayudarte a detectar problemas básicos. Sigue los blogs oficiales de los motores de búsqueda para obtener las indicaciones y actualizaciones más recientes: Google, Bing, Baidu, DuckDuckGo y Yandex. Publicaciones recientes relacionadas con el COVID-19:

Consulta Detectable para obtener más información.

Rendimiento

Algunos ISP (por ejemplo, en la India) experimentan un aumento marcado en el uso de Internet doméstica y no tienen la infraestructura para satisfacer el aumento en la demanda. En situaciones como esta, la velocidad de tu sitio web puede ser más lenta por causas ajenas a ti. Optimizar el rendimiento de carga podría ser una forma de contrarrestar la reducción del ancho de banda. En otras palabras, si reduces la cantidad de bytes que deben enviarse por la red para cargar tus páginas, puedes compensar el impacto en el rendimiento de la reducción del ancho de banda.

  • Las imágenes son la primera causa del sobredimensionamiento en la Web. Es posible que puedas reducir significativamente el uso del ancho de banda de tu sitio web si optimizas tus imágenes. Squoosh es una herramienta sencilla de compresión de imágenes de código abierto que puede ayudarte a comprimir tus imágenes rápidamente.
  • Ejecuta WebPageTest o Lighthouse para descubrir las principales oportunidades de mejora del rendimiento.
  • Habilita la compresión de texto para reducir el tamaño de red de los recursos de texto. Esto suele ser una mejora sencilla en el rendimiento que requiere una inversión técnica mínima.
  • Consulta Cómo corregir la velocidad del sitio web de manera multidisciplinaria para obtener información sobre cómo colaborar y obtener la aprobación de otros departamentos.
  • Usa la carga diferida estandarizada para imágenes a fin de minimizar las solicitudes de imágenes que es posible que las personas nunca vean. La compatibilidad con el navegador no es del 100%, pero la función se puede tratar como una mejora progresiva. En otras palabras, si un navegador determinado no admite la carga diferida estandarizada, la imagen debería cargarse como lo hace normalmente.
  • Verifica si tu sitio tiene secuencias de comandos de personalización o pruebas A/B que se puedan cargar de forma más asíncrona o si hay alguna funcionalidad no crítica en las secuencias de comandos que se pueda inhabilitar. Por lo general, las secuencias de comandos de personalización y pruebas A/B no se pueden cargar completamente de forma asíncrona porque deben ejecutarse antes de que se cargue el contenido de la página. Sin embargo, es posible que se puedan cargar partes de las secuencias de comandos de manera más asíncrona. Consulta Ruta de acceso de renderización crítica para comprender la compensación fundamental entre secuencias de comandos síncronas (también conocidas como secuencias de comandos de bloqueo de renderización) en general y el tiempo de carga de la página. Luego, decide si necesitas priorizar las secuencias de comandos que bloquean el procesamiento sobre el tiempo de carga de la página, o viceversa.
  • El código de terceros constituye alrededor de la mitad de todas las solicitudes para la mayoría de los sitios web. Considera optimizing, quitar o inhabilitar temporalmente el código de terceros que no es fundamental para ejecutar tu sitio.
  • Si los lanzamientos de funciones no tienen prioridad, este podría ser el momento perfecto para realizar una limpieza. Quita las etiquetas de tus administradores de etiquetas, limpia el uso de CSS y JS sobredimensionados, y quita las funciones o el código obsoletos. La pestaña Cobertura de las Herramientas para desarrolladores de Chrome y la clase Coverage en Puppeteer pueden ayudarte a detectar código que no se usa.

Consulta Tiempos de carga rápidos para obtener más información.

Hero image de NASA en Unsplash