Google: как обеспечить доступность и стабильную работу сайта во время эпидемии COVID-19

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

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

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

Надёжность, устойчивость и стабильность

Если сайт переживает всплески трафика и не справляется с
ними, или же вы хотите предотвратить такие сбои, то Google рекомендует следующее:

• Прочтите руководство по устранению перегрузок сервера, чтобы узнать, как выявлять, смягчать и предотвращать проблемы, связанные со всплесками трафика.
• Удалите ненужные изображения, видео, скрипты и шрифты. Убедитесь, что каждая страница предоставляет лишь ту функциональность, которая действительно нужна пользователям.
• Оптимизация изображений может значительно сократить объём потребляемого сервером трафика.
• Перенесите как можно больше статического контента в CDN.
• Проверьте, поддерживает ли ваша CDN такие простые для включения функции оптимизации, как динамическое сжатие изображений, сжатие текста или автоматическая минимизация ресурсов JS и CSS.
• Оптимизация HTTP-кеширования может значительно снизить нагрузку на серверы при минимальном изменении кода. Имейте в виду, что разные типы ресурсов будут иметь разные требования к свежести и, следовательно, потребуют разных стратегий кеширования.
• Service Workers – ещё один способ значительно сократить нагрузку на серверы, но их настройка может потребовать значительных технических вложений. Сервис-воркеры также позволяют сайту работать в офлайн-режиме, что даёт возможность предоставлять пользователям такую информацию, как часы работы, телефонные номера и т.п.
• Если трафик на сайт значительно вырос, проверьте, имеете ли вы адекватную защиту от DDoS-атак.

Доступность

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

Обеспечение доступности – это командная работа, где у каждого своя роль. В этом процессе могут участвовать продакт-менеджеры, инженеры, дизайнеры, тестировщики и др.

Чтобы убедиться, что основная функциональность сайта доступна для всех посетителей, следуйте следующим пунктам:

• Проведите аудит доступности. Информацию о том, как это сделать, можно найти в руководстве.
• Ознакомьтесь с рекомендациями Google по обеспечению доступности.
• Проверьте сайт с помощью инструмента Lighthouse, чтобы выявить общие проблемы с доступностью. В отчёте также будет приведён список проверок, которые можно выполнить вручную, чтобы улучшить работу сайта. При этом важно помнить, что показатель доступности 100 не гарантирует, что ваш сайт доступен.
• Пройдите курс Start Building Accessible Web Applications Today на egghead.io или Web Accessibility на Udacity.
• Просмотрите плейлист от Роба Додсона на YouTube.

Безопасность и конфиденциальность

• Прочитайте, почему все сайты должны использовать HTTPS, а не только те,
  что обрабатывают конфиденциальную информацию.
• Переключитесь на того хостинг-провайдера,
  который по умолчанию использует HTTPS, или используйте Let’s Encrypt или
  аналогичные сервисы, чтобы включить HTTPS на ваших серверах.
• Ознакомьтесь с информацией о файлах cookie SameSite,
  чтобы узнать, как сделать использование файлов cookie более безопасным. Обратите
  внимание, что принудительная маркировка SameSite Cookies временно
  отменена.

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

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

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

• Подумайте над добавлением баннера с информацией об изменениях в работе компании/сервиса в верхнюю часть сайта. Используйте CTA-элементы, чтобы направить пользователей к конкретным ресурсам. Чтобы баннер выделялся на фоне основного контента страницы, используйте другой шрифт и цвет.
• Найдите возможности минимизировать физическое взаимодействие по ключевым операциям. Например, при доставке товаров необходима подпись. Подумайте, как можно обойти это ограничение.
• Убедитесь, что все важные функции на сайте максимально просты и интуитивно понятны.
• Ознакомьтесь с принципами хорошего мобильного дизайна и внедрите их на своих ресурсах.
• В дизайне сайта используйте по максимуму адаптивные шаблоны.
• Убедитесь, что ваши формы эффективны и хорошо продуманы.

SEO

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

Инструмент для проведения SEO-аудита Lighthouse поможет выявить базовые проблемы.

Также желательно подписаться на официальные блоги поисковых
систем и следить за их рекомендациями и новостями.

Производительность и скорость загрузки

• Оптимизируйте изображения, чтобы сократить нагрузку на сайт. Для этого можно использовать инструмент сжатия с открытым исходным кодом Squoosh.
• Используйте инструменты WebPageTest или Lighthouse, чтобы выявить основные возможности для улучшения производительности.
• Настройте сжатие текста, чтобы уменьшить размер текстовых ресурсов.
• Используйте отложенную загрузку для изображений, чтобы минимизировать запросы для тех изображений, которые пользователи могут никогда не увидеть.
• Проверьте, есть ли на сайте какие-либо скрипты A/B-тестирования или персонализации, которые можно загружать более асинхронно, и есть ли в этих сценариях некритические функции, которые можно отключить.
• На долю стороннего кода у большинства сайтов приходится около половины всех запросов. Подумайте над оптимизацией, временным удалением или отключением стороннего кода, который не является необходимым для работы сайта.

Со всеми рекомендациями можно ознакомиться на сайте web.dev.