На чём проверять кросс-браузерность

Вместе с Айратом Рахимзяновым, автором телеграм‑канала «SEO‑секретики» и владельцем агентства «Релианта», расскажем, что влияет на кросс‑браузерность и как её проверить.

Для чего нужна кросс‑браузерность

Кросс‑браузерность нужна для улучшения поведенческих факторов и сохранения всех каналов трафика.

Поведенческие факторы

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

Кроме того, сайт со недоработанной вёрсткой угрожает репутации бренда. Пользователи могут подумать, что сайт сломан, за ним не следят или что компания больше не работает. Из‑за этого доверие пользователей снизится.

Трафик

Яндекс и Google — наиболее популярные браузеры в России: их выбирают около 70% пользователей. Если вы не тестировали сайт на менее популярных браузерах, вы рискуете потерять до трети трафика.

Показатели кросс‑браузерности

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

Иногда к кросс‑браузерности относят ещё и кросс‑платформенность, но это другой термин: он обозначает адаптивность сайта к разным устройствам.

Скорость загрузки

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

Расположение элементов

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

Работоспособность интерактивных элементов

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

Читабельность текста

Текст не должен наслаиваться на другие элементы, съезжать, отображаться в виде нечитаемых иероглифов.

Как проверить кросс‑браузерность

В сервисах веб‑аналитики можно узнать, какими браузерами преимущественно пользуется ваша аудитория. Сделать это можно, например, в Яндекс Метрике: зайдите в раздел «Отчёты», затем в подраздел «Технологии» и выберите строку «Браузеры». В таблице вы увидите список наиболее популярных браузеров, а также метрики: визиты, отказы, глубина просмотра и так далее.

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

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

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

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

Айрат Рахимзянов автор телеграм‑канала «SEO‑секретики» и владелец агентства «Релианта»

Вручную

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

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

С помощью инструментов

Существуют программы, которые проверят работоспособность сайта в разных браузерах, например Browserling, Multibrowser или BrowserStack.

Чтобы проверить браузер, выберите платформу и браузер и запустите проверку:

Бесплатно в Browserling можно проверить только браузеры Chrome и Edge и только на Windows 10, поэтому, чтобы проверить работоспособность сайта на других платформах, нужно заплатить — минимальная месячная подписка стоит 19 дол.

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

Резюмируя: для проверки кросс‑браузерности сайта важно пройтись по следующим пунктам:

• проанализировать данные по браузерам в Яндекс Метрике;
• проверить отказные браузеры с помощью сервисов или вручную в браузерах из ТОП‑3: Google Chrome, Firefox, Safari;
• вручную проверить интерактивные элементы: формы, видео и так далее;
• исправить ошибки.

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

Айрат Рахимзянов автор телеграм‑канала «SEO‑секретики» и владелец агентства «Релианта»

Больше о работе над сайтом 👇

Как быстро направить страницы на повторную индексацию

Как бороться с накруткой поведенческих факторов

Что лучше выбрать с точки зрения SEO: адаптивную вёрстку или мобильный сайт