Скорость загрузки сайта. Или что такое PageSpeed Insights
Если у вас есть собственный веб-сайт, вы, скорее всего, беспокоитесь о том, насколько он удобен для пользователей. И это правильно, ведь его удобство напрямую влияет на конверсию. Одним из ключевых аспектов удобства сайта является его скорость. Банальный поиск инструментов для определения скорости сайта в 99% случаев приведёт вас на сервис PageSpeed Insights от Google.
Что такое PageSpeed Insights?
Сервис PageSpeed Insights создан для анализа и диагностики веб-страниц. На основании произведённых проверок он определяет примерный индекс скорости сайта (от 0 до 100 баллов) и предлагает некоторые решения для его ускорения. Этот сервис пользуется большой популярностью у пользователей, т.к. является удобным и простым в использовании. Но будьте внимательны: сервис не рассчитывает саму скорость загрузки веб-страниц, а лишь производит оценку показателей, которые могут влиять на нее. Инструмент анализирует не работу сайта в целом, а лишь конкретную запрашиваемую страницу. Для проверки перейдите в PageSpeed Insights и введите в поле URL-адрес страницы, которую хотите проверить. Вы получите 2 результата анализа — для мобильных устройств и десктопов. Алгоритмы и инструменты расчётов PageSpeed Insights (далее PSI) постоянно меняются и совершенствуются. Баллы вашего сайта также постоянно будут меняться, в зависимости от текущих требований сервиса.
На момент написания статьи PSI использует 6 версию Lighthouse. Lighthouse — это инструмент, который анализирует время загрузки, доступность и поисковую оптимизацию веб-страниц.
Какие основные критерии оценивает PageSpeed Insights?
Среди всех производимых проверок PSI выделяет шесть основных показателей, на основании которых вычисляется итоговый балл:
- First Contentful Paint Первая отрисовка контента. Определяет интервал времени между началом загрузки страницы и появлением первого изображения или блока текста.
- Speed Index
Индекс скорости загрузки. Показывает, как быстро на странице появляется контент. время до того момента, когда страница перестанет визуально меняться и обретёт конечный вид. - Largest Contentful Paint
Отрисовка крупного контента. Определяет время, когда на экран выводится самый большой элемент содержимого в области просмотра (на первом экране). - Time to Interactive
Время загрузки для взаимодействия. Время, в течение которого страница становится полностью готова к взаимодействию с пользователем. время до момента, когда можно спокойно кликать и скроллить. - Total Blocking Time
Сумма всех периодов от первой отрисовки контента до загрузки для взаимодействия. Этот показатель означает, что процессор подгрузил сайт достаточно для того, чтобы давать отклик на действия пользователя за адекватное время (менее 50 мс). - Cumulative Layout Shift
Совокупное смещение макета. Процентная величина, на которую смещаются видимые элементы области просмотра при загрузке. Смещение макета происходит каждый раз, когда видимый элемент изменяет своё положение.
В целом основной упор оценки идёт на мобильные устройства, а точнее на скорость прорисовки первого экрана, контента, который появляется сразу при посещении страницы.
Ещё раз акцентируем внимание!
Сервис не определяет фактическую скорость загрузки страниц, а лишь имитирует их загрузку и замеряет показатели, которые лишь теоретически могут повлиять на скорость.
Влияние баллов PageSpeed Insights на работу сайта и на выдачу в поисковых системах?
Если коротко — минимально .
На фактическую работу сайта баллы в принципе не влияют. Может получиться так, что вы не будете испытывать неудобств в работе с сайтом, но баллы PSI всё равно будут низкими.
С точки зрения пользователя сайт будет загружаться быстро и не будет вызывать отторжения. Но с точки зрения PSI сайт будет определён как медленный.
Анализ PSI — это всего лишь имитация загрузки веб-страниц. К тому же сервис расположен на серверах, которые находятся в Европе. А скорость загрузки страниц напрямую зависит от местоположения сервера. Чем ближе сервер находится к пользователю, тем быстрее загружаются страницы.
Что касается поисковой оптимизации (SEO), то по заявлениям Google с июля 2018 года скорость сайта включена в число факторов ранжирования поиска. Это изменение получило название «Speed Update». Сервис PageSpeed Insights в нём приводится, как инструмент для примерной оценки состояния сайта.
Но прежде чем приступать к работам по увеличению баллов PSI, стоит помнить, что этот показатель далеко не первостепенный при ранжировании сайтов. Есть более важные параметры для SEO-продвижения: мета-теги, адаптивность, качественный контент. И если с этими параметрами полностью всё улажено, только тогда стоит задумываться об оптимизации баллов PSI.
Рекомендации от PageSpeed Insights
Помимо непосредственной проверки веб-страниц на скорость загрузки PSI предлагает ряд мер, принятие которых, возможно, увеличит баллы.
Эти меры разделены на 3 секции:
Оптимизация
Выполнение этих рекомендаций наиболее вероятно может повлиять на показатели, по которым производится расчёт баллов PSI.
Диагностика
Эти рекомендации приводятся не столько для оптимизации скорости, сколько для улучшения общей производительности вашего сайта.
Успешные аудиты
Тут приводится перечень уже произведённых оптимизаций.
Основные пути увеличения баллов
В целом PSI зачастую помогает найти не всегда очевидные проблемы на сайте. Решение этих проблем, если не ускорит ваш сайт, то может улучшить его общую функциональность.
Многие рекомендации действительно полезны и помогают ускорить загрузку страниц. Но далеко не все из них могут оказаться эффективными и быть совместимыми с используемыми на вашем сайте плагинами и библиотеками инструментов. Слепое выполнение всех рекомендаций PSI может значительно ухудшить работу вашего сайта.
Исходя из нашего опыта в оптимизации сайтов, мы с уверенностью можем выделить некоторые из рекомендаций, выполнение которых с большой вероятностью приведёт не только к улучшению баллов PSI, но и к фактическому ускорению вашего сайта:
- Выбор оптимального хостинга
Парадоксально, но многие из проблем со скоростью загрузки могут даже не зависеть от самого сайта. Зачастую проблемным местом может оказаться сервер, который обслуживает ваш сайт. Многие не придают особого значения тому, какой именно хостинг они используют. Стремятся к наиболее дешёвому и простому решению в угоду функциональности и производительности. Мы рекомендуем крайне внимательно и обдуманно подойти к вопросу выбора хостинга. К слову в одной из предыдущих статей мы уже разбирали этот вопрос. - Оптимизация стилей и скриптов
Комплекс работ по оптимизации файлов CSS и JS. Их минификация (уменьшение размера), рефакторинг (выявление и удаление ненужных кусков кода) и правильное подключение на сайт. - Оптимизация шрифтов
Правильное подключение шрифтов для наиболее быстрого появления текста на экране — залог успеха шустрой прорисовки первого экрана. Если для пользователя лишние миллисекунды ожидания ни на что не влияют, то для алгоритма PSI эти мгновения имеют значение. - Оптимизация изображений
В целом работа с изображениями — основной момент в оптимизации скорости сайтов. Это, наверно, самая важная и трудная задача. Её суть в использовании изображений наименьшего веса и наиболее оптимального размера (ширина и высота). Какие-то из работ могут произвести разработчики в рамках задачи по общей оптимизации сайта, но наибольшая ответственность за работу с изображениями лежит на контент-менеджерах сайта. Ведь большинство изображений, используемых на сайте, загружается именно ими.
Более подробно с рекомендациями по правильному подбору изображений вы можете ознакомиться в нашей статье, посвящённой этой теме.
- Настройка ленивой загрузки изображений (lazy-loading)
Суть задачи — настроить сайт таким образом, чтобы изображения на странице загружались не все сразу, а только по мере просмотра страницы пользователем. По принципу «Загружаем только то, что увидит пользователь — и не больше».
Это делается для предотвращения излишнего сетевого трафика и ускорения подготовки страницы к взаимодействию с пользователем. Ведь для того, чтобы, например, начать читать данную статью, вам не обязательно ждать, пока загрузится изображение в конце страницы.
- Сжатие текста
Наверно вам знакомо понятие архивации файлов, и вы нередко встречались с файлами, форматов .zip или .rar? Так вот, данная рекомендация сводится к настройке серверного ПО вашего сайта таким образом, чтобы данные, которые он отправляет пользователям проходили предварительно процесс сжатия (архивацию). Это позволяет значительно сократить общий сетевой трафик и ускорить получение информации с сервера. - Максимальное уменьшение количества подключаемых инструментов
Зачастую для определения и увеличения конверсии сайта вам необходимо собрать статистику пользовательского опыта, настроить различные метрики и внедрить дополнительные инструменты: GTM, Яндекс.Метрика, сервисы обратной связи (онлайн-чатики) Это нормально и это правильно. Но всегда стоит помнить о том, что все эти подключаемые решения создают дополнительную нагрузку на сайт, требуют времени для активации и, как следствие, приводят к замедлению скорости его загрузки.
С этими инструментами практически ничего не возможно сделать. Их нельзя оптимизировать силами разработчиков вашего сайта. Они подключаются в том виде, в котором они предоставляются.
Многие из разработчиков таких инструментов заведомо беспокоятся о скорости сайтов своих клиентов и постоянно проводят оптимизацию предлагаемых ими решений. Но многие игнорируют этот момент. Поэтому, прежде чем подключать тот или иной инструмент, советуем вам лишний раз проверить целесообразность его использования.
И помните, каждый новый плагин — уменьшение баллов PSI.
Выводы
PageSpped Insights от Google — отличный инструмент для тестирования сайта и выявления не всегда очевидных проблем. Его использование может помочь вам в определении примерной картины скорости загрузки и привести её к простому показателю в виде балла от 0 до 100.
Не стоит акцентировать большое внимание на получении наибольшего балла и попадании в так называемую «Зелёную зону» (90−100 баллов). Главная суть использования PSI — поиск и целесообразное исправление основных проблемных мест сайта. Всё это должно производиться не для получения желаемых 100 баллов, а в первую очередь для создания максимально удобного и быстрого сайта с точки зрения именно пользователя.
Руководствуйтесь следующими моментами:
- Google сам предупреждает, что эти баллы приблизительны и изменчивы;
- Гонка за «Зелёно зоной» может оказаться не спринтом, а марафоном, т.к. алгоритм проверки постоянно изменяется, и чтобы ему удовлетворять, необходимо будет постоянно вносить корректировки в работу сайта;
- Сервис не определяет фактическую скорость, а лишь имитирует загрузку страниц;
- Выполнение всех рекомендаций PSI может оказаться трудоёмким процессом и в итоге не привести к увеличению баллов.
Всегда помните про Закон Парето:
20% усилий дают 80% результата, а остальные 80% усилий — лишь 20% результата.
Общая оптимизация кода, скорее всего, поможет минимальными усилиями достичь средних значений в 50−70 баллов (и этого достаточно). А вот дальнейшие более детальные работы — это долго и дорого. И далеко не факт, что они приведут вас к заветной «Зелёной зоне».
Надеемся, что статья была для вас полезной и полученная информация поможет вам в будущем. А ещё мы будем рады помочь вам в вопросах SEO-продвижения, рекламы в интернете, разработки сайтов и запуска продаж на маркетплейсах. Оставляйте заявку ниже:
Получить консультацию!
Общее время блокировки (TBT)
Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Филип Уолтон
Примечание. Общее время блокировки (TBT) — это важный лабораторный показатель для измерения реакции на нагрузку , поскольку он помогает количественно оценить степень неинтерактивности страницы до того, как она станет надежно интерактивной. Низкое значение TBT помогает гарантировать, что страница пригодна для использования .
Что такое ТБТ?
Метрика «Общее время блокировки» (TBT) измеряет общее количество времени после первой контентной отрисовки (FCP), когда основной поток был заблокирован на достаточно долгое время, чтобы предотвратить реакцию ввода.
По умолчанию Lighthouse прекращает мониторинг TBT после Time to Interactive (TTI) , как и некоторые другие лабораторные инструменты, измеряющие загрузку страницы. См. Как TBT соотносится с TTI? .
Основной поток считается «заблокированным» каждый раз, когда существует длинная задача — задача, которая выполняется в основном потоке более 50 миллисекунд (мс). Мы говорим, что основной поток «заблокирован», потому что браузер не может прервать выполняемую задачу. Таким образом, в случае, если пользователь взаимодействует со страницей во время выполнения долгой задачи, браузеру придется дождаться завершения задачи, прежде чем он сможет ответить.
Если задача достаточно длинная (более 50 мс), вполне вероятно, что пользователь заметит задержку и воспримет страницу как вялую или дерганную.
Временем блокировки данной длинной задачи считается ее продолжительность более 50 мс. А общее время блокировки страницы представляет собой сумму времени блокировки для каждой длительной задачи, возникающей после FCP за измеренный период времени (обычно TTI для инструментов загрузки страниц или общее время трассировки для других инструментов).
Например, рассмотрим следующую диаграмму основного потока браузера во время загрузки страницы:
На приведенной выше временной шкале есть пять задач, три из которых являются длинными задачами, поскольку их продолжительность превышает 50 мс. На следующей диаграмме показано время блокировки для каждой из длинных задач:
Таким образом, хотя общее время, затрачиваемое на выполнение задач в основном потоке, составляет 560 мс, только 345 мс из этого времени считаются временем блокировки.
| Продолжительность задачи | Время блокировки задачи | |
|---|---|---|
| Задача первая | 250 мс | 200 мс |
| Задача вторая | 90 мс | 40 мс |
| Задача третья | 35 мс | 0 мс |
| Задача четвертая | 30 мс | 0 мс |
| Задача пятая | 155 мс | 105 мс |
| Общее время блокировки | 345 мс | |
Как ТБТ соотносится с TTI?
ТБТ измеряется в течение определенного периода времени. Для некоторых лабораторных инструментов, которые традиционно измеряют загрузку страниц, включая Lighthouse, TBT измеряется вплоть до TTI, поскольку он помогает количественно оценить степень неинтерактивности страницы до того, как она станет надежно интерактивной. Однако TBT также можно продолжать измерять после загрузки страницы и, следовательно, после TTI, например, в режиме Lighthouse Timespan.
TTI считает страницу «надежно интерактивной», если в основном потоке не было длительных задач в течение как минимум пяти секунд. Это означает, что три задачи по 51 мс, распределенные по 10 секундам, могут отодвинуть TTI так же далеко, как и одна задача длительностью 10 секунд, но эти два сценария будут сильно отличаться для пользователя, пытающегося взаимодействовать со страницей.
В первом случае три задачи по 51 мс будут иметь TBT 3 мс . В то время как для одной задачи продолжительностью 10 секунд TBT будет составлять 9950 мс . Большее значение TBT во втором случае количественно характеризует худшие впечатления.
Этот пример показывает, почему TBT часто является лучшим показателем, чем TTI, поскольку он менее подвержен выбросам. Это справедливо даже в том случае, когда TTI используется в качестве конечной точки для TBT.
Как измерить ТБТ
ТБТ – это показатель, который следует измерять в лаборатории . Лучший способ измерить TBT — провести аудит производительности Lighthouse на вашем сайте. Подробности использования см. в документации Lighthouse по TBT .
Лабораторные инструменты
- Маяк
- Веб-ПейджТест
Что такое хороший показатель TBT?
Чтобы обеспечить хорошее взаимодействие с пользователем, сайты должны стремиться к тому, чтобы общее время блокировки составляло менее 200 миллисекунд при тестировании на среднем мобильном оборудовании .
Подробную информацию о том, как TBT вашей страницы влияет на ваш показатель производительности Lighthouse, см. в разделе «Как Lighthouse определяет ваш показатель TBT».
Как улучшить ТБТ
Чтобы узнать, как улучшить TBT для конкретного сайта, вы можете запустить аудит производительности Lighthouse и обратить внимание на любые конкретные возможности, которые предлагает аудит.
Чтобы узнать, как улучшить TBT в целом (для любого сайта), обратитесь к следующим руководствам по производительности:
- Уменьшите влияние стороннего кода
- Сократите время выполнения JavaScript
- Минимизируйте работу основного потока
- Следите за тем, чтобы количество запросов было небольшим, а размеры переводов — небольшими.
Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.
Последнее обновление: 2023-11-17 UTC.
6 способов оптимизировать PageSpeed и ускорить загрузку сайта для Google
15:28 Вопрос от зрителей, как подключать Метрику и Аналитикс. Помогает ли перенос скрипта вниз HTML.
17:15 Параметр скорости сайта FCP (First Contentful Paint), первая отрисовка контента, что это такое и как измеряется
18:52 Зоны допустимости показателя FCP
20:15 Как улучшить показатель первой отрисовки сайта FCP
26:36 Вопрос про плагин для подсветки скорости сайтов в выдаче
30:54 Параметр TTI (Time to Interactive) — время до взаимодействия, до интерактивности, для улучшения скорости сайта
33:43 Про параметры оценки TTI
34:16 Способы улучшения показателя TTI (Time to Interactive)
40:21 Как насчет jQuery Slim
40:32 Чем заменить код jQuery для WordPress
41:31 Ускорение сайтов на популярных CMS и цена услуги ускорения сайтов
45:10 Как увидеть скорость в динамике замера каждые 5 секунд https://ping.loading.express — замер скорости ответа сервера.
46:26 Слайдер на 400Кб много для скорости сайта
47:12 Про рейтинг скорости сайтов застройщиков Петербурга — https://loading.express/developers-spb
50:09 9/10 что означает данный показатель на Loading.express — надо ли ускорять сайт
52:24 Почему загрузка мобильной версии всегда хуже, чем у десктопной версии сайтов
54:18 Насколько увеличит показатель скороси сайта CDN (CloudFlare или W.tools): подробный эфир на эту тему — https://youtu.be/IrYD8ZT584c
58:00 Что такое Speed Index и его показатели
59:00 Как улучшить Speed Index — просто
59:19 TBT (Total Blocking Time) общее время блокировки сайта — что это? Новый параметр измерения? FID и TBT в чем отличие.
1:03:35 Как воспринимают люди скорость интернета, своего устройства или сайта
1:05:25 Как оптимизировать показатель TBT (Total Blocking Time)
1:08:34 Оптимизируем long tasks, смотрим примеры из PageSpeed Insights
1:09:26 LCP (Largest Contentfull Paint) самый большой отрисованный элемент на вашем сайте, пример
1:10:08 Про отрисовку крупного контента LCP
1:12:47 Диапазоны показателей LCP
1:13:18 Улучшение LCP на реальном опыте
1:15:58 А если текст LCP. Почему нельзя включать LazyLoad на первом экране.
1:17:27 HTTP/2 Push Server как работает и для чего нужен (целый эфир про это https://youtu.be/mXrVhH5jcUs)
1:18:06 CLS (Cumulative Layout Shift) последний параметр оптимизации PageSpeed Insights — CLS (Cumulative Layout Shift)
1:20:06 Что такое CLS на языке Google / Смещение элемента
1:21:50 Допустимые показатели CLS
1:22:24 Как же улучшить CLS?
1:23:39 100% рабочий способ для автоматического ускорения сайта
1:28:16 Наработки из LOADING.express для улучшения показателей
1:36:11 Как бороться с unusedCSS & unusedJS
1:45:16 Все, что было раньше FCP, TTI, SpeedIndex должно грузиться не более 50 мс
1:47:16 Место размещения счетчиков метрики? Подробнее
1:49:22 Как разбить выполнение js на мелкие задачи?
1:52:37 Как отложить пиксель Facebook?
1:53:05 Цена за оптимизацию сайта начинается от 19 тысяч рублей?
1:59:13 Примеры сайтов, которые Антон с Алексеем реально ускорили
1:59:51 Информация о бесплатном мониторинге
2:00:15 LazyLoad для картинок в вашем пакете скриптов откладывает загрузку всех картинок кроме первого экрана
2:01:26 Будет ли ваш набор наработок работать в shopscript webasyst? Не будет ли конфликтов с плагинами и темами?
2:04:39 Настроить отложенную загрузку скрытых изображений? Влияет ли на индексацию?
2:11:01 Метрика как замедлитель скорости. Про новую Яндекс.Метрику
2:11:57 К LСP относится все крупные элементы, которые отрисовываются на первом экране?
2:12:34 Тег picture, и форматы webp, jpeg
Ускорение сайта
Яндекс и Google отдают предпочтения в выдаче сайтам с быстрой загрузкой страниц, и пессимизируют медленные сайты. Притом чем дальше — тем больше. Если сегодня ваш сайт открывается медленно, особенно на мобильных устройствах, шансов получить высокие места по запросам все меньше.
Согласно исследованиям Google¹ и отраслевым исследованиям наблюдается прямая корреляция² между положительным пользовательским опытом и конверсиями:
Еще одно исследование Google³ посвящено взаимосвязи между скоростью загрузки сайта и процентом отказов:
Ссылки на исследования:
- Introduction to the June 2021 Google algorithm update
- Chrome User Experience Report
- Find out how you stack up to new industry benchmarks for mobile page speed
Как оценить скорость
1 секунда и менее
1 сек. и менее
2-3 секунды
4-7 секунды
8-10 секунды
Очень плохо
более 11 секунд
более 11 сек.
Скорость загрузки сайта по Google Page Speed — наши кейсы
сентябрь 2023, Битрикс
февраль 2023, Joomla
июнь 2022, Битрикс
сентябрь 2022, Yii
апрель 2022, ModX
июль 2021, Битрикс (шаблон INTEC)
июнь 2021, Битрикс
июнь 2021, Битрикс
июнь 2021, Битрикс
июнь 2021, Битрикс
май 2021, Битрикс
май 2021, Битрикс (Альтоп)
май 2021, WordPress
май 2021, Битрикс
январь 2021, ModX
декабрь 2020, Yii
ноябрь 2020, Yii
сентябрь 2020, Битрикс
июль 2020, Битрикс
апрель 2020, Битрикс
ноябрь 2019, Битрикс
июль 2019, Битрикс
май 2019, Битрикс
Оптимизация сайта под Google PageSpeed
Google PageSpeed Insights — объективная оценка скорости загрузки сайта
Google PageSpeed Insights — это инструмент, который позволяет увидеть слабые места страницы и потенциал для быстродействия и улучшения пользовательского опыта. Баллы, выдаваемые сайту в сервисе, не являются объективной оценкой скорости загрузки сайта, ведь зная, по каким метрикам эта оценка складывается, можно «подкрутить» показатели, получить заветную «зеленую» оценку, но никак не улучшить реальную производительность страницы, то есть скорость взаимодействия с пользователем.
Мы часто сталкиваемся с пожеланием клиентов увеличить оценку по Google PageSpeed Insights (аббревиатура GPSI), и именно значение этой оценки для компьютера и телефона воспринимается в качестве финального критерия.
На самом деле баллы в сервисе Google PageSpeed — это собирательная оценка, которая формируется алгоритмом гугла Lighthouse из 6 ключевых метрик производительности страницы:
- First Contentful Paint (FCP) — время первой отрисовки.
- Speed Index (SI) — индекс скорости загрузки.
- Largest Contentful Paint (LCP) — время отрисовки крупного контента экрана первой страницы.
- Time to Interactive (TTI) — время загрузки до интерактивности.
- Total Blocking Time (TBT) — время полной блокировки.
- Cumulative Layout Shift (CLS) — смещение элементов на странице во время загрузки, в %.
Каждый из этих параметров оценивается в секундах и имеет свой вес при расчёте итоговой оценки в баллах, которую мы видим после проверки сервисом Гугл Пейдж Спид. Распределение веса метрик на итоговую оценку, а также механизм расчёта каждого отдельного параметра Лайтхаус постоянно дорабатывается создателями, от чего оценка сайта по PageSpeed меняется, даже если на сайт не вносили никаких изменений, причём оценка может как стать лучше, так и хуже.
Например, в июне 2021 года было обновление алгоритма Lighthouse, в частности изменили влияние метрик на баллы, зарабатываемые сайтом в сервисе GPSI. На иллюстрации ниже показано распределение до июня 2021 года (версии 6 и 7) и начиная с июня 2021 (версия 8).