Как обеспечить доступность и удобство сайта для всех пользователей в период пандемии COVID-19

Как обеспечить постоянную доступность, безопасность, удобство использования, видимость и высокую скорость работы основных функций сайта.

В этой статье рассказывается о том, как сделать сайт доступным, защищенным и удобным для всех пользователей в любое время.

Рекомендации на этой странице подготовлены специалистами из разных отделов Google, которые в настоящее время сосредоточили свои усилия на поддержке сайтов, помогающих людям оставаться в безопасности во время пандемии COVID-19. Эти сотрудники Google заметили, что сайты сталкиваются с беспрецедентным ростом спроса со стороны людей, ищущих критически важную информацию, многие из которых редко или никогда раньше не пользовались интернетом. Обеспечить доступность сайтов в это время и доступность для всех может быть непросто.

Инструкции

Доступность, надежность, отказоустойчивость и стабильность

Если на вашем сайте наблюдаются скачки трафика и он работает со сбоями или вы хотите предотвратить сбои, приведенные ниже рекомендации помогут вам быстро устранить проблемы или обнаружить их до того, как они станут серьезными.

  • Прочитайте статью Чрезмерная нагрузка на сервер, чтобы узнать, как выявлять, устранять и предотвращать проблемы, связанные со скачками трафика.
  • Удалите ненужные изображения, видео, скрипты и шрифты. Убедитесь, что каждая страница сосредоточена на предоставлении только тех функций, которые действительно нужны людям, использующим ваш сайт.
  • Оптимизация изображений может значительно снизить нагрузку на сервер, поскольку изображения – это основной источник перегрузки в интернете.
  • Перенесите как можно больше статического контента в сети доставки контента. Дополнительную информацию можно найти на сайтах популярных поставщиков: AWS, Azure, Cloudflare, Google Cloud, Firebase.
  • Проверьте, есть ли в вашей CDN оптимизации, которые легко включить, например динамическое сжатие изображений, сжатие текста или автоматическая минификация ресурсов JS и CSS.
  • Оптимизация HTTP-кеширования позволяет значительно снизить нагрузку на серверы, внеся минимальные изменения в код. Общие сведения о кешировании HTTP можно найти в статье HTTP-кеш: ваша первая линия обороны, а конкретные рекомендации – в статьях Кеширование HTTP и Рекомендации по кешированию. Проверка Задайте эффективные правила кеширования для статических объектов в Lighthouse поможет вам быстро обнаружить ресурсы, которые не кешируются. Помните, что для разных типов ресурсов требуются разные требования к свежести и, следовательно, разные стратегии кэширования.
  • Сервисные скрипты – ещё один способ значительно снизить нагрузку на серверы, но для их реализации могут потребоваться значительные технические вложения. Кроме того, они позволяют сайту работать в офлайн-режиме, чтобы вернувшиеся пользователи могли посмотреть часы работы, номера телефонов и другую информацию даже без подключения к интернету. Для добавления сервисных скриптов на сайты рекомендуется использовать Workbox, поскольку он автоматизирует многие стандартные операции, упрощает следование рекомендациям и предотвращает мелкие ошибки, которые часто возникают при непосредственном использовании низкоуровневого API ServiceWorker.
  • Если трафик на вашем сайте значительно вырос, проверьте, достаточно ли он защищен от DDoS-атак, поскольку он может стать более привлекательной целью для злоумышленников. Дополнительную информацию можно найти на сайтах популярных поставщиков: AWS, Azure, Cloudflare, Google Cloud.

Подробнее о надежности сети…

Специальные возможности

Обеспечение доступности сейчас важно как никогда, поскольку ваш сайт могут посещать люди с самыми разными потребностями. Следуйте приведенным ниже рекомендациям, чтобы обеспечить доступность основных функций вашего сайта для всех пользователей.

Идентификация, безопасность и конфиденциальность

Иногда возникает соблазн пойти по пути наименьшего сопротивления, чтобы быстрее выпустить критически важные исправления, но всегда нужно следить за тем, чтобы при этом не возникали уязвимости в системе безопасности. Пользователям нужен доступ к контенту на темы, которые являются сугубо личными. Веб-сайты должны любой ценой защищать эти конфиденциальные пользовательские данные и убеждать людей в том, что их информация, позволяющая идентифицировать личность (PII), находится в безопасности.

Подробнее о безопасности…

Удобство использования, интерфейс и UX

Люди все чаще используют интернет для удовлетворения базовых потребностей. Многие из них редко пользуются интернетом. Проверьте удобство использования основных функций сайта и постарайтесь сделать их максимально простыми.

  • Добавьте в верхнюю часть сайта заметный баннер (который можно закрыть, нажав на кнопку X) с информацией об изменениях в работе. Добавьте в баннер призыв к действию, чтобы направлять пользователей к нужным ресурсам. Используйте цвета и шрифты, которые выделяются на фоне остального контента страницы. Пишите с эмпатией, фокусируйтесь на потребностях людей и будьте честны в отношении того, какие услуги вы предоставляете.
  • Ищите возможности минимизировать физические взаимодействия в алгоритмах достижения цели и предлагайте эти изменения команде продукта. Например, если служба доставки обычно требует подпись, узнайте, можно ли обойти это требование.
  • Убедитесь, что ваши CUJ максимально просты и интуитивно понятны, и предложите изменения своей команде продукта, если вы видите какие-либо возможности для улучшения.
  • Изучите принципы хорошего дизайна для мобильных устройств и протестируйте критические пути пользователей на разных мобильных устройствах, чтобы убедиться в отсутствии явных проблем. Люди, которые редко пользуются интернетом и внезапно обнаруживают, что им приходится полагаться на него больше, вероятно, заходят на ваш сайт с мобильных устройств.
  • Проведите рефакторинг сайта, чтобы как можно больше использовать шаблоны адаптивного дизайна.
  • Убедитесь, что ваши формы эффективны и хорошо оформлены.

Поисковая оптимизация

Люди ищут важную информацию о здоровье и работе. Важно, чтобы ваши сайты были доступны для всех поисковых систем. Выявить основные проблемы можно с помощью проверок поисковой оптимизации в Lighthouse. Чтобы быть в курсе последних новостей и рекомендаций, читайте официальные блоги поисковых систем: Google, Bing, Baidu, DuckDuckGo, Яндекс. Недавние публикации, связанные с COVID-19:

Подробнее о видимости…

Эффективность

Некоторые интернет-провайдеры (например, в Индии) отмечают резкий рост использования домашнего интернета и не имеют инфраструктуры, способной удовлетворить возросший спрос. В таких ситуациях скорость вашего сайта может снижаться не по вашей вине. Оптимизация загрузки может компенсировать снижение пропускной способности. Другими словами, уменьшив объем данных, которые нужно передать по сети для загрузки страниц, вы можете компенсировать влияние низкой пропускной способности на производительность.

  • Изображения – основная причина медленной загрузки сайтов. Вы можете значительно снизить нагрузку на пропускную способность сайта, оптимизировав изображения. Squoosh – это простой инструмент с открытым исходным кодом, который позволяет быстро сжимать изображения.
  • Запустите WebPageTest или Lighthouse, чтобы узнать, как повысить эффективность.
  • Включите сжатие текста, чтобы уменьшить размер текстовых ресурсов. Это простой способ повысить производительность, который не требует больших технических затрат.
  • Прочитайте статью Как ускорить сайт, работая в команде, чтобы узнать, как сотрудничать с другими отделами и получать от них поддержку.
  • Используйте стандартизированную отложенную загрузку изображений, чтобы минимизировать количество запросов на загрузку изображений, которые пользователи могут так и не увидеть. Совместимость с браузерами неполная, но эту функцию можно рассматривать как прогрессивное улучшение. Другими словами, если браузер не поддерживает стандартную отложенную загрузку, изображение должно загружаться обычным образом.
  • Проверьте, есть ли на вашем сайте скрипты для A/B-тестирования или персонализации, которые можно загружать более асинхронно, или есть ли в скриптах некритичные функции, которые можно отключить. Скрипты для A/B-тестирования и персонализации обычно нельзя загружать полностью асинхронно, поскольку они должны выполняться до загрузки контента страницы. Однако некоторые части скриптов можно загружать асинхронно. Чтобы понять, как синхронные скрипты (также известные как скрипты, блокирующие отрисовку) влияют на время загрузки страницы, ознакомьтесь со статьей Критический путь рендеринга. Затем решите, что для вас важнее: скрипты, блокирующие отрисовку, или время загрузки страницы.
  • На большинстве сайтов сторонний код составляет около половины всех запросов. Попробуйте оптимизировать, временно удалить или отключить сторонний код, который не является критически важным для работы сайта.
  • Если выпуск новых функций не является приоритетом, то сейчас самое время навести порядок. Удалите теги из менеджеров тегов, очистите раздутый код CSS и JS, а также удалите устаревшие функции или код. Найти неиспользуемый код можно с помощью вкладки Coverage в Инструментах разработчика Chrome и класса Coverage в Puppeteer.

Подробнее о быстрой загрузке…