Введение
Сегодня самое важное, что вы можете сделать для своего сайта, – это обеспечить его корректную работу на телефонах и планшетах. В этой статье мы расскажем, как оптимизировать сайт для мобильного браузера с помощью инструментов разработчика Chrome и устройства Android.
Почему так важно оптимизировать сайт для мобильных устройств?
Эффективность
Мобильные устройства получают более быстрые процессоры, больше оперативной памяти, более быстрые графические процессоры и более быстрый доступ к сети по мере перехода от 2G и 3G к 4G. Несмотря на стремительный прогресс, мобильные устройства все ещё уступают компьютерам по производительности. Проще говоря, загрузка сетевых ресурсов, распаковка изображений, отрисовка страницы и выполнение скриптов занимают больше времени. Можно с уверенностью предположить, что ваша страница работает в 5–10 раз медленнее на мобильном устройстве.
Батарея
Мобильные устройства работают только от батареи. Пользователи мобильных устройств хотят, чтобы батарея работала как можно дольше. Неоптимизированный сайт будет разряжать батарею намного быстрее, чем нужно. Чтобы снизить расход заряда батареи, минимизируйте сетевой трафик и сократите количество отрисовок. Когда вы получаете ресурс, Wi-Fi или сотовый приемопередатчик должны быть включены, что разряжает батарею. Когда браузер отрисовывает элемент, использование ЦП и графического процессора резко возрастает, что также разряжает батарею.
Взаимодействие
Цель – повысить показатель, который наиболее важен для вас. В Facebook мы заботимся о прокрутке. В ходе A/B-тестирования мы снизили частоту кадров при прокрутке с 60 до 30 кадров/с. Раздел "Вовлеченность" свернут. Мы сказали: "Хорошо, значит, прокрутка важна".
Facebook на конференции Edge
Пользователи мобильных устройств хотят быстро находить нужную информацию. Самый быстрый сайт получит наибольшее вовлечение.
Управление эффективностью
В Chrome есть отличный набор инструментов разработчика. В этой статье рассказывается, как использовать эти инструменты для профилирования мобильного сайта. Если вы уже знакомы с инструментами разработчика Chrome, отлично! Если нет, посмотрите эти руководства:
Теперь, когда вы знаете, как работает AMP, давайте посмотрим, как ускорить мобильный сайт с помощью DevTools. Если вы впервые используете инструменты разработчика Chrome для Android, ознакомьтесь с кратким руководством по началу работы внизу статьи.
Как использовать инструменты разработчика Chrome удаленно
Подключите устройство Android к компьютеру. В браузере Chrome на компьютере перейдите по адресу http://localhost:9222, а на устройстве Android откройте свой сайт. Вы увидите список открытых вкладок на устройстве Android. Выберите нужную страницу из списка Inspectable pages (Страницы, доступные для проверки).
и вы перейдете к инструментам разработчика Chrome для этой страницы.
О, вот и знакомая панель инструментов разработчика в Chrome. Самое главное, что нужно знать об удаленных инструментах разработчика Chrome, – это то, что они ничем не отличаются от инструментов, которые вы используете на компьютере. Единственное отличие состоит в том, что ваше устройство Android отвечает только за страницу, а ваш рабочий стол отвечает за DevTools. При этом собираются те же данные и доступны те же функции.
Например, я зашел на страницу www.sfgate.com/movies со своего телефона. В Инструментах разработчика Chrome на компьютере я навел указатель мыши на элемент div в инструменте "Элементы", и этот элемент div был визуально выделен на моем устройстве Android.
Инструмент Elements также можно использовать для включения и отключения стилей, что пригодится, когда мы попытаемся исследовать время отрисовки.
Что нужно знать о доступе к сети
Производительность сети важна, а в мобильном интернете – особенно. Мобильные устройства часто используют более медленные подключения, чем настольные компьютеры и ноутбуки. Чтобы убедиться, что вы все делаете правильно, сделайте снимок сети, перейдя в инструмент "Сеть" и нажав кнопку записи.
На скриншоте показан сетевой трафик, полученный в результате поиска Google. Проанализируйте сетевые запросы, которые отправляет ваш сайт, и найдите способы сократить их количество. Если ваш сайт отправляет на сервер запросы на опрос, то вам следует отслеживать действия пользователей и не выполнять опрос, когда пользователь неактивен. Инструмент "Сеть" позволяет просматривать необработанные HTTP-заголовки. Это полезно, если мобильные сети изменяют их.
Оптимизация времени отрисовки
Отрисовка страницы – один из самых ресурсоемких процессов в мобильных браузерах. Отрисовка – это процесс отображения элемента на странице с заданным стилем. Если отрисовка одного элемента требует много ресурсов, это замедляет отрисовку всей страницы. Chrome пытается кэшировать ранее отрисованные элементы в буфере за пределами экрана. Но на мобильных устройствах объем доступной ОЗУ графического процессора ограничен, что ограничивает количество элементов, которые можно кешировать за пределами экрана. Побочный эффект – больше отрисовок, и каждая из них медленнее, чем на компьютере. Чтобы прокрутка была быстрой, нужно минимизировать время отрисовки.
В Chrome 25 есть режим непрерывной перерисовки страницы. В режиме непрерывной перерисовки страницы отрисованные элементы не кешируются, а все элементы отрисовываются в каждом кадре. Принудительно отрисовывая все элементы в каждом кадре, можно провести A/B-тестирование времени отрисовки, включая и отключая элементы и стили. Хотя этот процесс выполняется вручную, он является бесценным инструментом для отслеживания того, насколько ресурсоемкой является отрисовка каждого элемента на странице. Первое правило оптимизации – измерьте то, что вы пытаетесь оптимизировать, чтобы получить базовый уровень. Рассмотрим простой пример.
Сначала включите режим непрерывной перерисовки страницы:
После этого в правом верхнем углу экрана устройства Android появится график. Ось X графика – это время, разделенное на кадры. По оси Y откладывается время отрисовки в миллисекундах. Вы можете видеть, что на моем устройстве отрисовка страницы занимает 14 миллисекунд. Также отображается минимальное и максимальное время отрисовки и объем используемой памяти графического процессора.
В качестве эксперимента я задал для выбранного элемента стиль display: none. Давайте посмотрим, насколько
дорого сейчас отрисовать страницу.
Время отрисовки сократилось с 14 до 4 миллисекунд на кадр. Иными словами, отрисовка этого элемента заняла около 10 миллисекунд. Включая и выключая элементы и стили, вы можете быстро определить, какие части страницы требуют больше всего ресурсов. Помните, что чем быстрее отрисовывается страница, тем меньше задержек, дольше работает батарея и выше вовлеченность пользователей. Если вы хотите узнать больше, прочитайте эту статью о режиме непрерывной перерисовки страницы.
Расширенные функции
about:tracing
Многие из расширенных функций для разработчиков, доступных в Chrome для компьютеров, также доступны в Chrome для Android. Например, доступны страницы about:gpu-internals, about:appcache-internals и about:net-internals. При исследовании особенно сложной проблемы вам иногда требуется больше данных, чтобы сузить круг причин вашей проблемы. На компьютере вы можете использовать about:tracing. Если вы не знакомы с инструментом about:tracing, посмотрите мое видео о том, как использовать инструмент профилирования about:tracing. Чтобы получить те же данные из Chrome для Android, выполните следующие действия:
- Скачайте файл adb_trace.py.
- Запустите adb_trace.py из командной строки
- Как использовать Chrome на Android
- Нажмите Enter в командной строке, чтобы остановить скрипт adb_trace.py.
После завершения работы adb_trace.py вы получите файл JSON, который можно загрузить в Chrome для компьютеров на странице about:tracing.
Начало работы
Теперь, когда мы рассмотрели возможности удаленных инструментов разработчика Chrome, давайте узнаем, как начать сеанс удаленной отладки. Если вы раньше не пользовались ими, прочитайте подробные инструкции. Если вы уже использовали их, но забыли, как именно, я также привела здесь краткие инструкции.
1. Установите Android SDK
Возможно, вы задаетесь вопросом, зачем устанавливать Android SDK, если вы разрабатываете веб-приложение. В SDK входит adb (Android Debug Bridge). Браузер Chrome на компьютере должен иметь возможность обмениваться данными с устройством Android. Chrome не взаимодействует с устройством Android напрямую, а передает данные через adb.
2. Включите отладку по USB на устройстве
Включить отладку по USB можно в настройках Android. Включить
3. Подключитесь к устройству
Если вы ещё этого не сделали, подключите устройство Android к компьютеру через USB. Если вы впервые используете отладку по USB, появится следующее сообщение:
Если вы планируете часто проводить сеансы удаленной отладки, рекомендуем установить флажок "Всегда разрешать отладку с этого компьютера".
4. Убедитесь, что устройство подключено правильно.
В командной строке выполните команду adb devices. Вы должны увидеть свое устройство в списке.
5. Как включить отладку по USB в Chrome
Откройте Настройки > Дополнительно > Инструменты разработчика и установите флажок Включить отладку по USB, как показано ниже.
6. Как подключить Инструменты разработчика к устройству Android
Выполните следующую команду:
adb forward tcp:9222 localabstract:chrome_devtools_remote
создает мост между вашим настольным компьютером и устройством Android через adb. Если у вас возникли проблемы, ознакомьтесь с подробными инструкциями по настройке.
7. Проверка готовности
Чтобы проверить, правильно ли подключено устройство, откройте Chrome на компьютере и перейдите по адресу http://localhost:9222. Если вы видите ошибку 404 или другую ошибку, или не видите ничего похожего на следующее:
Ознакомьтесь с подробными инструкциями по настройке.
Заключение
Пользователи мобильных устройств часто спешат и хотят быстро найти нужную информацию на странице. Разработчик мобильного сайта должен обеспечить быструю загрузку страницы и хорошую работу на мобильных устройствах. В противном случае вовлеченность пользователей снизится. Удаленные инструменты разработчика Chrome функционально эквивалентны своим аналогам для компьютеров. Интерфейс достаточно похож, поэтому вам не нужно изучать новый набор инструментов. Другими словами, ваш рабочий процесс переносится. Помните, что Facebook не застрахован от проблем с производительностью, как и ваш сайт. Производительные сайты привлекают больше пользователей.