Убедитесь, что ваш веб-сайт доступен и удобен для использования всеми во время COVID-19.

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

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

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

Руководство

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

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

  • Прочтите статью «Исправление перегруженного сервера» , чтобы узнать, как обнаруживать, смягчать и предотвращать проблемы с пиковым трафиком.
  • Удалите ненужные изображения, видео, скрипты и шрифты. Убедитесь, что каждая страница ориентирована только на предоставление той функциональности, которая действительно нужна людям, использующим ваш сайт.
  • Оптимизация изображений может значительно снизить использование полосы пропускания вашего сервера, поскольку изображения являются основным источником раздувания веб-страниц .
  • Выгрузите как можно большую часть статического контента в CDN. Более подробная информация от распространенных поставщиков: AWS , Azure , Cloudflare , Google Cloud , Firebase .
  • Проверьте, есть ли в вашей CDN какие-либо оптимизации, которые легко включить, например динамическое сжатие изображений, сжатие текста или автоматическое минимизация ресурсов JS и CSS.
  • Оптимизация HTTP-кэширования может значительно снизить нагрузку на ваши серверы с минимальными изменениями кода. Ознакомьтесь с обзором HTTP-кэша: ваша первая линия защиты , а также рекомендациями по HTTP-кэшированию и рекомендациям по кэшированию для конкретных рекомендаций. Функция «Обслуживать статические ресурсы с помощью эффективного аудита политики кэширования» в Lighthouse может помочь вам быстро обнаружить ресурсы, которые не кэшируются. Имейте в виду, что разные типы ресурсов будут иметь разные требования к актуальности и, следовательно, потребуют разных стратегий кэширования.
  • Сервисные работники — это еще один способ значительно снизить нагрузку на ваши серверы, но он может потребовать значительных технических инвестиций. Они также позволяют вашему веб-сайту работать в автономном режиме , позволяя вам показывать часы работы, номера телефонов и другую информацию вернувшимся пользователям без подключения. Workbox — это рекомендуемый подход для добавления сервис-воркеров на веб-сайты, поскольку он автоматизирует множество шаблонов, упрощает следование передовым практикам и предотвращает мелкие ошибки, которые часто встречаются при непосредственном использовании низкоуровневого API ServiceWorker .
  • Если ваш сайт значительно увеличился, проверьте, есть ли у вас адекватная защита от DDoS-атак , поскольку теперь ваш сайт может стать более привлекательной целью. Более подробная информация от распространенных поставщиков: AWS , Azure , Cloudflare , Google Cloud .

Дополнительные сведения см. в разделе «Надежность сети ».

Доступность

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

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

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

Дополнительную информацию см. в разделе «Безопасность и надежность» .

Юзабилити, UI и UX

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

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

SEO

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

См. «Обнаруживаемый» для получения дополнительных рекомендаций.

Производительность

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

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

Дополнительную информацию см. в разделе «Быстрая загрузка» .

Изображение героя НАСА на Unsplash