Скорость сайта: что нового в google pagespeed insights в 2021 (январь)

Содержание

Google PageSpeed Insights — проверка скорости загрузки страницы сайта

Google PageSpeed Insights — это сервис для анализа скорости загрузки страницы посредство внутренних инструментов Google. Показатель анализа довольно точный и многие оптимизаторы обращаются именно к этому сервису в первую очередь.

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

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

Рекомендации обычно у всех стандартные:

  • Сократите время ответа сервера — если хостинг у вас слабоват, стоит задуматься о переезде на более мощный.

  • Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы

  • Используйте кеш браузера

  • Сократите CSS

  • Оптимизируйте изображения — это обычно сильно повышает показатель по PageSpeed Insights

  • Сократите JavaScript

  • Включите сжатие

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

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

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

Is Google PageSpeed Insights Reliable & Accurate?

Yes, Google PageSpeed Insights is now pretty reliable and accurate when measuring the full user experience on your site. Thanks to the different metrics included, it gives you an accurate overview of how users interact with your site.

The tool became more and more reliable thanks to the latest changes.

In November 2018, Google released PageSpeed 5.0. The new version started to use the Chrome User Experience Report dataset (CrUX) mentioned above. It also started to use Lighthouse audits.

Then, in May 2020, Lighthouse 6.0 arrived. New metrics have been added — the same ones that you now see in the PageSpeed Insights tool and capture the overall performance and user experience.

That’s why you can rely on the PageSpeed score and its metrics to understand how your site performs. And, of course, you should follow the PageSpeed Insights recommendations to improve your score.

Since the Google PageSpeed score is now more accurate, an improvement in the grade would usually reflect an improvement in the loading time.

Wait… does it mean that the PageSpeed score doesn’t reflect how fast a website is? The honest answer is: it depends.

Проверка скорости загрузки сайта в PageSpeed Insights

Сайт Apple был взят по трем причинам: 

  1. Известный бренд. 
  2. Достаточно плохая оптимизация страницы по версии Google. 
  3. На днях презентовал iPhone 11. 

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

Анализ выполняется следующим образом: 

Оценка скорости загрузки сайта в Google Page Speed

Выделяют две версии анализа – для мобильных устройств и компьютеров. Показатели и рекомендации отличаются. В мобильной версии веб-сайт компании Apple набирает 64 балла, чего для обычного проекта окажется мало. Так, с информационных и корпоративных ресурсов уходят значительно быстрее – клиенты не готовы долго ждать. В полной версии – 91 балл. 

Версия для мобильных:

Версия для компьютеров:

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

  • от 0 до 59 – низкая скорость загрузки;
  • от 60 до 79 – средняя;
  • от 80 до 100 – высокая.

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

Статья в тему: 10 сервисов для проверки скорости сайта

Далее идут подразделы с рекомендациями по устранению проблем при их наличии. 

Имитация загрузки страницы

В разделе представлены 6 метрик. Их совокупность позволяет определить итоговое количество баллов, назначаемых за удовлетворение требований системы. Разберем каждую подробнее: 

  1. Первый пункт является временным интервалом с момента старта загрузки веб-сайта до появления контента (текстового или мультимедийного). 
  2. Оценивается доступность контента (прекращение визуальных изменений и возможность корректного просмотра последнего). 
  3. Параметр, оценивающий готовность страницы к взаимодействию с посетителем (т.е. работают все видимые элементы с минимальным откликом). 
  4. Оценка подгрузки основных элементов страницы, шрифтов. 
  5. Означает скорость перехода элементов в интерактивное состояние (готовность отдачи ответа на пользовательские действия). 
  6. Реакция загруженной страницы на пользовательские действия в течение первых пяти секунд с момента начала ее загрузки. 

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

Как снизить влияние Яндекс.Метрики на скорость загрузки сайта

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

Например, можно использовать следующий код:

setTimeout(() => {
// Сюда вставляете метрики без тегов <script>           
}, 3000)

Опытным путем я подобрал значение задержки загрузки кода Метрики равное 3 секундам. После этого Google PageSpeed уже не замечает счетчик и показатели скорости загрузки возвращаются к норме, то есть к состоянию до установки счетчика.

Но у такого решения есть недостаток, не смотря на то, что счетчик работает, индикатор состояний счетчика в панели управления Яндекс.Метрики становится «красным»:

Так же могут вырасти показатели отказов. В прочем, зачем нам посетители которые провели на сайте меньше 3-х секунд ?

Очевидно, что отложенное выполнение JavaScript на странице (а именно так устанавливаются все счетчики и скрипты аналитики) нужно настраивать в зависимости от источника перехода и действий пользователя.

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

Подробно о таком способе загрузке счетчика написано на сайте https://www.kobzarev.com/technical-seo/yandex-metrika-lazy-load/.

Предложенное авторами решение подойдет для всех сайтов. Но если вы используете WordPress, то проще всего воспользоваться бесплатным плагином True Lazy Analytics. Который кроме упомянутой мной Яндекс.Метрики умеет добавлять на WordPress сайт счетчики LiveInternet и Google Analytics.

Основная цель плагина — подключить системы аналитики без снижения баллов в тесте Google PageSpeed Insight.

Внешний вид плагина True Lazy Analytics

Вам достаточно указать только номер вашего счетчика Яндекс.Метрики и перед закрывающим тегом на страницах вашего сайта появится примерно следующий код:

После установки счетчика Яндекс.Метрики с помощью плагина True Lazy Analytics показатели Google PageSpeed Insights вернулись к своим первоначальным значениям и в моем случае на тестовом сайте имеют следующий вид:

Индикатор в панели управления Яндекс.Метрики стал «зеленым», что говорит о том, что счетчик работает:

Показатели отказов остались на прежнем уровне, у меня это около 10%:

Оптимизация сайта по рекомендациям PageSpeed Insights

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

Так, кликнув по элементу из списка с рекомендацией к использованию современных форматов изображений, можно обнаружить предложение о переходе на форматы изображений JPEG 2000, WebP вместо привычных и неэффективных PNG и JPEG.

В случае с главной русскоязычной страницей сайта компании Apple можно увеличить скорость загрузки на 0,56 секунды. Также на скриншоте отмечена предполагаемая экономия на сжатии изображений (2 пункт).

Это интересно: Оптимизация изображений на сайте

Диагностика

В этом блоке представлена информация по производительности веб-ресурса и ряд рекомендаций. Элементы списка раскрываются. 

При нажатии на первый можно увидеть рекомендацию по настройке показа всего текста при загрузке шрифтов. Данная функция реализуется на основе CSS.

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

Удалите код JavaScript и CSS

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

Сложный пункт, который требует знаний и практики.

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

А так как в том же WordPress обычно 9 из 10 скриптов — это внешние плагины, то там вы вряд ли что-то сделаете, так как они грузятся из своих папок и обновляются по 3 раза на неделю.

И ваши сделанные изменения банально затрутся.

Так что тут я могу рекомендовать:

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

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

Что нужно сделать

В  решении начиная с версии 4.8.0. мы очень сильно поработали над гугл пейдж спид, используя более ранние версии решения показателей в зеленой зоне будет не добиться, т.к. старые версии решения были оптимизированы под старый алгоритм гугл пейдж спид. Сейчас само решение позволяет добиться отличных показателей, но невероятно много зависит от качества и настроек Вашего сервера и наличия дополнительных «утяжелителей» сайта.

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

Изменения в Google PageSpeed

В конце 2018 старый механизм PageSpeed заменили оценками и аналитикой Lighthouse. И этот новый инструмент также встроен в Google Chrome. Основное отличие от предыдущих версий — баллы, которые теперь присуждаются не только за выполнение рекомендаций, но и непосредственно за скорость. Загрузка страницы начала оцениваться по нескольким временным параметрам:

  • в какой момент времени после начала загрузки становится виден контент;

  • когда можно взаимодействовать со страницей —  кликать или вводить данные;

  • насколько медленно это все грузится, и когда все операции будут завершены.

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

Вот как написано на официальном сайте:

На результат измерения скорости загрузки в разной степени влияет множество факторов. Основные из них — это доступность локальной сети, доступность аппаратных средств клиента и наличие конфликтов при доступе к ресурсам клиента.

На самом деле, повлиять может все что угодно, поэтому для более релевантной оценки, рекомендуется сделать не 1 замер, а 3-5 в течение дня в разное время суток.

В 2020-ом произошло обновление движка Lighthouse 6, на базе которого работает PageSpeed Insights. В Lighthouse 6 разработчиками было добавлено несколько значительных изменений. Появились новые метрики, которые ощутимо влияют на общую оценку быстродействия страницы. Обновились аудиты для доступности и Javascript. 

Ключевые метрики:

  • Largest ContentFul Paint (LCP) — отрисовка крупного контента. Время, за которое большая часть контента отрисовывается на экране. Желательное время до 2,5 секунд, приемлемое — до 4 секунд. 

  • First Input Delay (FID) — задержка между первым действием пользователя и реакцией браузера. Желательное время до 100 мс, приемлемое — до 300 мс. 

  • Cumulative Layout Shift (CLS) — совокупный сдвиг макета. Показывает оценку визуальной стабильности страницы. Нацелено на борьбу с всплывающей рекламой и блоками, которые появляются и пропадают без действий со стороны пользователя. Если изображение скачет», то показатели падают. Нормальное значение до 0,1, допустимое — до 0,25.

И вот эти показатели из отчета входят в Core Web Vitals. А значит, метрики будут существенно влиять на ранжирование поисковой выдачи

Важное условие — как минимум 75% страниц сайта должны соответствовать нижним границам этих трёх показателей. Иначе сайт будет признан Google плохо оптимизированным

Но при этом сами показатели имеют разные веса в учете суммарной оценки, например,  LCP или FID влияют на итоговую сильнее, чем CLS.

В ноябре 2020 года Google подтвердил, что Core Web Vitals станет фактором ранжирования с мая 2021 года. Рекомендации как и раньше есть, но теперь они напрямую не связаны с баллами. Совершенно не факт, что следование рекомендациям улучшит ситуацию, так как выполнение некоторых из них может ухудшить ситуацию или быть неприемлемым с точки зрения поддержки различными браузерами. Ранее частенько встречалась ситуация, когда очевидно тормозящие сайты выдавали отличные оценки, а быстрые сайты оценивались плохо. Теперь с изменением алгоритмов становятся важными именно скорость и восприятие пользователем. Все маркетинговые погремушки, которые так любят запихнуть на первый экран, теперь неизбежно будут ухудшать оценку, как ты их не отлаживай. Поэтому рекомендация на будущее: на странице, особенно на первом экране, должен быть только максимально необходимый контент, желательно с минимумом анимаций и сторонних включений. 

Wrapping Up

Google PageSpeed Insights has evolved quickly. It gained undeniable importance thanks to the Core Web Vitals, which will make a difference in your organic performance very soon.

Google’s tool is reliable, and now you know how to look critically at the performance score and each metric — without forgetting the loading time!

Learning something more about testing web performance helps you understand what the priorities are and what your approach should be. Good luck with the new ranking factor rolling out!

Remember that you can save yourself time and let WP Rocket do the job for you. WP Rocket will automatically apply 80% of web performance best practices. You don’t even have to touch any settings. You’ll see an improvement in speed and your PageSpeed Insights score right away — no technical knowledge required, we promise!

Как получить 100/100 в Google PageSpeed Insights

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

Для того, чтобы скорость загрузки была максимальная, нужно отлично знать CSS, JS и серверную часть. Такие специалисты всегда стоят от 1500 до 5000 рублей за час работы. На средний сайт нужно потратить 10 часов. То есть 20.000 рублей это та цена, от которой начинаются настоящие специалисты.

Если вам предлагают сделать 100/100 за 3000 рублей, то возможно вам сделают костыль, который и правда покажет 100 из 100, потому что Гуглу можно отдать другую версию сайта или просто оптимизированную картинку. Вы ничего и не заметите. Но Гугл видит всё.

Краткая информация

  • Полное имя: Lawrence Edward Larry Page.
  • Родился: 26 марта 1973 года в городе Лансинг, штат Мичиган.
  • Вид деятельности: СЕО Google, развитие интернет-технологий, IT, венчурный инвестор, меценат.
  • Образование: степень бакалавра получил в Университете Мичиган, а магистерскую по информатике защитил в Стэнфорде.
  • В каком возрасте основал свой бизнес: Пейдж начал заниматься предпринимательской деятельностью в возрасте 25 лет.
  • Состояние Ларри Пейджа: авторитетное издание Forbes оценило активы бизнесмена в 2020 году в $73,4 млрд, что позволило ему занять 13 строчку в рейтинге самых богатых людей.

Мотивация

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

Однажды, при работе с PageSpeed Tool, было замечено, что сайт компании Google имеет удивительно низкие показатели для мобильных устройств — 59/100. Ситуация с версией для стационарных устройств была лучше — 92/100.

Казалось бы, что они должны были использовать свой же инструмент для оптимизации своего веб-сайта, не так ли? Так неужели результат 100/100 недостижим?

Именно это послужило стимулом для достижения максимально быстрой загрузки сайта, чтобы доказать, что достичь результатов 100/100 реально, и при желании вы также сможете это сделать. Это не одержимость, это просто стремление достичь совершенства.

Стартовые показатели подопытного сайта — 87/100.

В итоге, после применения определенных манипуляций, было получено следующие результаты:

О том, как удалось достичь таких показателей, читайте далее.

Шаг № 6: Оптимизация мобильного формата

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

С помощью Google Chrome вы можете посмотреть, как ваш сайт выглядит в различных мобильных версиях. Для этого нажмите на иконку меню (гамбургер) настроек и управления браузером в верхнем правом углу, а затем выберите «Дополнительные инструменты → Инструменты разработчика». На панели инструментов выберите иконку с изображением мобильных устройств. Вот и все, смотрите: 

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

Преимущества и недостатки Гугл Пейдж Спид

У сервиса благая цель — сделать сайты в интернете максимально быстрыми и удобными как на десктопе, так и на пк

Невзирая на это, есть ряд моментов, на которые хочется обратить внимание:

  • Не всегда удается найти баланс между скоростью загрузки сайта и красивым внешним видом. Нужно определиться, что мы хотим: быстрый или красивый сайт? И то и другое получить практически невозможно.
  • Оценка для мобильных сайтов повторяет ошибки для ПК, добавляя лишь фрагмент о компоновке элементов страницы на маленьких экранах. Это не совсем адекватный показатель, ведь Mobile-friendly является фактором ранжирования. Потому, если хотите подтянуть мобильную версию сайта, нужно использовать отдельный отчёт Google.
  • Сервис не показывает ускорение загрузки страниц сайта в абсолютном выражении — секундах или минутах (если все настолько плохо). Он лишь учитывает балы (от 0 до 100), которые не всегда характеризуют реальную скорость загрузки сайта.
  • Сервис выдает обширные рекомендации по исправлению и указывает конкретные файлы, которые нуждаются в оптимизации. Кроме того, уже оптимизированные скрипты, стили и картинки можно скачать прям со страницы с результатами для компьютеров.

Имитация загрузки страницы

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

5 (самый важный) — время загрузки для взаимодействия (TTI);

4 — индекс скорости загрузки (Speed Index);

3 — время загрузки первого контента (FCP);

2 — время окончания работы ЦП (First CPU Idle);

1 — время загрузки достаточной части контента (FMP);

0 (не учитывается) — максимальная потенциальная задержка (FID).

Пройдемся по каждому показателю.

Время загрузки первого контента (FCP)

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

Время загрузки первого контента значительно выше в мобайле. На 9 сайтах из 48 (19%) оно превосходит 6 секунд. При просмотре с десктопов скорость FCP значительно выше — здесь только у 5 площадок (10%) первая отрисовка длится более 2 секунд.

По отраслям:

Время загрузки достаточной части контента (FMP)

Первая значимая отрисовка (First Meaningful Paint, FMP) — это время от начала загрузки страницы до момента, когда пользователь видит достаточно контента для начала работы со страницей.

Значения FMP интересно сравнить с FCP. В 40% случаев при просмотре с десктопов FMP совпадает с FCP — пользователи при первой отрисовке сразу видят значимую часть контента. В остальных случаях пользователям приходится дополнительно ждать загрузки контента (в среднем — 0,3 секунды).

При просмотре с мобильных у 46% сайтов FCP совпадает с FMP, но разрыв между этими показателями выше — в среднем 1,4 секунды (что в 4,7 раз выше, чем при просмотре с десктопов).

По отраслям (мобайл):

По отраслям (десктопы):

При просмотре с десктопов ситуация похожа — но разрывы между FCP и FMP меньше. Кроме того, наименьшее значение FMP наблюдается в сфере автотоваров, а не одежды, обуви и аксессуаров.

Индекс скорости загрузки

Индекс скорости загрузки (Speed Index) — это время, за которое отображаются видимые части страницы. Эта метрика разработана и используется сервисом webpagetest.org. Сервис делает последовательные скриншоты загрузки страницы, анализирует динамику загрузки контента и выводит Speed Index.

Посмотрим на значения Speed Index по анализируемым сайтам.

В мобайле 54% сайтов имеют индекс скорости загрузки выше 10 секунд и 85% — выше 5 секунд (помним о том, что Speed Index — это второй по значимости фактор при формировании балльной оценки скорости загрузки сайта в PSI).

На десктопах ситуация значительно лучше — здесь только 23% сайтов имеют Speed Index выше 5 секунд.

По отраслям:

Лучшие значения Speed Index наблюдаются в сфере продажи автотоваров, а также одежды, обуви и аксессуаров. Сайты магазинов электроники в мобайле имеют демонстрируют самую длительную загрузку — в среднем более 14 секунд.

Время окончания работы ЦП

Раньше этот показатель назывался временем первого взаимодействия (First Interactive). Но в версии Lighthouse 3.0 его название изменили на First CPU Idle.

First CPU Idle показывает период времени от начала загрузки страницы до момента, когда она становится минимально интерактивной:

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

Сравним значения First CPU Idle со временем загрузки достаточной части контента (FMP). Суть в том, чтобы посмотреть, сколько пользователям после получения доступа к контенту приходится ждать возможности взаимодействовать с элементами страницы.

В мобайле только у 8% сайтов совпадают значения First CPU Idle и FMP. В остальных случаях разрыв есть (в среднем — 8,7 секунды). То есть если пользователь захочет что-то нажать на странице, элемент будет доступен далеко не сразу.

В десктопе у 6% сайтов совпадают значения First CPU Idle и FMP. В среднем разрыв между этими показателями составляет 2,7 секунды (в 3,2 раза меньше, чем в мобайле).

По отраслям (мобайл):

По отраслям (десктопы):

Время загрузки для взаимодействия (TTI)

Это самая значимая метрика при оценке скорости загрузки сайта в PSI.

Время загрузки для взаимодействия (Time to Interaction, TTI) — это время от перехода пользователя на страницу до ее полной готовности к взаимодействию.

Результаты анализа:

У 46% сайтов при просмотре с мобильных полное время загрузки составляет более 20 секунд, у 94% — более 10 секунд. При просмотре с ПК всего 7% сайтов загружаются дольше 10 секунд.

По отраслям:

Что делать с самим сайтом

  • Решение должно быть в последней версии
  • Включить LAZY LOAD
  • Не должно быть не найденных битых изображений, файлов и т.д.
  • Изображения нужно сохранять максимально оптимизированными и желательно в прогрессивном jpg (если конечно не требуется прозрачный фон)
  • Различные скрипты, счетчики, аналитики и консультанты очень сильно ухудшают показатели пейдж спид, поэтому отнеситесь с умом к этому вопросу и оставьте то, что Вам действительно нужно.
  • Если не очень важен, то отключите блок персональных рекомендаций, он достаточно тяжелый и нагружает систему
  • Ни в коем случае не отключайте кеширование компонентов.
  • Если у Вас редакция битрикс бизнес, то отключите аналитику.
  • Не добавляйте слишком много товаров в концентратор на главной (по 10-15 в каждой вкладке, не больше)

Данные наблюдений: FCP и FID

Первая отрисовка контента (FCP)

Первая отрисовка контента (First Contentful Paint, FCP) — это время от момента перехода на сайт до момента, когда браузер отображает первый бит контента из DOM. С точки зрения пользователей первая отрисовка сигнализирует о том, что сайт действительно загружается.

Значения FCP сервис PageSpeed Insights берет из отчета об удобстве пользования браузером Chrome. Отображается 90-й процентиль по FCP.

Градация значений FCP:

  • 0-1 секунда — высокая скорость первой отрисовки контента;
  • 1-2,5 секунды — средняя скорость;
  • более 2,5 секунд — низкая скорость.

Фактические значения FCP:

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

Усредненные значения FCP в разрезе отраслей:

Помимо усредненного значения FCP за последние 30 дней PSI отображает процент распределения загрузок страницы в зависимости от значения FCP («высокая», «средняя» и «низкая» скорость загрузки).

Пример:

В этом примере у 18% загрузок страницы первая отрисовка контента длилась не более 1 секунды, у 62% — от 1 до 2,5 секунды, у 20% — более 2,5 секунды. Среднее же значение — 3,3 секунды.

Мы усреднили проценты распределения загрузок по каждому из 48 анализируемых сайтов и получили такие цифры:

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

Первая задержка ввода (FID)

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

В PSI указывается 95-й процентиль по FID — усредненное значение за последние 30 дней.

Градация значений FID:

  • 0-50 мс — высокая скорость;
  • 50-250 мс — средняя скорость;
  • более 250 мс — низкая скорость.

В отличие от FCP, значения показателя FID различаются в зависимости от устройства, с которого заходили на сайт. При просмотре с мобильных первая задержка ввода значительно выше, чем при просмотре с ПК. На 8 сайтах пользователям приходится ждать более 1,5 секунды обратной реакции, а на трех площадках — более 3 секунд (что в 60 раз выше нормы).

По отраслям:

В сфере продажи одежды, обуви и аксессуаров сайты реагируют быстрее всего на действия пользователей — как в мобайле, так и на десктопах. Дольше реагируют сайты в сферах красоты и здоровья, электроники и техники, универсальные магазины.

Как и в случае с FCP, сервис PSI выводит процентное распределение задержки ввода FID. Пример:

Процент загрузок со средней и низкой скоростью в мобайле более чем в 2 раза превосходит аналогичный показатель при просмотре с десктопов. Доля загрузок с высокой скоростью — 55% против 83% соответственно.

Как пользоваться шаблоном

Для начала создайте копию шаблона Automated PageSpeed Insights API Tool.

В файле три вкладки (названия вкладок не меняйте!):

  • Settings — здесь указывается API ключ и расписание сбора данных.
  • Results — это лист, на котором собираются данные по заданным URL (данные листа обновляются после каждого запуска скрипта).
  • Log — на этот лист переносятся собранные данные (в том числе за прошлые периоды).

Предварительная подготовка шаблона

Для корректной работы нужно:

  • получить API ключ,
  • включить PageSpeed API.

Для получения API ключа перейдите в раздел «Учетные данные» сервиса Google APIs и нажмите кнопку «Создать учетные данные».

В выпадающем списке выберите «Ключ API».

Скопируйте созданный ключ.

Вставьте его в шаблон на листе «Settings».

Но для работы шаблона ключа недостаточно — нужно еще включить PageSpeed API. Для этого перейдите на страницу PageSpeed API и нажмите кнопку «Включить».

Важно! Если не включить PageSpeed API, скрипт в шаблоне работать не будет, и в таблице вы увидите ошибки

Как улучшить скорость загрузки страниц сайта

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

Оптимизация изображений

Проверьте, а не весят ли картинки сайта на слайдере главной страницы или в других блоках по несколько мегабайт — и такое бывает!

Я на практике сталкивался с таким — разработчики или владельцы сайта в последующем, загружали на сайт картинки прямо с фотоаппарата и представляете сколько они весят?!

Если Вам нужно пакетно сжать много изображений — для этого есть множество различных сервисов или утилит. Мне на практике чаще всего надо сжать несколько фото и я это делаю просто в фотошопе.

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

Также обратите внимание на разрешение изображения. Если фото напрямую с фотоаппарата, то этот показатель скорее всего 300 dpi и можно смело его уменьшать до 72 dpi — этого более чем достаточно для сайта

В фотошопе я сохраняю картинку в режиме «Сохранить для Web» — это также плюс оптимизации изображения.

Сокращение время ответа сервера

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

Даже если Вы смотрите в сторону смены хостинга, выбирайте тот, что хотя бы работает на SSD дисках — это уже большой плюс к скорости будет. Я сначала для клиента, а затем и сам перебрался на fornex.com

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

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

Настройка расписания получения данных из PageSpeed Insights

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

После установки дня недели и времени в шаблоне дополнительно назначается время сбора данных в 9, 10 и 11 утра. Это нужно для обхода ограничений, установленных PageSpeed ​​API.

Ограничения при сборе данных через API

Шаблон Google Sheets использует скрипт Google Apps для сбора данных из PageSpeed Insights. Каждый раз, когда запускается отчет, Google Apps Scripts устанавливает (для обычных пользователей).

Этого времени будет достаточно, чтобы проанализировать не менее 30 URL. По истечении этого времени (если вы задали больше URL), вы получите сообщение:

Для продолжения сбора данных достаточно просто заново запустить скрипт. Вот почему в расписании указаны часы, в которые отчет запускается повторно. Таким образом, вы соберете данные не менее чем по 120 URL.

Но тут мы сталкиваемся с еще одним препятствием — теперь уже со стороны Google Sheets. Скрипт в шаблоне срабатывает по заданному расписанию благодаря триггерам.

Проблема в том, что использование триггеров более четырех раз подряд вызывает ошибку — «Service using too much computer time for one day». Это означает, что скрипт Google Apps превысил общее допустимое время выполнения в течение одного дня.

Решение — запустить скрипт вручную.

Если у вас более 120 URL для проверки, просто запустите скрипт через «PageSpeed Menu» («Manual Push Report»). В этом случае ограничений на количество срабатывания триггеров не будет, и вы сможете проверить столько URL, сколько вам нужно.