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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

Закрыть

Сообщить об ошибке

Отменить
4130
How-to Читать 6 минут 2 апреля 2019

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

Как протестировать кроссбраузерность сайта онлайн
ЧЕК-ЛИСТ: ТЕХНИЧЕСКАЯ ЧАСТЬ — КОД СТРАНИЦ
Инструкцию одобрил
SEO-специалист в Luxeo
Посетители вашего сайта пользуются разными браузерами. В некоторых версиях сайт может работать некорректно или отображаться некрасиво, люди будут уходить. Тестируйте кроссбраузерность, чтобы понизить показатель отказов и увеличить конверсию.

Что такое кроссбраузерность

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

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

  • ПК;
  • мобильных устройствах;
  • планшетах и прочем.

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

Влияние кроссбраузерности на SEO-продвижение связано с юзабилити для пользователя. Хорошее юзабилити положительно воздействует на поведенческие факторы, которые добавляют вес в SERP.

Проверка кроссбраузерности сайта

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

  • Google Chrome;
  • Safari;
  • Opera;
  • Mozilla Firefox;
  • Internet Explorer / Microsoft Edge.

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

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

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

Browsershots

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

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

Перейдите по ссылке, чтобы выполнить тест:
Тест совместимости браузеров Browsershots
В активном поле следует указать гиперссылку на тестируемый веб-сайт, затем нажмите кнопку «Submit», как на скриншоте:
Проверка кроссбраузерности онлайн Browsershots
Когда система завершит проверку, вы узнаете кроссбраузерность сайта и увидите скриншоты:
Скриншоты сайта из разных браузеров Browsershots
Инструмент бесплатно проверяет сайт в порядке очереди, поэтому иногда возникают задержки из-за нагрузки на сервер. Платная версия предполагает проверку вне очереди и конфиденциальность итоговых скриншотов.

CrossBrowserTesting

CrossBrowserTesting — платный инструмент с триал-доступом на 7 дней. Для разовой проверки этого достаточно. Сервис совершает проверку через более чем 1500 десктопных и мобильных браузеров. Проверки могут происходить автоматически через заданный период.

Для начала теста зарегистрируйте бесплатный аккаунт и подтвердите свой почтовый адрес. Далее, авторизовавшись в личном кабинете, начните тест. Необходимые для работы вкладки выделены на скриншоте:
Онлайн проверка отображения сайта в разных браузерах CrossBrowserTesting
Укажите ссылку, нажмите «Run Test» и получите результат проверки.

Saucelabs

Saucelabs оценивает совместимость не только браузеров ПК, но и мобильных устройств. Сервис платный, но есть бесплатный доступ длительностью в 14 дней. После регистрации и подтверждения учетной записи зайдите в аккаунт.
Онлайн тест совместимости браузеров Saucelabs
Далее в пункте «Live Testing» из левого верхнего меню откроется страница, где необходимо вставить скопированный заранее URL-адрес сайта и нажать кнопку «Start Session» в правом нижнем углу.

NetRenderer

NetRenderer — бесплатный инструмент. Позволяет проверить отображение сайта в Internet Explorer 11, 10, 9, 8, 7, 6 или 5.5 версиях.

Обычно снимок показывает самую верхнюю часть вашей веб-страницы. Если вы хотите посмотреть, как выглядит страница внизу, просто введите вертикальное смещение справа от поля URL и снова нажмите «Render».
Проверка кроссбраузерности NetRenderer
Через несколько секунд вы получите снимок своей веб-страницы.

Browsera

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

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

Инструмент платный, но с гарантией возврата средств в течение 30 дней.

Пример отчета с подсвеченными проблемными участками:
Онлайн тест кроссбраузрености сайта Browsera

Заключение

Кроссбраузерность — это идентичность отображения веб-ресурса в разных браузерах и их версиях. Некорректный вид сайта отталкивает пользователей, что плохо для поведенческих факторов и SEO.

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

В данной статье мы рассмотрели несколько тестировщиков:
1
Browsershots.
2
CrossBrowserTesting.
3
Saucelabs.
4
NetRenderer.
5
Browsera.
Существует и ручной способ проверки. Для этого следует выяснить через Google Analytics, какими браузерами пользуются ваши посетители, и вручную открыть свой сайт во всех указанных браузерах.

Эта статья — часть модуля «Список задач» в Serpstat
«Список задач» в Serpstat
«Список задач» — готовый to-do лист, который поможет вести учет
о выполнении работ по конкретному проекту. Инструмент содержит готовые шаблоны с обширным списком параметров по развитию проекта, к которым также можно добавлять собственные пункты.
Начать работу со «Списком задач»

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

3 из 5 на основе 2 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.

Поделитесь статьей с вашими друзьями

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

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

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

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

Я хочу больше лимитов