Автоматическое тестирование сайта на мобильниках

Обновлено 2 янв. 2019 г.

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

Содержание

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

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

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

Скорость

Фавиконы

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

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

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

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

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

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

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

Для экранов планшетов и телефонов нужно учитывать DPR (device pixels ratio) их экрана. Это соотношение виртуальных пикселей к физическим пикселям. Например, на смартфоне Samsung Galaxy S9+ сайты будут отображаться исходя из виртуальной ширины 360 пикселей. Но реальный размер экрана 1440 пикселей. Следовательно, DPR будет равен 1440/360=4.

Веб-программисты создают сайты ,оптимизируя их под виртуальную ширину. Мировую статистику популярности разрешений экранов доступна здесь https://www.w3counter.com/globalstats.php.

Вы можете задать отдельную картинку для разных экранов. Мы рекомендуем оптимизировать ваш сайт под 5 ширин экрана: 1920 для стационарных компьютеров, 375 и 812 ширина телефона вертикально и горизонтально, 768 и 1024 ширина планшета вертикально и горизонтально. Для смартфонов и планшетов лучше использовать изображения с удвоенным размером. Например, при ширине экрана 375 пикселей изображение должно быть 750. Более крупные изображения сильно замедлят загрузку страницы.

Чтобы задать отдельное изображение для каждого размера экрана, используйте следующий код:

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

<picture>
    <source media="(max-width: 375px)" srcset="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=" />
    <source media="(max-width: 768px)" srcset="./images/baner-768px.jpg" />
    <source media="(max-width: 812px)" srcset="./images/baner-812px.jpg" />
    <source media="(max-width: 1024px)" srcset="./images/baner-1024px.jpg" />
    <source media="(min-width: 1024px)" srcset="./images/baner-1920px.jpg, ./images/baner-3840px.jpg 2x" />
    <img srcset="./images/baner-1920x1080.jpg" />
</picture>

Вот сколько трафика мы сэкономили:

Оригинальное изображение шириной 1920 пикселей весит 250КБ.
Для планшета вертикально шириной 768 пикселей весит 100КБ. Экономия 150КБ или 60%.
Для планшета вертикально шириной 1024 пикселей весит 140КБ. Экономия 110КБ или 40%.
Для телефона вертикально шириной 375 нужно скрыть изображение. Указание CSS свойства display: none не предотвратит загрузку, поэтому мы указали прозрачный пиксель. Экономия 100%.
Для телефона вертикально шириной 812 пикселей весит 120КБ. Экономия 130КБ или 50%.
Для Ultra HD мониторов мы указали самую крупную картинку шириной 3840 пикселей.

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

#element-id {
    background-image: -webkit-image-set(
        url("backgroundx1.jpg") 1x,
        url("backgroundx2.jpg") 2x
    );
}

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

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

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

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

Скорость

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

Фавиконы

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

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