Mobile Analysis in PageSpeed Insights

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

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

Как оптимизировать сайт для мобильных подключений с большой задержкой

Быстрая загрузка составляет особую проблему для страниц, которые должны просматриваться с помощью мобильных устройств. Ваши посетители могут пользоваться различными сетями стандартов 2G, 3G и 4G. В этом случае задержки будут гораздо больше, чем при высокоскоростном подключении, а на загрузку верхней части страницы потребуется немалая доля из имеющихся в нашем распоряжении 1000 мс.

  • Для сетей 3G время показа составляет 200–300 мс.
  • Для сетей 4G оно равно 50–100 мс.

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

А теперь рассмотрим проблему более детально. Если учесть стандартный сценарий взаимодействия между браузером и сервером, то мы увидим, что 600 мс уже израсходовано в ходе обработки данных: за это время происходит преобразование имени хоста (например, google.com) в IP-адрес, выполняется сетевой цикл для начала сеанса TCP, а затем полный сетевой цикл для отправки запроса HTTP. В результате нам остается лишь 400 мс!

Как обеспечить отображение страницы за одну секунду

Итак, мы вычли из доступного нам времени сетевую задержку и выяснили, что в нашем распоряжении осталось 400 мс. За это время должно произойти многое: серверу нужно обработать ответ, код приложения на стороне клиента должен выполниться, а браузер – структурировать и преобразовать контент. Поэтому нам следует руководствоваться следующими правилами:

1. Сервер должен обработать ответ не дольше, чем за 200 мс.
Время ответа сервера – это период, в течение которого сервер возвращает исходный код HTML. Эта величина определяет время передачи данных в сети. Так что указанная операция должна быть выполнена за 200 мс или даже быстрее.
2. Количество переадресаций нужно минимизировать.
Дополнительные переадресации HTTP могут повлечь лишние сетевые циклы (два, если необходим дополнительный DNS-запрос), что приведет к задержкам в сетях 3G длительностью в сотни миллисекунд. Именно поэтому мы настоятельно рекомендуем веб-мастерам уменьшить количество переадресаций, а лучше даже избавиться от них – это особенно важно для HTML-документа (по возможности избегайте переадресаций m dot).
3. Необходимо уменьшить количество циклов, необходимых для первичной обработки.

В связи с медленным стартом TCP (т. е. тем, как рассчитывается пропускная способность между клиентом и сервером) новое подключение TCP не может сразу же использовать канал в полной мере. Из-за этого в первом цикле сервер может отправить на новое подключение не более 10 пакетов TCP. Затем ему приходится ждать, когда клиент подтвердит получение этих данных, и только затем создавать окно перегрузки, чтобы продолжить передачу данных.

Поэтому нужно оптимизировать контент таким образом, чтобы уменьшить количество циклов, необходимых для отправки данных и выполнения первичной обработки страницы. Желательно, чтобы объем контента, видимого без прокрутки, не превышал 14 КБ – благодаря этому браузер сможет отобразить страницу за один цикл. Также отметим, что ограничение на 10 пакетов (IW10) появилось в стандарте TCP недавно. Чтобы воспользоваться этим изменением, не забудьте обновить сервер до последней версии. В противном случае вы не сможете отправить более 3–4 пакетов.

4. Не используйте внешнюю блокировку JavaScript и CSS для контента в верхней части страницы.

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

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

5. Оставьте браузеру время (200 мс) на анализ структуры страницы и ее отображение.
Анализ HTML и CSS, а также выполнение JavaScript требуют затрат времени и ресурсов на стороне клиента. В зависимости от производительности мобильного устройства, а также от сложности страницы этот процесс может занимать сотни миллисекунд. Мы рекомендуем отвести на него 200 мс.
6. Оптимизируйте код JavaScript, чтобы он обрабатывался быстрее.
На выполнение сложных скриптов и неэффективного кода могут уйти десятки и сотни миллисекунд. Чтобы избежать этого, используйте встроенные в браузер Chrome инструменты для улучшения и оптимизации кода. Более подробные сведения вы найдете в этом интерактивном курсе.

Часто задаваемые вопросы

Учитываете ли вы распространение сетей 4G при разработке рекомендаций?
Сокращение задержек в циклах – это важнейшее преимущество сетей 4G. Оно позволяет существенно уменьшить время загрузки, которое на данный момент составляет более 50% из доступной для нас секунды при доступе к сайту с помощью сетей 3G. Однако 3G является наиболее распространенным типом мобильного подключения в мире и будет оставаться таковым ещё несколько лет, поэтому вам необходимо оптимизировать страницы своего сайта, ориентируясь на такие сети.
Я использую библиотеку JavaScript, в частности JQuery. Что вы мне посоветуете?
Библиотеки JavaScript позволяют добавить различные эффекты, в том числе анимацию, и сделать страницу более интерактивной. Однако такие функции вполне можно активировать и после показа верхней части страницы. Попробуйте выполнять код JavaScript только после ее загрузки.
При создании страницы я использую оболочку JavaScript. Что вы мне посоветуете?
Если содержание страницы создано кодом JavaScript на стороне клиента, попробуйте встроить соответствующие модули JavaScript, чтобы избежать лишних запросов к серверу. Кроме того, оптимизация обработки на стороне сервера может ускорить первую загрузку страницы. Обработайте шаблоны JavaScript на сервере, встройте результаты в HTML, а потом используйте шаблоны на стороне клиента после загрузки приложения.
Можно ли использовать SPDY и HTTP 2.0 в целях оптимизации?
SPDY и HTTP 2.0 позволяют снизить задержки при загрузках страниц с помощью более эффективного использования базового подключения TCP (мультиплексирование, сжатие заголовка, назначение приоритетов). Кроме того, отправка данных по инициативе сервера также может улучшить производительность благодаря устранению дополнительной задержки сети. Настоятельно рекомендуем реализовать SPDY на ваших серверах и немедленно перейти к использованию HTTP 2.0, когда этот стандарт будет готов.
Как определить наиболее важный код CSS на моей странице?
В инструментах Chrome для веб-мастеров откройте панель Audits (Аудит) и запустите отчет о производительности веб-страницы. В созданном отчете найдите пункт Remove unused CSS rules (Удалить неиспользуемые правила CSS). Чтобы определить, какие селекторы CSS применены на данной странице, вы можете использовать любой внешний инструмент или скрипт.
Можно ли автоматизировать эти действия?
Конечно. Существует много продуктов (как платных, так и с открытым кодом) для оптимизации сети, которые помогут вам решить перечисленные задачи. Например, воспользуйтесь инструментами для оптимизации PageSpeed.
Как настроить сервер, чтобы обеспечить эффективность мобильного сайта?
Во-первых, установите на сервере новейшую операционную систему. Чтобы реализовать увеличенное окно перегрузки TCP (IW10), вам понадобится ядро Linux 2.6.39 или более поздней версии. Если вы пользуетесь другими операционными системами, изучите документацию.
Для оптимизации времени ответа сервера следует изменить код или использовать решение для отслеживания приложений, чтобы найти "узкое место" (например, время выполнения скриптов, вызовы базы данных, удаленные вызовы процедур, обработка и т. д). Мы должны стремиться к тому, чтобы ответ HTML обрабатывался в течение 200 мс.
Я использую правила защиты контента. Как мне поступить?
Обновите правила, используемые по умолчанию.
Во-первых, откажитесь от встроенных атрибутов CSS в элементах HTML (например, &lt p style=...&gt), поскольку они нередко приводят к ненужному дублированию кода и по умолчанию блокируются правилами защиты контента (их можно отключить с помощью элемента unsafe inline в style-src). Если правила защиты контента включены, они по умолчанию будут блокировать все теги встроенных скриптов. Если у вас встроенный код JavaScript, то для выполнения встроенных скриптов, использования хеш-данных и временных значений скриптов или применения функции unsafe-inline вам понадобится обновить правила защиты контента. Если у вас реализованы встроенные стили, то вам понадобится обновить правила защиты контента для обработки всех блоков со встроенным стилем, использования хеш-данных и временных значений стилей или применения функции unsafe-inline.

Вам нужна более подробная информация? Вы можете задать вопросы или поделиться своим мнением в нашей группе по адресу pagespeed-insights-discuss.