Обновление PageSpeed Insights 2021

Компания Google выпустила очередное обновление одного из наиболее популярных инструментов для разработчиков — Google Pagespeed, который измеряет скорость загрузки сайта, а также выдает отчет обнаруженных проблем и негативных факторов. Несмотря на то, что PageSpeed Insights — рекомендательный инструмент, о чем говорится в FAQ компании, его применение, как и устранение найденных ошибок, считаются обязательными во многих СЕО компаниях. Рекомендации помогут правильной оптимизации, сделают результат еще более удобным для пользователя.

Зачем необходим показатель Google Page Speed Insights

Показатель PageSpeed Insights (Lighthouse) — это комплексная оценка, которая позволяет оценить скорость загрузки ресурса и качество его работы. Проверять можно любые типы сайтов, это может быть платформа для интернет-магазинов, блог, новостной портал и любые другие ресурсы и сервисы, работающие в интернете.

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

Показатель Lighthouse Performance (сокр. Perf) вычисляется на основе суммы метрик производительности. Анализируется url, код страницы, время отклика сервера, размер изображений, насколько быстро и правильно страница отображается в Google Chrome и других браузерах. В результате формируется отчет, с детализацией по каждому показателю, а также возможными причинами, влияющими на их понижение.

Что изменилось в новой версии движка Lighthouse 8.0

Новый релиз Google speed page insights дает еще больше возможностей веб мастерам, содержит новые инструменты анализа и обновленные методики, дающие еще более точный результат. Был обновлен алгоритм математической калькуляции, стали более точными показатели FCP (первая отрисовка) и TBT (полная блокировка). Также был применен новый подход к расчету CLS и его общее влияние на итоговую оценку. Показатели CLS и TBT получили больший вес, в то время как влияние TTI, FCP SI снижено.

После произведенных тестовых замеров большого пула сайтов, специалисты Гугл прогнозируют, что следствием апдейта станут:

• падение итоговой оценки на 5 баллов и менее для 20% ресурсов;

• около 20% проектов вообще не заметят изменений;

• 30% сайтов получат заметное улучшение;

• для оставшихся 30% сайтов значение оценки вырастет существенно, на 5 и более баллов.

Наиболее значительное понижение баллов вызвано пересчетом TBT, и относительно небольшим увеличение веса.

Зачем был увеличен вес CLS

Метрика CLS Google Pagespeed впервые появилась в Lighthouse v6, вышедшей в 2018 году. Практически при каждом обновлении математическая модель, применяемая для расчета показателя, претерпевала исправления и улучшения. Сейчас данный показатель занимает важнейшую позицию в Core Web Vitals, а его вес увеличился с первоначальных 5% до текущих 15%.

Кроме CLS еще две метрики имеют наибольшее влияние при расчете рейтинга эффективности — это LCP и TBT.

Самое важное из обновлений Lighthouse 8.0

По мнению экспертов, наиболее значимым в новом релизе, стала обновленная интерактивная карта, возможность фильтрации по разным видам проверок, появление аудита безопасности, который был реализован совместно с Google Web Security.

Проверка CMS SoloMono с помощью инструмента PageSpeed

CMS для интернет-магазина в Украине SoloMono, имеет максимально высокие показатели PageSpeed. На сегодняшний день оценка составляет 98 из 100 баллов, что является самым высоким показателем среди конкурентов. Это значит, что интернет-магазины на платформе СолоМоно с любым объемом контента загружаются максимально быстро как с десктопа, так и с мобильных устройств. 

Наши специалисты дорабатывают стильный и одновременно простой и интуитивно понятный интерфейс. Абсолютное большинство аудитории, пришедшей на сайт по запросам из поиска или с контекстной рекламы, станет реальными покупателями. Все еще медлите с созданием интернет-магазина для своего бизнеса? Сделайте заказ в нашей компании, по самым приятным ценам в Украине и убедитесь, что управлять интернет-магазином просто, весело, а главное прибыльно.

Влияет ли скорость загрузки страницы на позиционирование? 

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

• Плагин AMP;
• Progressive Web Apps;
• Модуль PageSpeed Google; 
• Расширение WebVitals;
• CRUX и Lighthouse;
• GTmetrix
• Chrome DevTools (с исследованием охвата).

Распространенным мифом является то, что эффективный инструмент ​​проверяет исключительно скорость загрузки. Это только 1/4 работы. Последняя версия PageSpeed ​​Insights в гораздо большей степени исследует производительность сайта. Плагин определяет параметры, влияющие на эффективность интерфейса и все больше учитывает пользовательский опыт (User eXperience, UX).

Pagespeed Insights Api — основные показатели 

Страница, которая загружается более 2 секунд, не только неохотно посещается пользователями, но и не нравится роботу Google. Алгоритмы поисковиков постоянно «‎наказывают»‎ разработчиков за медленные интерфейсы. Именно для улучшения работы вебмастера команда Google создала инструмент PageSpeed ​​Insights. Алгоритм определяет привлекательность ресурса комплексно. Результат анализа Google Page Speed ​​состоит из 6 базовых значений:

1. FCP. Решающий фактор — скорость взаимодействия пользователя с сайтом. По данной характеристике система определяет момент первой видимости контента (текст или изображения). Время загрузки менее 1,8 секунды считается оптимальным. 
2. FID. Параметр показывает время от первого взаимодействия пользователя с сайтом до момента, когда браузер отреагирует на это взаимодействие. Система реагирует когда посетитель сайта кликнет на ссылку или кнопку. Это важно для всех интерактивных платформ. Значение «‎считывают»‎ с элемента, по котором юзер щелкает сразу после запуска страницы. 
   FID исследует задержку между появлением интерфейса и возможностью использования его функциональности. Чем ниже FID, тем более отзывчивой выглядит страница, т.е. сайт быстрее реагирует на прокрутку и клики. Параметр сильно влияет на комфорт юзера и пользовательский опыт.

3. DOMContentLoaded. Параметр показывает время, необходимое для полной загрузки и анализа HTML-кода. Не включает в себя использование стилей CSS или графических файлов. Параметр зависит от сложности структуры DOM (количества элементов и степени вложенности).

4. LCP. Это время от вызова пользователем URL-адреса до полного рендеринга. Вычисляется на основе данных самого большого видимого элемента контента. Обычно таковым является изображение, видео или большой текстовый элемент блочного уровня. Для хороших сайтов LCP не должно превышать 2,5 секунды.

5. CLS. Параметр показывает сумму значений для всех смещений макета, происходящих во время загрузки страницы. Значение варьируется от 0 до любого положительного числа. CLS измеряет визуальную стабильность веб-сайта. Для удобной работы пользователя нужно стремиться, чтобы CLS не превышал 0,1. Пороговое значение — 0,2 (макет смещается на 20%). 

6. TTFB. Он измеряет время ответа сервера, которое учитывает момент отправки запроса до получения первого байта ответа.

Скорость загрузки сайта — один из факторов, влияющих на ранжирование. Около 32% пользователей покидают веб ресурсы из-за медленного интерфейса. Новичкам придется проработать все вышеупомянутые параметры до получения оптимального результата. Только так удастся повлиять на конверсию улучшить показатели сайта в поисковой выдаче. 

Установка и настройка

Запустить модуль PageSpeed ​​на собственных серверах в операционных системах Debian и Ubuntu несложно. Разработчики Google предоставляют загружаемый двоичный пакет, содержащий модуль, а также официальный репозиторий программного обеспечения. В случае ручной установки алгоритм следующий: 

Шаг 1. Загрузите последнюю версию Nginx в Ubuntu

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

Двоичный файл Nginx должен быть создан с аргументом --with-compat, который сделает двоичные файлы динамических модулей совместимыми. 

Шаг 2. Загрузите исходные пакеты Nginx и Ngx_PageSpeed

Чтобы скомпилировать Nginx с модулем Ngx_Pagespeed понадобится исходный пакет Ngx_Pagespeed. Клонируйте Git-репозиторий ngx_pagespeed.

Шаг 3: Скомпилируйте модуль ngx_pagespeed

Настроить среду можно с помощью специальной команды. Сам Nginx компилировать не нужно, а только модуль PageSpeed. Команда --with-compat сделает двоичный файл модуля совместимым с существующим двоичным файлом Nginx.

Шаг 4: Загрузите модуль ngx_pagespeed и отредактируйте основной файл конфигурации Nginx. 

Настройте фильтры PageSpeed. Создайте папку для кэшей Pagespeed и измените ее владельца на пользователя Nginx (данные www).

Шаг 5: Убедитесь, что ngx_pagespeed работает 

Перейдите на свой веб-сайт. Обновите страницу несколько раз, а затем проверьте источник. Нажмите Ctrl + F и найдите Pagespeed. Вы увидите, что многие ресурсы сайта были обработаны Pagespeed. Некоторые файлы Css и файлы Javascript объединены в один файл. 

Если вы начинающий разработчик или сомневаетесь в том, что корректно все настроить, лучше использовать официальную веб версию.

Работа Pagespeed

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

Состояние	Индикатор
Хорошо	зеленый
Нужно исправить	желтый
Плохое качество	красный

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

Самым важными параметрами Pagespeed являются LCP и TBT (Total Blocking Time, время между FCP и TTI). Каждый из них влияет на выданный результат с весом 25%. Это значит, что данные два показателя отвечают за половину всего пула баллов. 

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

Инструмент показывает предложения по технически важным улучшениям. Следует хорошо их прочитать, не нужно выполнять рекомендации вслепую. Некоторые модификации положительно повлияют на время загрузки, но могут ухудшить пользовательский интерфейс. Более того, Google Page Speed ​​Insights предлагает оптимизацию даже если общая производительность уже очень хорошая. В этом случае лучше воздержаться от дальнейших улучшений. Если страница загружается слишком долго, причины могут быть в следующем: 

 

Ожидание ответа сервера	Основное условие быстрой загрузки страницы — мгновенный ответ сервера. Google рекомендует около 0,2 секунды для такого действия. Ускорить данный параметр можно купив более мощное железо. Но это затратно даже для крупной компании. Как альтернатива — снизить количество редиректов, неработающих внутренних ссылок и других ошибок в коде страницы. Это выполнимая задача для опытного разработчика но часто — очень длительная и болезненная.    Для ускорения процессов владельцам бизнеса стоит изначально выбирать правильную платформу. В Solomono оптимизирован программный код и запросы к БД, что позволило корректировать загрузку в режиме реального времени. Даже на самых минимальных хостинг-пакетах или при большом количестве товаров и категорий в магазине показатели будут оптимальными.   Если дополнительный функционал создан для интернет-магазина или площадки электронной коммерции, в приоритете не поиск идеальной скорости страницы, а конверсия. После каждой оптимизации стоит убедиться, что в результате изменений не появилось худших результатов для инструментов gtmetrix или pingdom.
Проблемы с кэшированием в браузере	Если кэширование включено, контент сохраняется локально при каждом вызове страницы. Это значительно замедляет работу с сайтом. Особенно, при использовании HDD.  В платформе Solomono кэширование браузера настроено по умолчанию, независимо от версии.
Файлы изображений перегружают контент	Изображения составляют большую часть размера файла HTML-страницы. Если рисунки не сжаты, это излишне увеличивает время загрузки.    Проблему можно устранить вручную с помощью соответствующего программного обеспечения (редактор графики). В качестве альтернативы — установка специальных дополнений.    Утилита, которая автоматически сжимает все файлы изображений во время загрузки, подбирается в зависимости от вашей CMS. Для нашей CMS Solomono мы разработали модуль, делающий это «на лету».    Все картинки на сайте отображаются по принципу Lazy load. Графические элементы начинают загружаться только тогда, когда они в области видимости. Таким образом ошибка Page Speed по изображениям практически не высвечивается.    Eсли вы оптимизируете Javascript и CSS, каждый раз проверяйте функциональность конечного шаблона. Часто после автоматических изменений перестает работать меню и другие блоки страницы. Стоит также избегать пикселизации картинки.
Неиспользуемые строки кода в исходном коде	Скрипты, которые больше не используются, но регулярно загружаются при просмотре страницы, следует удалить. Это позволит оптимизировать загрузку.   Используйте встроенные инструменты браузера для того, чтобы увидеть, какие строки кода являются избыточными. В основном ошибки касаются CSS и JavaScript. Браузер посетителя сначала загружает сценарии, а затем — обрабатывает ненужный код перед отображением полной страницы. Отсюда и замедление.   Мы стараемся писать чистый код, постоянно удаляем лишний и уже не актуальный Javascript. Наша платформа использует комплекс из нескольких модулей по оптимизации: автоматическая минификация, генерация критических стилей (позволяет подгружать только необходимые компоненты для каждой страницы).   Откладывание обработки кода JavaScript позволяет загружать файл во время процесса синтаксического анализа HTML и выполнять его в конце процедуры. Функция настраивает сценарии в том порядке, в котором они должны появляться на конкретной странице.

 

Частые ошибки разработчика

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

По данным Infront, более 77% взрослого населения пользуются смартфонами, а 60% юзеров посещают веб-сайты через мобильное устройство. Адаптивный дизайн позволяет веб-сайту оставаться доступным независимо от девайса, на котором его просматривает пользователь.