Saltar al contenido principal




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


Actualizado

Esta página proporciona orientación para ayudar a garantizar que su sitio web esté disponible, accesible, seguro y utilizable para todos en todo momento.

La guía en esta página proviene de una colección multifuncional de equipos dentro de Google que están cambiando su enfoque a corto plazo para respaldar sitios web que ayudan a las personas a mantenerse seguras durante la situación de COVID-19. Estos empleados de Google han visto que los sitios se enfrentan a un aumento sin precedentes en la demanda de personas que buscan información crítica, muchas de las cuales rara vez o nunca han utilizado la web antes. Puede ser un desafío garantizar que los sitios estén disponibles durante este tiempo y accesibles para todos.

Guia

Esta guía es un trabajo en progreso y se actualizará con frecuencia. Si tiene alguna sugerencia, presente un problema o edite esta página y luego abra una solicitud de extracción.

Disponibilidad, confiabilidad, resiliencia y estabilidad

Si su sitio está experimentando picos de tráfico y está fallando, o si desea evitar que falle, la guía a continuación puede ayudarlo a solucionar problemas rápidamente o detectarlos antes de que se conviertan en problemas importantes.

  • Lea Reparar un servidor sobrecargado para aprender a detectar, mitigar y prevenir problemas de picos de tráfico.
  • Elimine imágenes, videos, scripts y fuentes innecesarios. Asegúrese de que cada página se centre en ofrecer la funcionalidad que las personas que utilizan su sitio realmente necesitan.
  • La optimización de sus imágenes puede reducir significativamente el uso de ancho de banda de su servidor porque las imágenes son la fuente número uno de hinchazón en la web.
  • Descargue la mayor cantidad posible de contenido estático en CDN. Más detalles de proveedores comunes:
    AWS,
    Azur,
    Cloudflare,
    Google Cloud,
    Firebase.
  • Compruebe si su CDN tiene alguna optimización que sea fácil de activar, como compresión dinámica de imágenes, compresión de texto o minificación automática de recursos JS y CSS.
  • La optimización del almacenamiento en caché HTTP puede reducir significativamente las demandas de sus servidores con un cambio mínimo de código. Consulte La caché HTTP: su primera línea de defensa para obtener una descripción general y Almacenamiento en caché HTTP
    y Mejores prácticas de almacenamiento en caché para recomendaciones específicas. Servir activos estáticos con una auditoría de políticas de caché eficiente en Lighthouse puede ayudarlo a detectar rápidamente los recursos que no se están almacenando en caché. Tenga en cuenta que los diferentes tipos de recursos tendrán diferentes requisitos de actualización y, por lo tanto, requerirán diferentes estrategias de almacenamiento en caché.
  • Los trabajadores de servicio son otra forma de reducir significativamente las demandas en sus servidores, pero pueden requerir una inversión técnica significativa. También permiten que su sitio web funcione
    desconectado, lo que le permite presentar horarios de apertura, números de teléfono y otra información a los usuarios que regresan sin una conexión. Workbox es el enfoque recomendado para agregar trabajadores de servicio a sitios web porque automatiza una gran cantidad de repetición, facilita el seguimiento de las mejores prácticas y evita errores sutiles que son comunes cuando se usa el nivel bajo. ServiceWorker
    API directamente.
  • Si su sitio está experimentando un mayor uso, verifique si tiene la protección adecuada contra Ataques DDoS porque su sitio ahora puede ser un objetivo más atractivo. Más detalles de proveedores comunes:
    AWS,
    Azur,
    Cloudflare,
    Google Cloud.

Consulte 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 una variedad de necesidades accedan a su sitio. Siga las pautas a continuación para asegurarse de que la funcionalidad principal de su sitio web sea accesible para todos.

Identidad, seguridad y privacidad

Puede ser tentador tomar atajos para obtener soluciones críticas, pero siempre tenga cuidado de no abrir agujeros de seguridad al hacerlo. Las personas necesitan acceder a contenido sobre temas que son extremadamente privados. Los sitios web deben proteger a toda costa estos datos confidenciales del usuario y convencer a las personas de que
información de identificación personal (PII) es seguro.

Consulte Seguro y protegido para obtener más orientación.

Usabilidad, UI y UX

Las personas dependen cada vez más de la web para satisfacer sus necesidades básicas. Muchas de estas personas no utilizan la web con frecuencia. Vale la pena auditar la usabilidad de la funcionalidad principal de su sitio y asegurarse de que sea lo más simple y fácil de usar posible.

  • Considere agregar un banner prominente (que se puede quitar con un X botón) en la parte superior de su sitio web que comunica claramente las actualizaciones del servicio. Utilice un llamado a la acción en el banner para dirigir a las personas a recursos más específicos. Considere usar colores y fuentes distintos que se destaquen del resto del contenido de su página. Mantenga su redacción empática, centrada en las necesidades de las personas y transparente sobre qué tipo de servicio esperar.
  • Busque oportunidades para minimizar las interacciones físicas en su viajes de usuario críticos (CUJ) y sugiera esos cambios a su equipo de producto. Por ejemplo, si su servicio de entrega generalmente requiere una firma, vea si hay alguna forma de solucionarlo.
  • Verifique que sus CUJ sean lo más simples e intuitivos posible y sugiera cambios a su equipo de producto si ve alguna oportunidad para mejorar.
  • Revisa el principios de un buen diseño móvil
    y pruebe sus CUJ en varios dispositivos móviles para asegurarse de que no haya problemas evidentes. Las personas que no utilizan la web con frecuencia y de repente se ven obligadas a depender más de la web probablemente accedan a su sitio desde dispositivos móviles.
  • Refactorice su sitio para usar patrones de diseño receptivo
    cuanto más se pueda.
  • Asegúrese de que sus formularios estén
    eficiente
    y
    bien diseñado.

SEO

Las personas buscan información crítica relacionada con la salud y el trabajo. Es importante asegurarse de que sus sitios sean detectables por todos los motores de búsqueda. Las auditorías de Lighthouse SEO pueden ayudarlo a detectar problemas básicos. Siga los blogs oficiales de los motores de búsqueda para obtener la orientación y las actualizaciones más recientes:
Google,
Bing,
Baidu,
Pato Pato a ganar,
Yandex. Publicaciones recientes relacionadas con COVID-19:

Consulte Detectable para obtener más orientación.

Actuación

Algunos ISP (en la India por ejemplo) están viendo un fuerte aumento en el uso de Internet en el hogar
y no tienen la infraestructura para satisfacer la creciente demanda. En situaciones como esta, la velocidad de su sitio web puede disminuir sin que usted tenga la culpa. Optimizar el rendimiento de su carga podría ser una forma de compensar el viento en contra del ancho de banda reducido. En otras palabras, al reducir la cantidad de bytes que deben enviarse a través de la red para cargar sus páginas, puede compensar el impacto en el rendimiento de la reducción del ancho de banda.

  • Las imágenes son las principal causa de hinchazón en la web. Es posible que pueda reducir significativamente el uso de ancho de banda de su sitio web optimizando sus imágenes.
    Squoosh es una sencilla herramienta de compresión de imágenes de código abierto que puede ayudarlo a comprimir rápidamente sus imágenes.
  • correr WebPageTest o
    Faro
    para descubrir sus principales oportunidades de mejora del rendimiento.
  • Habilite la compresión de texto para reducir el tamaño de red de los recursos de texto. A menudo, esto es una ganancia de rendimiento fácil que requiere una inversión técnica mínima.
  • Lea Cómo corregir la velocidad del sitio web de forma cruzada para aprender a colaborar y obtener la aceptación de otros departamentos.
  • Utilice la carga diferida nativa para imágenes a fin de minimizar las solicitudes de imágenes que es posible que la gente nunca vea. Compatibilidad del navegador
    no es 100%, pero la función puede tratarse como una mejora progresiva. En otras palabras, si un determinado navegador no admite la carga diferida nativa, la imagen debería cargarse como lo hace normalmente.
  • Compruebe si su sitio tiene alguna prueba A / B o scripts de personalización que se puedan cargar de forma más asincrónica o si hay alguna funcionalidad no crítica en los scripts que se pueda deshabilitar. Los scripts de personalización y pruebas A / B generalmente no se pueden cargar completamente asincrónicamente porque deben ejecutarse antes de que se cargue el contenido de la página, pero puede haber alguna oportunidad de cargar partes de los scripts de forma más asincrónica. Ver Ruta de renderización crítica para comprender la compensación fundamental entre los scripts sincrónicos (también conocidos como scripts de bloqueo de procesamiento) en general y el tiempo de carga de la página, y luego decidir si necesita priorizar los scripts de bloqueo de 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. Considerar
    optimizando
    o eliminar o deshabilitar temporalmente el código de terceros que no es fundamental para el funcionamiento de su sitio.
  • Si los lanzamientos de funciones no tienen prioridad, este podría ser el momento perfecto para limpiar. Elimine las etiquetas de sus administradores de etiquetas, limpie CSS y JS inflados y elimine las funciones o el código obsoletos. los
    Pestaña de cobertura
    en Chrome DevTools y
    Coverage La clase en Puppeteer puede ayudarte a detectar código no utilizado.

Consulte Tiempos de carga rápidos para obtener más orientación.

Imagen de héroe por
NASA en
Unsplash