Оценка PageSpeed ​​Insights от Google

Если вы владелец бизнеса, вы заинтересованы в повышении рейтинга вашего сайта в поиске. Если вы разработчик, вам нужно будет удовлетворить потребности клиента и создать сайт, способный хорошо ранжироваться. Google учитывает сотни характеристик, когда определяет порядок веб-сайтов на своей странице рейтинга в поисковых системах (SERP).

В середине 2018 года скорость страницы была официально названа важным атрибутом ранжирования. В этой статье мы расскажем о показателях производительности, на которые следует обратить внимание владельцам бизнеса: PageSpeed ​​Insights. Мы углубимся в некоторые технические детали, которые помогут разработчикам программного обеспечения вносить улучшения в сложных случаях, например, связанных с одностраничными приложениями.

Почему важно пройти тест Google PageSpeed ​​Insights

Когда Google представила PageSpeed ​​Tools в 2010 году, большинство владельцев веб-сайтов с ним познакомились. Те, у кого нет, должны открыть PageSpeed ​​Insights, чтобы проверить свои сайты.

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

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

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

Какая оценка достаточна для прохождения оценки PageSpeed?

PageSpeed ​​использует метрики из Core Web Vitals для оценки соответствия/несоответствия.

Этот инструмент имеет три оценки:

1. PageSpeed ​​наглядно отображает показатель производительности в цветном кружке в разделе «Диагностика проблем с производительностью». Он рассчитывается с использованием встроенных виртуальных машин PageSpeed ​​с характеристиками, соответствующими среднему мобильному или настольному устройству. Имейте в виду, что это значение предназначено для загрузки страницы и виртуальной машины PageSpeed ​​и не учитывается поисковой системой Google.

   Этот показатель полезен, когда разработчики вносят изменения в веб-сайт, поскольку он позволяет им проверить влияние изменений на производительность. Однако поисковая система Google учитывает только подробные оценки.

2. Подробные оценки для конкретной страницы — и для тех, которые PageSpeed ​​считает похожими на анализируемую страницу — рассчитываются на основе статистики, которую браузеры Chrome собирают на реальных компьютерах и отправляют в Google. Это означает, что производительность в Firefox, Safari и других браузерах, отличных от Chromium, не учитывается.

3. Сводка по всем страницам сайта получается так же, как и оценка по одной странице. Чтобы получить к нему доступ, выберите вкладку «Происхождение» вместо вкладки «Этот URL». URL-адрес, указанный под панелью вкладок, будет другим, так как Origin будет отображать главную страницу сайта (только домен).

Google постоянно обновляет список метрик, учитываемых PageSpeed, поэтому лучший источник того, что важно, — это раздел Experience / Core Web Vitals в Google Search Console, если вы уже добавили туда свой веб-сайт.

Чтобы пройти Core Web Vitals Assessment, все баллы должны быть зелеными:

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

Чтобы лучше понять значения, щелкните заголовок оценки:

Это ссылка на сообщение в блоге, в котором более подробно объясняются пороговые значения для данной категории.

Данные накапливаются в течение 28 дней, и есть еще два существенных отличия от того, с чем могут столкнуться реальные пользователи:

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

Если многие пользователи сайта живут в регионах с медленным доступом в Интернет и используют устаревшие или неэффективные устройства, разница может быть неожиданной. Это не одна из рекомендаций по улучшению PageSpeed ​​Insights. На первый взгляд не очевидно, как бороться с этим вопросом, но мы постараемся объяснить позже.

Улучшение результатов с помощью рекомендаций PageSpeed ​​Insights

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

Мы можем найти рекомендации в разделе «Возможности» под результатами оценки.

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

• Улучшить скорость ответа сервера. Например, если вы используете виртуальный хостинг, обновите свой план или перейдите на виртуальный частный сервер (VPS) или даже на выделенный сервер. Кроме того, не все хосты равны. Попробуйте выбрать надежный хостинг с хорошим оборудованием и гарантиями безотказной работы.
• Снизьте объем трафика, необходимый для открытия вашего сайта. Для этого можно заменить изображения на оптимизированные: изменить их формат, настроить разрешение и сжатие, при необходимости заменить анимированные изображения на статические и т. д. В популярных системах управления контентом есть плагины, упрощающие этот процесс.
• Кэшировать больше данных. Самый простой способ сделать это — использовать сеть доставки контента (CDN), например Cloudflare, для статического контента (изображения, стили, скрипты, страницы, которые не меняются). Вы можете настроить правила кэширования для оптимизации производительности.

Теперь давайте посмотрим на более сложные факторы, где может помочь опытный программист.

Как отлаживать оценки во время жизни страницы

Как уже упоминалось, Google Search Console учитывает средние баллы, полученные от браузеров на основе Chromium за последние 28 дней, а также включает значения за все время существования страницы.

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

Решение состоит в том, чтобы включить библиотеку Google Chrome Web Vitals в версию проекта сайта для разработчиков, чтобы увидеть, что происходит, пока пользователь взаимодействует со страницей.

Различные варианты включения этой библиотеки находятся в файле README.md на GitHub. Самый простой способ — добавить следующий скрипт. Он настроен для отображения значений за время жизни страницы в <head> основного шаблона:

 <script> (function() { var script = document.createElement('script'); script.src = 'https://unpkg.com/web-vitals/dist/web-vitals.iife.js'; script.onload = function() { // When loading `web-vitals` using a classic script, all the public // methods can be found on the `webVitals` global namespace. webVitals.getCLS(console.log, true); // CLS supported only in Chromium. webVitals.getLCP(console.log, true); // LCP supported only in Chromium. webVitals.getFID(console.log, true); webVitals.getFCP(console.log, true); webVitals.getTTFB(console.log, true); } document.head.appendChild(script); }()) </script>

Обратите внимание, что вычисление кумулятивного сдвига макета (CLS) и наибольшего отрисовки содержимого (LCP) доступно только для браузеров на основе Chromium, включая Chrome, Opera, Brave (отключите Brave Shields, чтобы библиотека работала), а также для большинства других современных браузеров, кроме Firefox. , который основан на движке Mozilla и браузере Apple Safari.

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

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

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

В большинстве случаев автоматических советов для других оценок достаточно, чтобы понять, как их улучшить. Однако CLS меняется после загрузки страницы при взаимодействии с пользователем, и рекомендаций может просто не быть, особенно для одностраничных приложений. Вы можете увидеть идеальные 100 баллов в разделе «Диагностика проблем с производительностью», даже если ваша страница не проходит оценку по факторам, учитываемым поисковой системой.

Для тех из нас, кто борется с CLS, это будет полезно. Разверните запись журнала, затем записи, конкретную запись, источники, конкретный источник и сравните currentRect с previousRect :

Теперь, когда мы видим, что изменилось, мы можем определить, как это исправить.

Уменьшение кумулятивного сдвига макета

Из всех оценок CLS труднее всего понять, но он имеет решающее значение для взаимодействия с пользователем. Сдвиг макета происходит, когда элемент добавляется в объектную модель документа (DOM) или изменяется размер или положение существующего элемента. Это заставляет элементы ниже этого элемента смещаться, и пользователь чувствует, что не может контролировать происходящее, заставляя его покинуть веб-сайт.

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

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

1. Настройте страницу так, чтобы содержимое отображалось через 500 миллисекунд после того, как пользователь нажмет кнопку или ссылку, не вызывая срабатывания CLS.
2. Измените параметры, которые не вызывают смещения других элементов DOM: фон, цвет и т. д.
3. Убедитесь, что другие элементы не сместятся при изменении размера или положения элемента.

Более подробные рекомендации доступны на странице Google Developers Optimize CLS.

Как 500 миллисекунд могут уменьшить CLS

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

Обычно, когда пользователь загружает файл, скрипт добавляет элемент <img> в DOM, а затем клиентский браузер загружает изображение с сервера. Получение изображения с сервера может занять более 500 миллисекунд и может привести к смещению макета.

Но есть способ получить изображение быстрее, поскольку оно уже находится на клиентском компьютере, и, таким образом, создать элемент <img> до истечения 500-миллисекундного крайнего срока.

Вот универсальный пример на чистом ECMAScript без библиотек, который будет работать в большинстве современных браузеров:

 <!DOCTYPE html> <html> <head></head> <body> <input type="file"> <img> <script> document.getElementById('input').addEventListener('change', function() { var imageInput = document.getElementById('input'); if (imageInput.files && imageInput.files[0]) { var fileReader = new FileReader(); fileReader.onload = function (event) { var imageElement = document.getElementById('image'); imageElement.setAttribute('src', event.target.result); } fileReader.readAsDataURL(imageInput.files[0]); } }); </script> </body> </html>

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

Обновите консоль поиска Google

После обнаружения и устранения проблем поисковой системе Google может потребоваться некоторое время, чтобы зарегистрировать изменения. Чтобы обновить результаты немного быстрее, сообщите Google Search Console, что вы устранили проблемы.

Выберите страницу, над которой вы работаете, с помощью поля свойства «Поиск» в верхнем левом углу. Затем перейдите к Core Web Vitals в левом гамбургер-меню:

Нажмите кнопку «Открыть отчет» в правом верхнем углу отчета для мобильного или настольного компьютера. (Если у вас возникли проблемы с обоими, не забудьте повторить те же действия для второго отчета позже.)

Затем перейдите в раздел «Подробности» под диаграммой и щелкните строку с предупреждением о неудачной проверке.

Затем нажмите кнопку «Подробнее» для этой проблемы.

И, наконец, нажмите «Начать новую проверку».

Не ждите немедленных результатов. Проверка может занять до 28 дней.

Оптимизация — это непрерывная борьба

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

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

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