Чек-лист для публикации сайта

1. Функциональность

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

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

1.1. Работоспособность

Сайт загружается и корректно работает на всех актуальных устройствах и во всех браузерах. Все сценарии использования выполняются без ошибок.

1.2. Скорость загрузки страниц

Сервер возвращает HTML-документ любой страницы сайта за 0,2 секунды или быстрее. Весь контент страницы загружается за несколько секунд.

Это сокращает риск того, что пользователь не дождется загрузки и покинет сайт. Благодаря быстрой загрузке HTML-документа на странице сразу же отобразится часть контента, а весь контент — догрузится в течение двух-трех секунд.

1.3. Размер страниц

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

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

1.4. Работоспособность при пиковых нагрузках

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

Если в среднем интернет-магазин одновременно посещает до 1000 пользователей, то в «Черную пятницу» на сайте может находиться 10 000 посетителей. Все они должны без проблем просматривать товары и совершать покупки.

1.5. Сообщения об ошибках

Сайт отображает понятные для пользователя сообщения об ошибках. Например, 401, 403 — доступ запрещен, 404 — страница не найдена, 500 — внутренняя ошибка сервера.

1.6. Ошибки в консоли браузера

В консоли браузера нет ошибок JavaScript или ошибок, связанных с сетью.

1.7. CDN и стандартные библиотеки

Внешние скрипты и стили — стандартные библиотеки, такие как Angular или jQuery, подключаются через CDN (Content Distribution Network, сеть доставки содержимого).

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

1.8. Скрипты и стили

Собственные внутренние скрипты и стили, не размещаемые на CDN, объединяются в минифицированные файлы — один файл скриптов и один файл стилей. Это позволяет уменьшать количество запросов на сервер, экономить трафик и увеличивать скорость загрузки.

1.9. Ссылки на скрипты и стили в HTML-документе

Ссылки на скрипты (кроме скриптов счетчиков, например, Google Analytics) размещены внизу страницы, а ссылки на стили — вверху. 

Это позволяет иметь оптимальную очередность загрузки страницы: основной текстовый контент → стили (визуальное оформление сайта) → изображения → скрипты.

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

1.10. Кэширование статических файлов

Для статических файлов заданы правила кэширования для браузеров.

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

1.11. Кэширование страниц

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

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

1.12. Печать страниц

При печати содержимого страниц вспомогательные элементы, например, навигация и формы, не печатаются.

1.13. Имена файлов

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

Имя файла «Коммерческое предложение компании.pdf» конвертируется в «kommercheskoe_predlozhenye_kompanyy.pdf».

2. Удобство использования и внешний вид

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

2.1. Дизайн

Внешний вид сайта полностью соответствует дизайну на всех актуальных устройствах и браузерах.

2.2. Способы взаимодействия

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

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

Если на сайте есть слайдеры, должна быть возможность переключать слайды с помощью кнопок-стрелок на клавиатуре.

2.3. Взаимодействие с элементами интерфейса

Указатель мыши меняет форму при наведении на текстовые поля, кнопки, ссылки и другие интерактивные элементы. Интерактивные элементы реагируют на наведение, фокус и нажатие.

Например, поле для ввода текста выделяется, когда пользователь ставит в него курсор.

2.4. Отмена действий

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

2.5. Фокус ввода

При клике по заголовку поле получает фокус ввода: выделяется как активное, и в нем появляется курсор. Пользователь может сразу же набирать текст без дополнительного клика по полю.

2.5. Обязательные поля

Все обязательные (или наоборот — необязательные) поля форм помечены, например, звездочками или текстовыми подсказками.

2.6. Валидация

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

Проверка производится на клиентской и серверной сторонах. Если на клиентской стороне по какой-то причине валидация не произойдет и данные попадут сразу на сервер, они будут все равно проверены и при необходимости — отклонены.

2.7. Сообщения об ошибках ввода

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

Например, «поле должно быть заполнено», «поле должно иметь не более 64 символов в длину», «поле может содержать только символы латинского алфавита и цифры».

2.8. Отправка данных на сервер

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

2.9. Отправка форм

Формы отправляются нажатием клавиши «Enter» на клавиатуре. 

2.10 Закрытие всплывающих форм

Всплывающие формы и другие всплывающие элементы (pop-up сообщения, окна) закрываются нажатием клавиши «Esc» на клавиатуре.

2.11. Логотип-ссылка

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

2.12. Переход на другую языковую версию сайта

При изменении языка пользователь остается на текущей странице.

Переход на главную или другую страницу сайта при изменении языка не происходит.

2.13. Масштаб

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

2.14. Стандарты WCAG

Сайт соответствует стандарту доступности для лиц с ограниченными возможностями WCAG уровня АА или AAA.

Например, контраст между текстом и фоном находится на уровне не меньше, чем 4.5:1 (за исключением некоторых случаев), используются атрибуты «aria-...» и так далее.

3. Контент и SEO

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

3.1. Валидный HTML

Разметка любой страницы проходит валидацию HTML.

3.2. Атрибут «lang»

Для всех страниц указан язык. Это сообщит поисковым и другим системам, на каком языке написана страница.

3.3. Тег «meta description» на всех страницах

Тег «meta description» присутствует на всех страницах. 

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

3.4. Тег «title» на всех страницах

Тег «title» присутствует на всех страницах.

Содержимое тега «title» отображается во вкладке сайта в браузере в виде заголовка в поисковой выдаче и сохраняется как название при добавлении сайта в закладки.

3.5. Тег «h1» на всех страницах

Тег «h1» присутствует на всех страницах (и только один раз).

H1 — это главный заголовок на странице. Например, для главной страницы сайта разработчиков приложений H1 может быть: «Разработка мобильных приложений для Android и iOS». Пишется, как правило, самым крупным шрифтом и выделяется жирным.

3.6. Значок сайта во всех актуальных форматах

Разные браузеры имеют разные требования к «favicon» — иконке сайта, которая обычно отображается на открытой вкладке, а также в «Избранном». Чтобы значок сайта был четким и правильного размера, необходимо подготовить несколько файлов в соответствии с требованиями конкретных браузеров и добавить дополнительную разметку в HTML-код страниц.

3.7. Семантика тегов

Для заголовков используются теги «h1»–«h6», для абзацев — «p», для списков — «ol» и «ul», для изображений, которые являются частью контента, — «img», а изображения, которые являются частью графического оформления, задаются с помощью CSS-правила «background-image». То же самое касается и тегов для описания структуры документа: «header», «footer», «navigation» и так далее.

3.8. Атрибут «alt»

Для изображений, аудио и видео-файлов указан атрибут «alt».

Благодаря атрибуту «alt» медиа-файлы отображаются, например, в поиске по картинкам. А если по какой-то причине файл не загрузился, на его месте отобразится содержимое тега «alt» — короткий текст, который объясняет, что должно быть изображено или показано на фото или видео.

3.9. Формат, размер и вес изображений

Фотографии имеют формат JPEG, фрагменты интерфейса (например, кнопки, иконки) — PNG или SVG.

Размер изображения должен рассчитываться пропорционально ширине той области на экране, которую оно занимает, с учетом, что 100% ширины экрана = 1920 точек, кроме тех случаев, когда качество изображения имеет ключевое значение, как, например, на сайте фотографа. В таком случае за 100% ширины экрана принимается 3 840 точек.

3.10. Ссылки на несуществующие страницы

На сайте нет ссылок, которые ведут на удаленные или скрытые страницы. 

3.11. Внешние ссылки

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

3.12. Грамотность

Тексты написаны грамотно, без ошибок. В том числе используется корректная и соответствующая языку типографика: тире, кавычки, апострофы и так далее. 

3.13. Структура URL и многоязычность

Если при изменении языка контент сайта изменяется на локальный, язык указывается в URL в виде первого сегмента, например, «/en/», чтобы можно было ссылаться на конкретную языковую версию и она корректно индексировалась поисковыми системами.

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

3.14. Код языка на главной странице

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

Правильно: site.com

Неправильно: site.com/en/

3.15. Локальный формат данных

Формат чисел, дат, денежных сумм и так далее соответствует выбранному языку.

3.16. Автоматическая переадресация с «www»

При вводе адреса сайта в формате «www.site.com» происходит автоматическая переадресация на версию без «www» в URL:

www.site.com → site.com

Или наоборот, если решено использовать адрес с «www»:

site.com → www.site.com

Без переадресации поисковые системы будут воспринимать страницу с «www» и без — как две разные страницы с одинаковым контентом. Страницы будут конкурировать в поиске, что плохо влияет на результаты в поисковой выдаче.

3.17. Автоматическая переадресация с протокола HTTP на HTTPS

Отсутствует возможность использовать сайт через протокол HTTP.

Сайты, которые работают через HTTP, отмечаются браузерами как небезопасные, и поисковые системы понижают их в выдаче.

3.18. Формат URL

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

Правильно: site.com/sample-page

Неправильно: site.com/Sample_Page

3.19. Cтруктура URL

Структура URL логичная и единообразная, соответствует структуре сайта. Например, для страницы «Туфли», подкатегории категории «Женская обувь», это «/women-shoes/shoes».

3.20. Адреса электронной почты

Адреса электронной почты являются ссылками с префиксом «mailto:».

В таком случае при клике на адрес открывается почтовый клиент, а адрес подставляется в поле «Кому».

3.21. Номера телефонов

Номера телефонов являются ссылками с префиксом «tel:».

В таком случае при клике на номер, если пользователь просматривает сайт с мобильного телефона, можно сразу совершить звонок.

3.22. Ссылки со слешем («/») и без в конце

Для ссылок с «/» и без «/» в конце контент не дублируется.

Ссылка вида «/women-shoes/shoes» и «/women-shoes/shoes/» не отображает одну и ту же страницу. В одном случае отображается ошибка 404.

Принято заканчивать слешем ссылки на каталоги (списки) элементов или разделы, а без слеша — на конкретные страницы.

Иначе поисковая система так же, как в пункте 3.16, будет воспринимать ссылки как дубли одной и той же страницы.

3.23. Автоматическое перенаправление для ссылок с «//» на «/»

Ошибочные ссылки, как, например, «/women-shoes//shoes» автоматически перенаправляются на «/women-shoes/shoes».

Иначе поисковая система так же, как в пунктах 3.16 и 3.22, будет воспринимать ссылки как дубли одной и той же страницы.

3.24. Sitemap.xml

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

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

3.25. Robots.txt

В корне сайта должен быть размещен файл «robots.txt». Этот файл помогает поисковой системе определять, какие страницы индексировать можно, а какие — нет.

Например, у интернет-магазина есть админ-панель. В таком случае адрес «site.com/admin» должен быть доступен только для внутреннего использования и не появляться в поисковой выдаче.

3.26. Google Analytics

На сайте должен быть установлен код отслеживания Google Analytics.

3.27. Структурированные данные

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

4. Безопасность

Задача: проверить, насколько сайт защищен от взлома или потери данных.

4.1. Протокол HTTPS

Сайт работает по протоколу HTTPS. Также нет ссылок на подключаемые ресурсы (скрипты, стили, изображения) по протоколу HTTP.

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

4.2. IP-адреса серверов

Реальные IP-адреса серверов должны быть скрыты. Для проксирования запросов можно использовать такие сервисы, как «Cloudflare».

Если проксирование запросов не используется, есть возможность по домену узнать IP-адрес сервера, что увеличивает шансы на его взлом.

4.3. Защита от DDOS-атак

Использование таких сервисов, как «Cloudflare», для ограничения повторяющихся запросов.

DDOS-атаки способны довести систему до отказа — сайт станет недоступен из-за превышения максимальной нагрузки — или увеличить счета на оплату технических ресурсов из-за существенного увеличения нагрузки на атакуемый сервер.

4.4. Детализация ошибок

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

4.5. Защита от XSS

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

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

4.6. Защита от SQL-инъекций

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

Часто таким атакам подвержены поля поиска, места, где введенный пользователем текст подставляется в заранее подготовленный SQL-запрос и может содержать вредоносные инструкции.

4.7. Защита от спама

Все формы на сайте, например, формы обратной связи и онлайн-заявок, которые отправляют уведомления владельцам, имеют защиту от спама с помощью таких сервисов, как «Google ReCAPTCHA V3».

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

4.8. Защита от автоматизированного подбора паролей

После нескольких попыток ввести неправильный пароль время ответа от сервера увеличивается. Дополнительно сервер может показать капчу, попросить ввести ответ на контрольный вопрос или код из SMS.

Это замедляет процесс подбора и предостерегает от попыток взлома. Время подбора увеличивается настолько, что делает его практически невозможным.

4.9. Автоматическое резервное копирование данных

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

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

4.10. Автоматический мониторинг доступности

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

4.11. Балансировка нагрузки

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

При аварии на одной технической площадке вторая сможет обеспечить полную работоспособность.

4.12. Репликация базы данных

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

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