Онлайн-инструмент для автоматического тестирования на мобильных устройствах

[;Трафик и активность из социальных сетей является важным фактором при ранжировании результатов поисковыми системами.]

Бесплатный онлайн-инструмент для тестирования страницы на мобильную совместимость доступен здесь. Также вы можете протестировать сразу весь сайт воспользовавшись ПРО доступом.

Тестирование на различных экранах

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

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

Чтобы протестировать страницу на 5 разных экранах, человеку нужно от 40 до 70 секунд. Для тысяч страниц это превращается в 30 часов рутинной работы. Site Health за мгновение сканирует страницу на 5 разных экранах: монитор компьютера, планшет вертикально, планшет горизонтально, смартфон вертикально, смартфон горизонтально.

Изображения и аттрибут srcset

Этот баннер выглядит размытым, потому что его ширина 600 пикселей, а ширина экрана мобильного устройства на котором он отображён - 812 пикселей.
Этот баннер выглядит размытым, потому что его ширина 600 пикселей, а ширина экрана мобильного устройства на котором он отображён - 812 пикселей.

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

Сравните следующие блоки кода:

<img src="base-image.jpg" />
<img srcset="/full-width-baner-375px.jpg 375w,
/full-width-baner-812px.jpg 812w,
/full-width-baner-768px.jpg 768w,
/full-width-baner-1024px.jpg 1024w,
/full-width-baner-1920px.jpg 1920w"

 src="base-image.jpg" />

Во втором примере в атрибуте srcset мы указали 5 изображений для 5 разных ширин сайта: 375, 812, 768, 1024 и 1920 пикселей. В атрибуте sizes мы указали, какое изображение использовать в зависимости от ширины сайта. Важно делать различие между шириной экрана и шириной сайта. Такая необходимость связана с тем, что мобильные устройства имеют свойство DRP (Device Pixel Ratio). Оно показывает, сколько физических пикселей экрана соответствует 1 пикселю сайта. Например, у iPhone X разрешение 1125x2436, а сайт отображается в разрешении 375x812. Следовательно, DPR равняется 3. Браузер смартфона захочет загрузить картинку шириной 1125 пикселей, что займёт много времени. Строка (max-width: 375px) 375px в аттрибуте sizes даёт команду использовать изображение шириной 375 пикселей, которое мы указали в атрибуте srcset с помощью строки /full-width-baner-375px.jpg 375w.

Вот сколько трафика мы сэкономили: - Оригинальное изображение для ширины экрана 1920px, 250kb. - Планшет вертикально с шириной 768px, 100kb. Экономия 150Kb или 60%. - Планшет горизонтально с шириной 1024px, 140kb. Экономия 110Kb или 40%. - Телефон вертикально с шириной 375px, 30kb. Экономия 220Kb или 80%. - Телефон вертикально с шириной 812px, 120kb. Экономия 130Kb или 50%.

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

Вот полезная статья для программистов по использованию атрибута “srcset” https://bitsofco.de/the-srcset-and-sizes-attributes/.

Тестирование на пальце приятность

[;Наш инструмент Адаптация под сенсорный экран позволяет визуально увидеть слишком маленькие элементы.]

Кнопки на вашем сайте должны быть достаточно крупными, чтобы по ним можно было попасть пальцем и не промахнуться. Microsoft рекомендует делать кнопки не менее 40x40 пикселей, World Wide Web Consortium рекомендует размер не менее 44x44, Apple рекомендует размер не менее 44x44. Site Health найдёт и сообщит о наличии слишком маленьких кнопок, а специальный инструмент Адаптация под сенсорный экран подсветит такие элементы, чтобы вам было проще их найти.

Скорость

Site Health проверит на наличие десятков проблем, замедляющих ваш сайт.

Фавиконы

[;Это домашняя панель Firefox, отображающая недавно посещённые сайты.]

Различным программам нужен ваш логотип, чтобы отобразить ваш сайт в разделе избранное. Пользователи могут добавить ваш сайт в закладки или добавить его на home screen телефона или планшета. Такие изображения называются favicon и Site Health проверяет их наличие и правильный формат. Вот подробная статья о них. ПРО доступ проверяет наличие фавиконов для программ и девайсов от Microsoft и Android. для программ и девайсов от Microsoft и Android.

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