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

Проверка аптайма сайта: почему это важно?

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

Более того, плохой пользовательский опыт может негативно повлиять на вашу позицию в рейтинге страниц в поисковых системах (SERP) и вашу профессиональную репутацию.

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

Вот лучшие из них.

Почему важно отслеживать изменения и доступность сайтов

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

Почему важна доступность сайтов

Доступность — качество цифровой среды, характеризующее степень её приспособленности для людей с ограниченными возможностями. На английском языке это Accessibility или сокращенно A11Y. Сокращение довольно забавное, ведь между A и Y ровно 11 букв.

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

Почему важно уделять время разработке доступных интерфейсов? На это есть несколько причин:

1. Мораль. Люди с ограниченными особенностями ничем не хуже остальных. Они тоже хотят пользоваться полным функционалом сайта. Им так же хочется читать новости, узнавать что-то новое, пробовать различные сервисы.
2. Клиентоориентированность. Люди с ограниченными особенностями — это тоже клиенты, которые покупают ваш товар, пользуются вашими услугами и предложениями. В конце концов это деньги, прибыль и возможность для вас выйти на новый рынок.
3. Юридический аспект. В США имеется обязательное требование, чтобы все сайты были доступные, поэтому там регулярно проходят суды. В России обязательно доступность должна быть у сайтов государственных учреждений.

Что такое аптайм/даунтайм

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

Как посчитать аптайм?

Для этого есть формула: от общего количества часов в году вычитаем общее количество часов простоя, делим это число на общее количество часов в году и умножаем на 100. Например, в году 8760 часов (365 х 24). Если у вашего веб-сайта 4 часа простоя в год, у вас останется 8756. Расчёт будет следующим:

(8756/8760) x 100 = 99.95

Это означает, что аптайм сайта составляет 99,95%.

Хотя мы все стремимся к 100%, это невозможно. Лучшие провайдеры хостинга стремятся к тому, чтобы время безотказной работы, или аптайм в их соглашении об уровне услуг (SLA) составляло 99,9%. SLA — это процент времени безотказной работы, который обещает ваша служба хостинга, когда вы подписываетесь на их услуги.

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

Hosttracker

Бесплатная проверка аптайма

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

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

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

Они могут присылать их по электронной почте или SMS. Сервис будет сканировать ваш сайт каждые 10 минут, если вы используете бесплатную версию; каждые 60 секунд, если это базовый платный тариф. Если вы выберите корпоративный пакет, то получите неограниченный круглосуточный мониторинг.

Простой, но надёжный. Он не только выполняет всесторонний мониторинг, но и информирует вас в режиме реального времени. Также предусмотрена защита от ложных срабатываний.

Завершающее слово

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

Инструменты для проверки сайта на доступность

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

Инструменты и сервисы для проверки сайта на доступность

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

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

Платная версия сервиса имеет расширенный функционал и три тарифа.  

Тариф Webmaster

Тариф Business

Тариф Enterprise

Заказать SEO-аудит сайта

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

Стоимость платного тарифа варьируется от количества сайтов для одновременного мониторинга и количества СМС сообщений и звонков. Стартовая стоимость — 15$, максимальная 828$ в месяц. 

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

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

Тариф Synthetic Monitoring. Стоимость варьируется от 10 до 18300$ в зависимости от количества проверок и оповещений. Минимальный тариф включает в себя 10 аптаймов и 50 СМС оповещений. Максимальный — 30000 аптаймов и 1500 СМС.

Как сократить время, в течении которого лежит ваш сайт?

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

– Тип хостинга, который вы выбираете

– Расположение серверов относительно вашего местоположения

– Ваш контент, например, много ли у вас видео или изображений

– Ваша платформа, например, WordPress или созданная на заказ CMS

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

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

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

Также в вопросах безопасности не полагайтесь только на свой хостинг. Убедитесь, что вы всегда используете последнюю версию WordPress, и удалите все старые или неиспользуемые плагины. Настройте автоматические обновления антивируса и антишпионского ПО, а также установите надёжный брандмауэр.

Какие сайты нельзя назвать доступными

Что же такое недоступный интерфейс в широком смысле этого слова? В данное понятие входит довольно много нюансов.

И только после всех этих аспектов идут физиологические особенности.

Кому важны доступные сайты?

Доступность важна пользователям с нарушением зрения:

• полностью незрячим людям,
• слабовидящим пользователям,
• людям с нарушением цветовосприятия.

Этим пользователям сложно или совсем невозможно увидеть ваш сайт.

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

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

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

Главная задача доступности с общей точки зрения (с точки зрения дизайна, разработки и пр.) — сделать удобные интерфейсы для всех.

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

По статистике, на данный момент около 880 000 слепых и слабовидящих людей. Примерно 15% людей всего мира имеют физические особенности. Поэтому очень важно уделять время разработке доступности сайтов и их интерфейсов.

Платные инструменты для мониторинга аптайма/даунтайма

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

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

Один из самых популярных платных инструментов мониторинга — Pingdom. Даже если вы выберете их бесплатную версию, вы сразу же получите отзывы из более чем 70 мест. Он отслеживает каждую минуту и сообщает вам о любых проблемах с помощью push-уведомлений или электронной почты. В премиум версии есть SMS-уведомления.

Простой способ проверить сайт на доступность

Предлагаю поиграть в небольшую игру. Попробуйте открыть какой-нибудь сайт и походить по нему с помощью клавиатуры, используя клавиши tab, shift tab, space, enter, backscape и др. Удобно? А теперь представьте, как люди, которые не могут по тем или иным причинам пользоваться мышкой, просматривают и «ходят» по сайту.

Один из «любимых» сайтов автора — это Aliexpress. Некоторое время назад разработчики убрали совсем состояние фокуса на элементах, т.е. при хождении сайта с клавиатуры было совершенно непонятно, на каком элементе находишься в данный момент. Сейчас разработчики вернули фокус, но не сделали свой индивидуальный — браузер сам будет подбирать состояние фокуса.

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

Если очень сильно присмотреться, то на скриншоте выше можно заметить, что фокус стоит на ссылке «Защита покупателя».

А вот в примере ниже фокус стоит на каком-то элементе, но на каком? Кажется, где-то на слайдере, но это не точно.

Стандарты доступности сайтов

В России существует ГОСТ Р 52872-2022 — он-то и описывает все требования к доступности информации в цифровой среде. На данный момент в РФ сайты государственных учреждений обязаны иметь версию для слабовидящих людей.

Если говорить о западе, то нужно смотреть руководство WCAG 2.0 от W3C и Section 508.

В WCAG 2.0 прописаны следующие принципы:

• Perceivable (Воспринимаемость) — пользователь должен быть в состоянии воспринять информацию любым из органов чувств. Т.е. невидящий должен услышать, а неслышащий — прочитать.
• Operable (Управляемость) — не должно быть такого действия, которое не смог бы совершить пользователь.
• Understandable (Понятность) — передаваемая информация и способ управления интерфейсом должны быть понятны пользователю.
• Robust (Надежность) — передаваемая информация должна быть пригодна для интерпретации большим количеством вспомогательных средств.

Технические аспекты доступности сайтов

Доступность сайтов тесно связана с семантикой. Семантика — это выбор правильных тегов при разработке сайта, например, это header, main, section, aside, footer и многие другие.

При создании меню на сайте необходимо использовать семантически подходящие для этого теги, такие как nav, ul, li, a. Если это будет все выполнено с помощью тега <div>, то скринридер не сможет правильно предоставить человеку информацию о том, где он сейчас находится.

При верной разметке воспроизведение через экранную читалку будет примерно следующим: Навигация => список из шести элементов => ссылка о компании.

Ниже приведен пример разметки меню в шапке сайта и то, как эта шапка выглядит на сайте.

Для ссылок, которые находятся не в меню, можно добавлять специальный атрибут aria-label, который будет озвучивать, куда ведет ссылка. Ярким примером являются ссылки на социальные сети или мессенджеры. Если не добавить данный атрибут, то скринридер озвучит ссылку, взяв текст из адреса т.е. из атрибута href.

Ниже представлен пример использования атрибута aria-label для ссылки на Telegram-канал компании и пример данного блока на сайте.

Говоря о различных формах, необходимо описывать поля ввода с помощью тега label, обязательно указывать тип данных в поле ввода. Если форма большая, то рекомендуется объединять поля в специальные теги fieldset и давать им подпись через legend. Обязательные поля отмечать с помощью атрибута required.

Ниже представлен пример верстки некоторой части формы и скриншот, как эта форма выглядит.

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

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

Есть еще один прием, который касается заголовков на странице. Иногда дизайн сделан так, что явного заголовка на странице нет. Для осуществления доступности разработчики договорились использовать специальный класс visually-hidden.

Ниже как раз представлено меню из скринридера, основанного на заголовках.

Как правило на страницах всегда есть ссылки и кнопки. При создании данных элементов (в частности кнопок) следуют отдавать предпочтение нативным HTML-элементам, т.к. они имеют уже встроенные функциональные особенности.

За кнопку в HTML отвечает тег button. Существует также универсальный тег div, используемый для создания блока информации с последующей стилизацией. Можно, конечно, сделать свою собственную кнопку через div, но, чтобы повторить весь функционал нативной кнопки, нужно приложить массу усилий. У нативной кнопки есть disabled (когда кнопка заблокирована), состояние фокуса, можно перейти на кнопку через клавиатуру.

Ниже представлены 2 кнопки.

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

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

Технических нюансов очень много, выше описаны лишь некоторые наиболее популярные. Рассказывать о разных аспектах можно часами, поэтому пока остановимся на этом.

Подведем итог

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

Вместо вывода

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

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