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

В обзоре рассмотрим удобные и популярные сервисы для проверки скорости загрузки сайтов и их адаптивности.

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

Также полезной на данную тему станет наша предыдущая статья “Два метода, как ускорить сайт: PWA или AMP. Что лучше выбрать?”. По .

Первый в обзоре сервис – PageSpeed Insights . Специальный сервис от компании Гугл, которые проверяет скорость загрузки сайта и дает рекомендации для ее улучшения . При этом анализируется эффективность мобильной версии сайта и десктопа.

Оценка сервиса зависит не только исключительно исходя из анализа скорости загрузки, в нее включены еще и другие критерии сервиса. Как заявляют сами разработчики PageSpeed Insights гнаться до оценки 100 бессмысленно, так как данный сервис использует свою внутреннюю метрику со своими правилами.

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

WebPageTest – достаточно простой сервис для проверки. Предоставляет более 40 локаций на выбор . В том числе можно добавить ссылки на конкурентов и сделать сравнительный анализ скорости загрузки.

Для проверки скорости загрузки сайта подойдет еще один полезный инструмент – GTmetrix . По сравнению с конкурентами он обладает несколькими преимуществами :

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

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

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

8 советов , которые помогут ускорить работу Вашего сайта, .

Популярные инструменты для ускорения работы сайтов .

СЕРВИСЫ ДЛЯ ПРОВЕРКИ АДАПТИВНОСТИ

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

Mobile-Friendy Test – простой сервис для проверки адаптивности ресурса. С помощью него можно узнать оптимизирована ли страница под мобильные устройства, а также ознакомиться с ошибками, которые возникают при загрузке . В результате предоставляется скриншот первой странице ресурса как на мобильном устройстве. Яндекс.Вебмастер также предоставляет похожий инструмент, но он позволяет анализировать только свой сайт.

Browserling – специальный инструмент для тестирования, полноценный эмулятор . Позволяет выбрать ОС и указать браузер с версией. Недостаток – бесплатная версия существенно ограничена.

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

Screenfly – по сравнению с предыдущим сервисом для анализа адаптивности более функциональный. На выбор предлагается 30 вариантов экранных размеров или вы можете прописать размеры сами. Кнопка “Allow scrolling” позволяет увидеть все элементы страницы.

I love adaptive – сервис для анализа кроссплатформенности интернет-ресурса. С помощью него можно легко выбрать нужную комбинацию устройства и ОС , а также повернуть экран и подкорректировать зум. Недостаток системы: для ПК и ноутбуков нет возможности выбора ОС. Для некоторых сайтов обязательно необходима установка специального расширение на браузер Chrome.

А какими инструментами для проверки адаптивности и измерения скорости загрузки сайта пользуетесь вы? Возможно мы упустили что-то интересное…

В рассмотрены факторы, которые имеют наибольшее влияние на рейтинг мобильной версии сайта.

1324 раз(а) 2 Сегодня просмотрено раз(а)

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

Признаки дружелюбного к мобильным устройствам сайта:

Удобно читаемый контент (читается без увеличения), крупные поля форм и кнопки.
Отсутствие "тяжелых" картинок, Flash - элементов и излишней анимации.
Отсутствие Java-апплетов и Silverlight-плагинов.
Отсутствие горизонтальной полосы прокрутки.
Минимальная скорость загрузки сайта.
Максимально простая навигация.
Прописан мета-тег viewport.

Сервисы для проверки сайта на "мобильность"

Для демонстрации работы сервисов возьмём сайт моих хороших партнёров - бюро переводов КОНТЕКСТ .

1. Google Mobile Friendly

Проверить можно любой сайт, просто вбив его адрес в строку.

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

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

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

3. Средство проверки Bing

Проверяется общая оптимизация плюс соответствие 4 пунктам.

Также отображается то, как сайт выглядит на экране смартфона (конечно же, на OS windows, в то время предыдущие сервисы отображали android-смартфон =)).

4. Mobile Checker от W3C

Самый "долгий" из всех сервисов. Настолько "долгий", что окончания проверки я так и не дождался =)

Ждал минут 5, в то время как остальные сервисы справлялись за 5-20 секунд.

5. Responsinator

В отличии от остальных не даёт каких-либо оценок, но отображает как выглядит ваш сайт на 6 различных устройствах в двух ориентациях на IOS и Android, что очень круто.

UPD1: 20.07.2017:

6. Adaptivator

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

UPD2: 3.11.2017:

7. iloveadaptive.ru

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

Вывод

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

Поэтому всем, кто хочет быть ближе к клиенту и иметь больше посещений\лидов, рекомендую как можно быстрее адаптировать свои сайты. Задать мне вопрос -

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

XRespond

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

Responsinator

Сервис Responsinator позволяет проверить отображение сайта в альбомной и портретной ориентации на смартфонах iPhone, Nexus и планшете iPad. Присутствует также возможность переключения между HTTP и HTTPS.

Responsive design checker

Responsive design checker представляет возможность проверки адаптивности сайта на смартфонах, включая новые телефоны, как, например, Google Pixel, планшетах, разных разрешениях монитора, а также позволяет самому корректировать размеры окна.

Matt Kersley

Дизайнер и разработчик из Англии Мэтт Керсли запустил на своем сайте собственный сервис , где можно проверить адаптивность сайта, где по умолчанию стоит ширина 240 пикселей. Керсли решил не добавлять лишних размеров и ограничился пятью: 240px, 320px, 480px, 768px, 1024px.

Дизайнер выложил код инструмента на github для тех, кто желает установить его на свой сайт.

Am I Responsive?

Am I Responsive? – отличный выбор, если вам нужно быстро проверить адаптивность сайта на нескольких устройствах и продемонстрировать это заказчику на скриншоте.

Mobile-Friendly Test

У Google множество сервисов в помощь веб-мастеру и Mobile-Friendly Test один из них. Mobile-Friendly Test отличается от остальных веб-сервисов из нашего списка – его нельзя использовать для просмотра отображения сайта на различных устройств. Его функция заключается в проверке оптимизации сайта на мобильных устройствах, при этом предоставляя советы по исправлению проблем. В ценности советов Google сомневаться не приходится.

2015-09-11 8204 4 Денис Абдуллин

Адаптивный дизайн не просто новый тренд, а в некоторой степени необходимость. Теперь и русские сайты делают такими, чтобы они хорошо смотрелись красиво и удобно на любом экране.

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

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

Screenfly – проверка адаптивности сайта с выбором дейвайса

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

Mattkersley – все размеры на одной странице

Проект хорош тем, что вы вводите ссылку на свой сайт, а он загружает его во все фреймы, что есть на страницы. Можно сразу тестировать сайт на 5 размерах. Есть 2 режима: просто тестировать ширину или показать названия устройств и их высоту.

Responsive.is – проверка адаптивности на нескольких устройствах

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

Лично я не пользуюсь такими сервисами, а просто уменьшаю ширину браузера . Плюс ко всему, сервисы проверки адаптивности сайта делают тоже самое, лучше смотреть свой проект на реальных устройствах, в стандартных браузерах Android и Safari на iPhone.

Есть и другие сервисы, в том числе и на русском языке. Сначала мы хотели привести именно их, но они просто копировали выше перечисленные сайты, просто переведен имеющийся текст, просто вместо «Phone», например, вы будете видеть «Телефон».

Фреймворков, таких как или , которые существенно облегчают и ускоряют верстку страниц.
подразумевает под собой отличное отображение веб страницы на всех устройствах и расширениях мониторов. Наверное, не у каждого верстальщика имеется полный набор девайсов со всеми возможными расширениями дисплеев, для тестирования своей верстки . Это и не удивительно, ведь техника нынче не дешевая.
Итак. Покупать горы мобильников и планшетов, не вариант - разоримся. Что же делать? Для этих задач были разработаны сервисы для тестирования адаптивных сайтов . Принцип работы их очень прост. Чаще всего имеется фрейм определенного размера, где открывается страница. Эффект получается примерно такой же, как и при просмотре на мобильном устройстве. Хочу заметить, что сервис не всегда в точности покажет отображение страницы на телефоне или планшете. При верстке следует тестировать с помощью сервисов, но после завершения, по возможности, протестировать на наиболее распространенных устройствах.
Итак. К вашему вниманию лучшие инструменты для тестирования адаптивных сайтов .

Инструмент для тестирования адаптивных сайтов от компании Adobe. Для его использования требуется установить себе на компьютер.
Программа позволяет синхронизировать ваши устройства по WIFI и просматривать сайт так, как он будет отображаться на вашем девайсе. На данный момент поддерживаются устройства с такими ОС: iOS, Android, Kindle Fire.