Как работает Google PageSpeed: улучшите свой рейтинг и рейтинг в поисковых системах

По некоторым статистическим данным в декабре 2018 Google в России обошла Яндекс по объемам поискового трафика и её доля составила 53,5%, в то время, как у Яндекса – 42,7%. Такая ситуация заставляет нас обратить особое внимание на оптимизацию сайтов под требования Google. И значительную помощь в этом нам окажет такой сервис от мирового поискового монстра, как PageSpeed.

В этой статье мы покажем, как PageSpeed вычисляет критическую скорость.

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

В прошлом году Google внесла два существенных изменения в свои алгоритмы индексирования и ранжирования поиска:

• в марте индексация стала основана на мобильной версии страницы , а не на настольной.
• в июле алгоритм ранжирования SEO был обновлен, чтобы включить скорость страницы в качестве фактора ранжирования для мобильных страниц и объявлений.

Из этого мы можем сформулировать две истины:

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

Google написал:

Более быстрые сайты не только улучшают работу пользователей; последние данные показывают, что повышение скорости сайта также снижает эксплуатационные расходы. Как и мы, наши пользователи придают большое значение скорости — именно поэтому мы решили учитывать скорость сайта в нашем рейтинге поиска.

Чтобы понять, как эти изменения повлияют на нас с точки зрения производительности, нам нужно понять базовую технологию. PageSpeed 5.0 - это полный пересмотр предыдущих выпусков. Теперь он питается от Lighthouse и CrUX (Chrome User Experience Report).

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

Что изменилось в PageSpeed 5.0?

До версии 5.0 PageSpeed проводил серию эвристик для страницы сайта. Если страница имеет большие несжатые изображения, PageSpeed предложит сжатие изображений. Отсутствуют кэш-заголовки? Предложит это сделать.

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

В PageSpeed 5.0 страницы загружаются в реальном браузере Chrome, который управляется Lighthouse. Lighthouse записывает метрики из браузера, применяет к ним модель оценки и представляет общую оценку производительности. Рекомендации по улучшению предлагаются на основе оценки конкретных показателей.

Как и PageSpeed, Lighthouse также имеет оценку производительности. В PageSpeed 5.0 оценка производительности берется непосредственно из Lighthouse. Оценка скорости PageSpeed теперь такая же, как и оценка производительности Lighthouse.

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

Что такое Google Lighthouse?

Lighthouse - это проект с открытым исходным кодом, которым управляет специальная команда из Google Chrome. За последние пару лет он стал инструментом бесплатного анализа производительности.

Lighthouse использует протокол удаленной отладки Chrome для чтения информации о запросах сети, измерения производительности JavaScript , соблюдения стандартов доступности и измерения ориентированных на пользователя временных показателей, таких как First Contentful Paint, Time To Interactive или Speed Index.

Как Lighthouse вычисляет балл производительности

Во время тестов производительности Lighthouse записывает множество показателей, ориентированных на то, что видит и испытывает пользователь.

Для создания общей оценки производительности используются 6 показателей:

• Время до интерактивного (TTI)
• Индекс Скорости
• Первая удовлетворительная краска (FCP)
• Первый CPU Idle
• Первая значимая краска (FMP)
• Предполагаемая Задержка Ввода

Lighthouse применит модель оценки 0-100 к каждой из этих метрик. Этот процесс работает путем получения мобильных 75% и 95% из архива HTTP, а затем примененит log normal функцию.

Следуя алгоритму и справочным данным, используемым для вычисления времени загрузки первого контента, мы можем видеть, что если странице удалось стать “интерактивной” за 2,1 секунды, время до интерактивной метрической оценки будет 92/100.

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

Эти веса относятся к влиянию каждой метрики относительно мобильных устройств.

В будущем это также может быть улучшено путем включения наблюдаемых пользователем данных из набора данных отчета Chrome User Experience.

Вам может быть интересно, как вес каждой метрики влияет на общую оценку производительности. Команда Lighthouse создала полезный калькулятор электронных таблиц Google, объясняющий этот процесс:

Используя приведенный выше пример, если мы изменим (время) интерактивное с 5 секунд до 17 секунд (глобальный средний мобильный TTI), наш счет упадет до 56% (он же 56 из 100).

В то время как, если мы изменим первую удовлетворительную краску на 17 секунд, мы получим 62%.

Время интерактивного (TTI) является наиболее эффективным показателем для вашей оценки производительности.

Поэтому, чтобы получить высокий балл PageSpeed, вам понадобится быстрое измерение TTI.

Перемещение иглы на TTI

На высоком уровне есть два существенных фактора, которые оказывают огромное влияние на TTI:

• Количество JavaScript, загружаемых на страницу
• Время выполнения задач JavaScript в основном потоке

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

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

Эффективные меры по сокращению количества скриптов с ваших страниц:

• Просмотрите и удалите полинаполнения, которые больше не требуются для вашей аудитории.
• Понять важность каждой сторонней библиотеки JavaScript. Используйте webpack-bundle-analyser или source-map-explorer для визуализации размера каждой библиотеки.
• Современные инструменты JavaScript (например, Webpack) могут разбивать большие приложения JavaScript на ряд небольших пакетов, которые автоматически загружаются при навигации пользователя. Этот подход известен как разделение кода и чрезвычайно эффективен в улучшении TTI.
• Работники службы будут кэшировать результат байт-кода проанализированного + скомпилированного скрипта . Если вы сможете использовать это, устройства посетителей будут использовать меньше времени для анализа и компиляции, после чего она будет смягчена кешем.

Время контроля до взаимодействия

Чтобы успешно выявить существенные различия в пользовательском опыте, мы предлагаем использовать систему мониторинга производительности (например, Calibre !) что позволяет испытывать минимум 2 прибора; быстрый рабочий стол и мобильный телефон ниже-среднего класса.

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

Углубленное ручное профилирование

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

Отличной заменой для использования реального устройства является использование режима эмуляции аппаратного обеспечения Chrome DevTools.

Как насчет других показателей?

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

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

Отслеживание прогресса и внесение значимых улучшений

Недавно обновленная консоль поиска Google, Lighthouse и PageSpeed Insights - отличный способ получить первоначальную оценку производительности ваших страниц, но не подходит для команд, которым необходимо постоянно отслеживать и улучшать производительность своих страниц.

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

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