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

117
0/10

Инструменты для проверки скорости и адаптивности

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

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

Для начала, немного теории. Разберемся с терминами.

Кроссплатформенность — способность веб-сайта или приложения без ошибок работать более чем на одной программной платформе или операционной системе.

Кроссбраузерность — одинаковая работоспособность веб-сайта во всех без исключения браузерах. Единство включает в себя: полную работоспособность всех функций, безошибочность верстки, отображение контента с одинаковой степенью читабельности.

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

Скорость загрузки — фактор ранжирования и оптимизации веб-страницы. Низкая скорость отрицательно влияет на положение в поисковой выдаче. Оптимальное значение — 2 секунды. Идеальный показатель — 0,5 секунды.

На медленных сайтах резко снижается конверсия, падает количество лидов, прекращаются продажи. Средний показатель снижения конверсии при уменьшении скорости на 100 м.сек — 7%.

Содержание

  1. PageSpeed Insights.

  2. Sitespeed.

  3. Mobile-Friendly Test.

  4. Browserling.

  5. Adaptivator.

  6. Screenfly.

  7. I love adaptive.

  8. Бонус.


1. PageSpeed Insights

Ссылка→

Стоимость: бесплатно.

Язык: английский, русский.

PageSpeed Insights

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

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

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

2. Sitespeed

Ссылка→

Стоимость: бесплатно.

Язык: английский, русский.

Sitespeed

Сервис рассылает запросы к проверяемому сайту с разных континентов земного шара и определяет скорость для каждого из дата-центров. В итоговой таблице подсвечиваются худшие, лучшие результаты и средние показатели по скорости загрузки. Задействуются серверы разных провайдеров: США, Великобритании, Германии, Нидерландов, Канады, Украины. Добавьте в сервис на спонсорских условиях свой сервер, если предоставляете услуги хостинга и нуждаетесь в дополнительной рекламе.

3. Mobile-Friendly Test

Ссылка→

Стоимость: бесплатно.

Язык: английский, русский.

Mobile-Friendly Test

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

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

4. Browserling

Ссылка→

Стоимость: бесплатно с ограничением по времени и количеству браузеров.

Язык: английский.

Browserling

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

Достоинства приложения — в простоте и возможности бесплатно проверить небольшое количество сайтов.

Недостатки: ограниченность версий интернет-обозревателей, невозможность назначить для теста пользовательскую операционную систему. Сервис ориентирован на ручную проверку сайтов.

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

5. Adaptivator

Ссылка→

Стоимость: бесплатно.

Язык: английский, немецкий, испанский, русский и другие.

Adaptivator

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

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

6. Screenfly

Ссылка→

Стоимость: бесплатно.

Язык: английский.

Screenfly

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

7. I love adaptive

Ссылка→

Стоимость: бесплатно.

Язык: английский.

I love adaptive

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

Бонус

находясь в браузере Google Chrome, нажать клавишу F12 и выбрать в открывшемся окне пиктограмму мобильного устройства

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

Ваша оценка:
Нравится?
Обсуждение
    Для участия в обсуждении на сайт