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.
- La accesibilidad es un esfuerzo en equipo, y todos tienen un papel que desempeñar. Primero, consulta la guía de accesibilidad para equipos de Google y la guía para equipos del servicio digital de EE.UU. En estas guías, se explica en qué puede contribuir cada miembro del equipo (gerentes de productos, ingenieros, diseñadores, QA, etc.).
- Realiza una Revisión de accesibilidad para determinar qué funciona bien y qué se debe mejorar. Las extensiones del navegador WAVE pueden ayudarte a guiarte en una auditoría manual de accesibilidad 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 comunes de accesibilidad. También se proporciona una lista de verificaciones manuales que puedes realizar para mejorar el funcionamiento de tu sitio. Ten en cuenta que una puntuación de accesibilidad de 100 no garantiza que se pueda acceder a tu sitio. Existen muchos problemas importantes que Lighthouse no puede evaluar 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 AXE.
- Completa el curso Comienza a compilar aplicaciones web accesibles hoy mismo en egghead.io o consulta el curso sobre accesibilidad web en Udacity.
- Mira la playlist de A11ycast para obtener más sugerencias rápidas sobre temas específicos de accesibilidad.
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.
- Comprende por qué todos los sitios web deben protegerse con HTTPS, no solo aquellos que manejan datos sensibles de PII.
- Cambia a un proveedor de hosting que use HTTPS de forma predeterminada o usa Let's Encrypt o servicios similares para habilitar HTTPS en tus servidores.
- Consulta la explicación de las cookies de SameSite para obtener información sobre cómo hacer que el uso de las cookies sea más seguro. Ten en cuenta que la aplicación del etiquetado de cookies de SameSite se revirtió de forma temporal.
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:
- Cómo cambiar tus actividades en línea y, a la vez, minimizar el impacto en tu presencia en la Búsqueda de Google
- Nuevas propiedades para eventos virtuales, pospuestos y cancelados
- Bing adopta el lenguaje de marcado de schema.org para anuncios especiales sobre el COVID-19
- Cómo agregar datos estructurados a los anuncios sobre el COVID-19
- Cómo ayudamos a las organizaciones de salud a hacer que la información sobre el COVID-19 sea más accesible
- Prácticas recomendadas generales para la Búsqueda en sitios de salud y gubernamentales
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