Cómo garantizar que la funcionalidad principal de tu sitio web esté siempre disponible, accesible, segura, utilizable, detectable y rápida.
En esta página, se proporcionan lineamientos para garantizar que tu sitio web esté disponible, sea accesible y seguro, y pueda utilizarse para todos en todo momento.
La orientación de esta página proviene de una colección de equipos multifuncionales de Google que están cambiando su enfoque a corto plazo para brindar asistencia a los sitios web que ayudan a las personas a mantenerse seguras durante la situación del COVID-19. Estos Googlers han visto que los sitios están enfrentando aumentos sin precedentes en la demanda de personas que buscan información crítica, muchas de las cuales rara vez o nunca han usado la Web antes. Puede ser un desafío garantizar que los sitios estén disponibles durante este tiempo y que todos puedan acceder a ellos.
Orientación
Disponibilidad, confiabilidad, resiliencia y estabilidad
Si tu sitio tiene picos de tráfico y falla, o si quieres evitar que falle, la siguiente guía puede ayudarte a solucionar problemas rápidamente o detectarlos antes de que se conviertan en problemas importantes.
- Lee Cómo corregir un servidor sobrecargado para aprender a detectar, mitigar y prevenir problemas de picos de tráfico.
- Quita las imágenes, los videos, las secuencias de comandos y las fuentes innecesarios. Asegúrate de que cada página se enfoque solo en ofrecer la funcionalidad que realmente necesitan las personas que usan tu sitio.
- Optimizar tus imágenes puede reducir significativamente el uso del ancho de banda del servidor, ya que las imágenes son la principal fuente de sobrecarga en la Web.
- Transfiere la mayor cantidad posible de contenido estático a las CDN. Más detalles de proveedores comunes: AWS, Azure, Cloudflare, Google Cloud, Firebase.
- Verifica si tu CDN tiene optimizaciones que sean fáciles de activar, como la compresión dinámica de imágenes, la compresión de texto o la reducción automática de los recursos de JS y CSS.
- Optimizar el almacenamiento en caché de HTTP puede reducir significativamente las demandas en tus servidores con un cambio mínimo en el código. Consulta La caché HTTP: tu primera línea de defensa para obtener una descripción general, y Almacenamiento en caché HTTP y Prácticas recomendadas para el almacenamiento en caché para obtener recomendaciones específicas. La auditoría Publica recursos estáticos con una política de caché eficiente en Lighthouse puede ayudarte a detectar rápidamente 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 diferentes 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
importante. 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 gran parte del 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
ServiceWorkerde bajo nivel. - Si tu sitio tiene un aumento importante en el uso, verifica si tienes la protección adecuada contra los ataques DDoS, ya que tu sitio puede ser un objetivo más atractivo. Más detalles de los proveedores comunes: AWS, Azure, Cloudflare, Google Cloud.
Consulta Confiabilidad de la red para obtener más orientación.
Accesibilidad
Enfocarse en la accesibilidad es más importante que nunca, ya que es probable que más personas con diversas necesidades accedan a tu sitio. Sigue los lineamientos que se indican a continuación para asegurarte de que la funcionalidad principal de tu sitio web sea accesible para todo el mundo.
- La accesibilidad es un esfuerzo de equipo y todos tienen un rol que desempeñar. Para comenzar, revisa la guía de accesibilidad para equipos de Google, así como la guía para equipos del Servicio Digital de EE.UU. En estas guías, se explica qué puede aportar cada miembro del equipo (gerentes de producto, ingenieros, diseñadores, QA, etcétera).
- Realiza una revisión de accesibilidad para determinar qué funciona bien y qué se debe mejorar. Las extensiones del navegador WAVE pueden ayudarte a realizar una auditoría de accesibilidad manual de tu sitio.
- Lee las guías de accesibilidad para comprender mejor temas específicos, como la navegación con el teclado y la compatibilidad con lectores de pantalla.
- Ejecuta una auditoría de Lighthouse para detectar problemas de accesibilidad comunes. En el informe, también se proporciona una lista de verificaciones manuales que puedes realizar para mejorar la operatividad de tu sitio. Ten en cuenta que una puntuación de accesibilidad de 100 no garantiza que tu sitio sea accesible. Hay muchos problemas importantes que Lighthouse no puede probar de forma automatizada, por lo que sigue siendo importante realizar revisiones manuales. Otras herramientas de auditoría automatizadas incluyen la API de WAVE y la extensión de AXE.
- Completa el curso Start Building Accessible Web Applications Today en egghead.io o consulta el curso de accesibilidad web en Udacity.
- Mira la lista de reproducción de A11ycast para obtener más sugerencias rápidas sobre temas específicos de accesibilidad.
Identidad, seguridad y privacidad
Puede ser tentador tomar atajos para implementar correcciones críticas, pero siempre ten cuidado de no abrir brechas de seguridad al hacerlo. Las personas necesitan acceder a contenido sobre 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 (IIP) está segura.
- Comprende por qué todos los sitios web deben estar protegidos con HTTPS, no solo aquellos que manejan datos sensibles de IIP.
- Cambia a un proveedor de hosting que use HTTPS de forma predeterminada o utiliza Let's Encrypt o servicios similares para habilitar HTTPS en tus servidores.
- Consulta Explicación de las cookies de SameSite para obtener información sobre cómo hacer que el uso de cookies sea más seguro. Ten en cuenta que la aplicación del etiquetado de cookies de SameSite se revirtió temporalmente.
Consulta Seguridad y protección para obtener más orientación.
Usabilidad, IU y UX
Las personas dependen cada vez más de la Web para satisfacer sus 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 de usar posible.
- Considera agregar un banner destacado (que se pueda quitar con un botón X) en la parte superior de tu sitio web que comunique claramente las actualizaciones del servicio. Usa un llamado a la acción en el banner para dirigir a las personas a recursos más específicos. Considera usar colores y fuentes distintos que se destaquen del resto del contenido de la página. Mantén una redacción empática, enfocada en las necesidades de las personas y transparente sobre el tipo de servicio que se puede esperar.
- Busca oportunidades para minimizar las interacciones físicas en tus recorridos críticos del usuario (CUJ) y sugiere esos cambios a tu equipo de producto. Por ejemplo, si tu servicio de entrega suele requerir una firma, fíjate si hay alguna manera de evitar eso.
- Vuelve a verificar que tus CUJ sean lo más simples e intuitivos posible y sugiere cambios a tu equipo de producto si ves oportunidades de mejora.
- 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 que, de repente, se ven obligadas a depender más de ella accedan a tu sitio desde dispositivos móviles.
- Refactoriza tu sitio para usar patrones de diseño responsivo tanto como sea posible.
- Asegúrate de que tus formularios sean eficientes y estén bien diseñados.
SEO
Las personas buscan información crucial relacionada con la salud y el trabajo. Es importante asegurarse de que todos los motores de búsqueda puedan descubrir tus sitios. 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 instrucciones y actualizaciones más recientes: Google, Bing, Baidu, DuckDuckGo, Yandex. Publicaciones recientes relacionadas con el COVID-19:
- Cómo cambiar tus actividades en línea y, al mismo tiempo, minimizar el impacto en tu presencia en la Búsqueda de Google
- Propiedades nuevas para eventos virtuales, pospuestos y cancelados
- Bing adopta el lenguaje de marcado de schema.org para anuncios especiales sobre el COVID-19
- Agrega datos estructurados a tus avisos sobre el COVID-19
- Ayudamos a las organizaciones de salud a lograr que la información sobre el COVID-19 sea más accesible
- Prácticas recomendadas generales para la Búsqueda de sitios gubernamentales y de salud
Consulta Visibilidad para obtener más orientación.
Rendimiento
Algunos ISP (en India, por ejemplo) están experimentando un fuerte aumento en el uso de Internet en el hogar y no tienen la infraestructura para satisfacer la mayor demanda. En situaciones como esta, es posible que la velocidad de tu sitio web disminuya sin que sea tu culpa. Optimizar el rendimiento de carga podría ser una forma de compensar la dificultad de un ancho de banda reducido. En otras palabras, si reduces la cantidad de bytes que se deben enviar por la red para cargar tus páginas, puedes compensar el impacto en el rendimiento de un ancho de banda reducido.
- Las imágenes son la causa principal de la sobrecarga en la Web. Es posible que puedas reducir de forma significativa el uso del ancho de banda de tu sitio web si optimizas tus imágenes. Squoosh es una herramienta de compresión de imágenes de código abierto simple que puede ayudarte a comprimir tus imágenes rápidamente.
- Ejecuta WebPageTest o Lighthouse para descubrir tus 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 de rendimiento fácil que requiere una inversión técnica mínima.
- Lee Cómo corregir la velocidad del sitio web de forma interdisciplinaria para aprender a colaborar con otros departamentos y obtener su aprobación.
- Usa la carga diferida estandarizada para las imágenes para minimizar las solicitudes de imágenes que las personas tal vez nunca vean. La compatibilidad con navegadores 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 pruebas A/B y personalización no se pueden cargar de forma completamente asíncrona porque deben ejecutarse antes de que se cargue el contenido de la página, pero puede haber alguna oportunidad de cargar partes de las secuencias de comandos de forma más asíncrona. Consulta la Ruta de renderización crítica para comprender la compensación fundamental entre las secuencias de comandos síncronas (también conocidas como secuencias de comandos que bloquean la renderización) en general y el tiempo de carga de la página, y, luego, decide si necesitas priorizar las secuencias de comandos que bloquean la renderización por 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 optimizar o quitar o inhabilitar temporalmente el código de terceros que no sea fundamental para ejecutar tu sitio.
- Si se quita la prioridad de los lanzamientos de funciones, este podría ser el momento perfecto para realizar una limpieza. Quita las etiquetas de tus administradores de etiquetas, limpia el CSS y el JS inflados, y
quita las funciones o el código obsoletos. La pestaña Cobertura en las Herramientas para desarrolladores de Chrome y la clase
Coverageen Puppeteer pueden ayudarte a detectar el código que no se usa.
Consulta Tiempos de carga rápidos para obtener más orientación.