Как улучшить показатели скорости сайта google

PageSpeed Insights API

PageSpeed Insights API (PSI) позволяет получать отчеты о скорости загрузки страниц на мобильных устройствах и компьютерах, а также советы, как эту скорость увеличить.

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

Оценка скорости загрузки

Вверху отчета PSI показывается общая оценка скорости загрузки страницы в баллах. Эта оценка рассчитывается по итогам имитации загрузки с помощью инструмента Lighthouse. Результат от 90 баллов и выше считается хорошим, от 50 до 90 – средним. Если набрано меньше 50 баллов, значит страница загружается медленно.

Данные наблюдений

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

Высокая, средняя и низкая скорость загрузки

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

Высокая скорость	Средняя скорость	Низкая скорость
FCP	0–1000 мс	1000–2500 мс	Более 2500 мс
FID	0–50 мс	50–250 мс	Более 250 мс

В целом примерно у 10 % страниц наблюдается высокая скорость загрузки, у следующих 40 % – средняя, а у последних 50 % – низкая. Числа округлены для простоты понимания. Приведенные в таблице пороговые значения одинаковы для мобильных устройств и компьютеров и введены с учетом особенностей человеческого восприятия.

Распределение значений FCP и FID, а также выбранное для каждого показателя значение

В PSI показывается распределение значений FCP и FID, полученных в результате анализа данных об определенной странице или источнике. Категорий при этом тоже три: «Быстро», «Средне» и «Медленно». На диаграмме распределения они обозначены зеленым, оранжевым и красным цветом соответственно. К примеру, если в оранжевой части диаграммы напротив показателя FCP указана доля 14 %, значит 14 % всех имеющихся значений FCP находится в диапазоне от 1000 до 2500 мс. Это агрегированные данные о загрузках страницы за прошедшие 30 дней.

Над диаграммой распределения в PSI приводится 90-й процентиль по FCP в секундах и 95-й процентиль по FID в миллисекундах. Эти процентили выбираются, чтобы разработчики могли понять, насколько медленно их страницы загружаются в наихудших условиях. Показатели с определенными значениями процентилей классифицируются как высокие, средние или низкие по тем же критериям, которые указаны в таблице выше.

Общий результат

Скорость загрузки страницы оценивается на основе значений обоих показателей:

• Высокая – если и FCP, и FID высокие.
• Низкая – если FCP или FID низкий.
• Средняя – во всех остальных случаях.

Различия между данными PSI и отчета об удобстве пользования браузером Chrome

Данные о фактической скорости загрузки в PSI обновляются ежедневно и охватывают последние 30 дней, в то время как данные отчета об удобстве пользования браузером Chrome, просматриваемые в BigQuery, обновляются только раз в месяц.

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

По каждому показателю дается отдельная оценка с пометкой в виде определенного значка:

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

Аудиты

Аудит Lighthouse делится на три части:

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

Часто задаваемые вопросы

Загрузку на каком устройстве и в сети какого типа имитирует Lighthouse?

В настоящее время Lighthouse имитирует загрузку страницы на устройстве со средними возможностями (Moto G4) в мобильной сети.

Почему данные наблюдений не совпадают данными по итогам имитации загрузки? В первом случае скорость загрузки оценивается как низкая, а во втором – как высокая!

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

Почему выбираются 90-й процентиль по FCP и 95-й процентиль по FID?

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

Почему могут отличаться значения FCP, полученные с помощью API PageSpeed Insight версий 4 и 5?

Значение FCP в API версии 5 соответствует 90-му процентилю, а в версии 4 – 50-му.

Какой результат можно считать достаточно высоким при имитации загрузки?

Любой результат, отмеченный зеленым цветом (90 и выше).

Почему оценка скорости загрузки меняется, хотя я ничего не меняю на своей странице?

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

Остались вопросы?

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

Если у вас есть вопрос или отзыв общего характера об инструменте PageSpeed Insights, создайте тему в соответствующей группе Google.

Отзыв

Вы нашли то, что искали?

Да Отлично! Благодарим за отзыв. Если вам нужна дополнительная информация по работе с инструментом PageSpeed Insights, обратитесь к сообществу сайта Stack Overflow. Ваши вопросы должны быть точно сформулированы, а задавать их нужно на английском языке. Если у вас есть вопрос или отзыв общего характера об инструменте PageSpeed Insights, создайте тему в нашей группе. Нет Сожалеем об этом. Если вам нужна дополнительная информация по работе с инструментом PageSpeed Insights, обратитесь к сообществу сайта Stack Overflow. Ваши вопросы должны быть точно сформулированы, а задавать их нужно на английском языке. Если у вас есть вопрос или отзыв общего характера об инструменте PageSpeed Insights, создайте тему в нашей группе.

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2018-12-05 UTC.

Увеличить скорость загрузки сайта в Google Page Speed своими руками

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

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

Ну а начинаем мы с проверки текущих значений.

Проверяем скорость загрузки сайта в Google Page Speed

На ваш личный взгляд ваш сайт может летать, но это еще ни о чем не говорит для Гугла.

У него свои критерии проверки скорости сайта, поэтому идем сюда https://developers.google.com/speed/pagespeed/insights/

Вводим адрес сайта и жмем проверить.

Адрес вводите с http или https и при этом убедитесь, что сайт включен в нормальном режиме (не в режиме обслуживания), а robots.txt разрешает индексацию всех важных элементов сайта.

Чем ближе результат к 100 баллам тем лучше

Нормой считается 60 баллов и выше.
Если у вас больше — отлично.
То есть если ваш результат 80 баллов, то дергаться и пытаться любыми способами сделать 100 — не слишком благодарное занятие, тем более что банальная установка Яндекс Метрики у вас сожрет 10-15 баллов

Так что если у вас 60-80 баллов и выше, то не переживайте, а радуйтесь: большинство проектов имеет 10-20 баллов до оптимизации скорости загрузки.

Я лично считаю, что для проектов с большим функционалом даже 50 баллов по Google Page Speed — вполне приемлемо.

Ну а если у вас меньше 50-60 баллов, то стоит серьезно задуматься об оптимизации скорости сайта под Гугл.

Я начну с самых простых способов и закончу сложными

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

Самый простой способ ускорения загрузки сайта для Гугла — это включить GZIP сжатие. Это специальный механизм архивирования данных «на лету», который поддерживается 99,99% хостеров.

Если ваш хостер не поддерживает его, то меняйте хостера (кого могу рекомендовать).

Кстати, включить GZIP сжатие в WordPress можно с помощью плагина кэширования WP Fastest Cache

Если не хотите ставить плагины, то можете модифицировать данные прямо в файле .htaccess, который лежит в корневой папке сайта (как попасть туда по FTP).

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

Читайте также: Как установить счетчик Яндекс Метрика на сайт

Должно быть так:

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

Зависит от серверов вашего хостера, их загруженности и прожорливости вашего проекта.

Иногда только один этот показатель может свести на нет все ваши усилия по SEO оптимизации проекта.

Важно проверить этот параметр скорости сайта по Google Page Speed в разное время дня или ночи — вполне возможно в данный момент сервер хостера просто перегружен запросами.

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

Если этот показатель стабильно плохой, то имеет смысл:

• поставить модули кэширования (я их рекомендую ставить каждому проекту в любом случае!), чтобы снизить нагрузку на слабый хостинг и время формирования страниц сайта.
• задуматься о смене хостера на того, у которого максимально быстрый хостинг или просто переходите на VPS-сервер. Этого обычно хватает в большинстве случаев для развивающихся проектов.
• если есть лишняя копеечка, то закажите услугу CDN сервера вот тут (скидка 20% по промокоду «moytop»). Это даст весьма стабильную и быструю работу сайта.
• самый сложный путь — это внутренняя оптимизация скриптов сайта (вплоть до полной переделки всего сайта). Это рекомендую делать в последнюю очередь, так как это очень затратно.

Сама по себе смена хостера вам ничего не даст в плане прироста Google Page Speed.

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

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

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

Тоже несложный способ быстро повысить показатель в Google Page Speed.

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

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

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

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

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

Задача — уменьшить качество картинок на сайте, чтобы они занимали меньше места и быстрее грузились.

Сделать это разумнее всего через сам Гугл Пейдж Спид.
Но придется делать это вручную, то есть придется повозиться!

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

Читайте также: Сжимаем картинки JPG и PNG онлайн без потери качества

Увы, такой программы я не нашел. Пересмотрел всякие просмотрщики типа XnView, Infran, программы типа Caesium, FileOptimizer, Imbatch, ImageOptim, сервисы вроде TinyPng и т.п. — автоматизации нет.

Если кто знает такую программу — напишите в комментах.

Основные требования:

• сжатие по алгоритму Google (чтобы после загрузки готовых картинок они соответствовали требованиям Гугла по скорости загрузки)
• минимальные потери качества
• работа с сохранением структуры папок
• удаление метаданных и т.п. мусора.
• автоматическое определение входного и выходного формата

Ну а пока программы нет, то придется делать это «ручками».

Сам Google Page Speed внизу дает ссылку на скачивание уже оптимизированных файлов.

Качаем и распаковываем.

А затем долго и муторно меняем файлы через FTP на сайте, заменяя старую версию на новую.

PNG — качество остается весьма хорошее, почти как в оригинале, а размер уменьшается в 2-3 раза. Так что если у вас много PNG файлов, то будет очень большая экономия.

Рекомендация

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

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

Обновление!
Выход есть — читайте про формат Webp как его использовать на сайте в пару кликов и получить высокую скорость по картинкам

Сократите CSS + HTML + JS

В данном случае Google Page Speed по аналогии с картинками просит вас выкинуть из файлов верстки, скриптов и кода страниц все лишнее — пробелы, комментарии и т.п.

Чтобы сами файл стали меньше «весить» и быстрее стала скорость загрузки сайта.

При использовании плагинов кэширования — это всё делается автоматически «на лету». Это наиболее удобный способ, так как не меняет ваш код, а создаёт отдельные — минифицированные файлы CSS и HTML, которые и подсовывает Гуглу и все счастливы.

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

Код до оптимизации (читабельный)

Код после оптимизации (уже изменения делать сложно)

Скачать уменьшенные файлы «от Гугла» можно там же где и картинки — они в одном архиве будут.

А вот перезаливать ими оригинальные файлы — сами решайте, в любом случае сохраните бекап старых файлов.

Оптимизируйте загрузку видимого контента

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

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

Читайте также: Жизнь без SEO — статистика сайтов без оптимизации

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

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

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

Вы, конечно, можете добавить возле загрузки каждого JS файла тег async или же поставить скрипт от Гугл для extsrc=, но по моим наблюдениям в 90% это или ничего не дает, или ломает сайт!

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

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

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

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

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

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

Код для htaccess

Как и обещал, вот код, который формируется плагинами кэширования, но который можно добавить самому в файл .htaccess, который находится в корне сайта.

Какой-то из этих двух вариантов наверняка подойдет.

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

Скачать бесплатно: dop-htaccess.txt — Яндекс.Диск

Скачано: 632, добавлено: 24.Май.2018

Нужно взять один из кодов и добавить в самое начало вашего файла .htaccess.

Обновить страницу и отправить на повторную проверку скорости загрузки сайта Google Page Speed.

Выводы и итоги

Итак, чтобы увеличить скорость сайта в Гугл проще всего:

• установить и настроить плагины кэширования (включить в них все сжатия, сокращения и т.п.)
• установить и настроить плагины для автоматического преобразования в Webp
• если хостинг мешает загрузке, то выбрать наиболее быстрого хостера или заплатить за CDN сервис
• отключить неиспользуемые плагины и скрипты
• заказать эту услугу на Кворке всего за 500 росс. рублей

Позиции заметно укрепляются, по крайней мере вы исключите этот фактор из тех, которые тормозят рост сайта в поиске.

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

Полезный совет: Нажатие клавиш «WIN + D» позволяет быстро скрыть текущие окна и перейти к рабочему столу Windows.

Скорость загрузки сайта и удобство страницы: анализ метрик и их влияние на SEO

Чем быстрее веб-страница загружается, тем удобнее она для пользователей. А насколько скорость загрузки важна для позиций в поиске? Ни Google, ни другие поисковые системы не рассказывают, как конкретно они измеряют показатели скорости и насколько они влияют на ранжирование в поиске. Но сегодня можно быть уверенными, что удобство страниц становится важным фактором поискового продвижения. Оценка удобства страницы включает в себя несколько технических характеристик, в частности Core Web Vitals — метрики загрузки, интерактивности и визуальной стабильности. Если вкратце, то они оценивают не то, как быстро страница загружается, а то, как быстро рендерится первая видимая часть. В этой статье мы поговорим об этих метриках детальнее и раскроем другие аспекты, влияющие на загрузку. Также мы объясним, как улучшив показатели скорости и производительности, можно повысить позиций в поиске.

Баланс между удобством и скоростью

Google запустил инструмент для анализа производительности сайта в 2013 году: PageSpeed Insights сканировал ресурс и давал ему оценку вместе с рекомендациями по загрузке. Но этот анализ был не очень точным и репрезентативным. В 2018-м инструмент получил улучшенный алгоритм Lighthouse — с тех пор анализ скорости стал объективнее, так как инструмент начал оценивать рендеринг страницы. В 2021 году метрики удобства страницы выходят на передний план и станут важным аспектом ранжирования. Работать над скоростью несомненно нужно. Если страницы вашего сайта грузятся медленно, ваши позиции просядут вместе с показателями просмотра и конверсии. Но для успешного поискового продвижения недостаточно просто улучшать показатели загрузки — нужно находить баланс между скоростью и удобством для пользователей. UX важен для всех поисковых систем: в руководстве Bing «положительный пользовательский опыт» признан более значимым, чем быстрая загрузка страниц, документация Yahoo! тоже указывает на приоритет удобства для пользователей в оценке скорости.

Процесс загрузки страницы от «а» до «я»

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

• Юзер вводит URL-адрес или переходит по ссылке, отправляя запрос серверу.
• Сервер обрабатывает запрос и отправляет HTML браузеру.
• Браузер строит DOM-дерево (Document Object Model, модель страницы из HTML-объектов) и парсит CSS-атрибуты.
• Браузер рендерит страницу в соответствии с версткой, стилями и присутствующими элементами.

Метрики для анализа загрузки и удобства

На поведенческие факторы влияет несколько аспектов. Визуальная и смысловая составляющие важны для восприятия страницы, но основой всему остальному служат технические параметры — их оценивают метрики удобства страницы (page experience) в системе ранжирования Google.

Оценка удобства страницы включает:

• Параметры Core Web Vitals: Largest Contentful Paint (LCP), First Input Delay (FID), Cumulative Layout Shift (CLS). Они отвечают за скорость загрузки, интерактивность страницы и стабильность верстки.
• Дизайн, оптимизированный для мобильных устройств. Мобильный поиск становится все популярнее, поэтому адаптивный дизайн — один из приоритетов для поисковиков. Инструмент Google TestMySite анализирует загрузку страницы на мобильных устройствах. Также существуют отдельные онлайн-сервисы для аналогичной проверки.
• Безопасный поиск. Алгоритм Safe Browsing проверяет сайты на наличие вредоносных факторов.
• Протокол HTTPS. Google маркирует все HTTP-сайты как небезопасные с июля 2018 года, так что если вы до сих пор не переехали на HTTPS, стоит этим заняться. Узнайте, как перевести сайт на HTTPS без потерь трафика из нашей статьи.
• Беспрепятственный доступ (отсутствие назойливых межстраничных объявлений). Межстраничные объявления (например, попапы) могут привести к штрафам от Google. Не подлежат штрафам объявления адекватного размера, которые не всплывают слишком неожиданно для пользователей, диалоговые окна для логина или вывода информации, требуемой по закону (например, о файлах cookie).

Рассмотрим детальнее параметры Core Web Vitals и способы их вычисления.

Largest Contentful Paint

Поисковые системы обращают внимание не на то, как быстро загрузится вся страница, а на то, как быстро станет доступным первый рендер (то есть первый экран, с которым можно взаимодействовать). Для пользователей точно так же важно, чтобы первый видимый фрагмент побыстрее стал читабельным и интерактивным. Largest Contentful Paint (LCP) — буквально «отрисовка самого большого элемента контента» — это изображение или текстовый блок, занимающий больше всего места на первом экране.

Типы файлов, которые могут быть самым большим элементом контента:

• Изображения ()
• Изображения внутри svg-объектов ( внутри )
• Видео ()
• Фоновые изображения, загруженные с помощью функции url()
• Блочные элементы с текстовыми узлами

Что влияет на загрузку LCP:

• Время ответа сервера. Оно зависит от многих факторов — провайдера хостинга, системы управления контентом, задействованных баз данных и др.
• Блокирующие рендеринг JavaScript и CSS. Именно файлы JavaScript и CSS отвечают за интерактивность и визуальную привлекательность страницы. При обработке HTML браузер встречает JS- and CSS-файлы, которые нужно выгружать из сервера, — из-за этого тормозится процесс рендеринга.
• Время загрузки ресурсов. На показатель LCP влияет время загрузки ресурсов страницы — кода, картинок, видео.
• Тип рендеринга. Рендеринг JavaScript может осуществляться на стороне клиента и на стороне сервера. В первом случае рендеринг происходит непосредственно в браузере, а во втором браузер получает уже предварительно отрендеренный контент страницы из HTML-документа, запрошенного у сервера.

2.5 секунды и меньше — хороший показатель LCP.

Метрики Time to First Byte (время до первого байта) и First Contentful Paint (первый отрисованный элемент контента) тоже полезны в анализе LCP и скорости загрузки сайта в целом. Раньше для оценки скорости использовали FCP и First Meaningful Paint (первый значимый отрисованный элемент), но измерения FMP были во многом неточными и их сложно было стандартизировать для всех браузеров. В результате Google пришел к LCP как к более объективной метрике.

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

• FCP — любой отдельный элемент, который первым появляется на странице
• FMP — самый большой сдвиг верстки в первом экране
• LCP — самый большой отдельный элемент, показанный в первом экране

First Input Delay

Метрика First Input Delay (буквально «задержка первого ввода») определяет то, как быстро страница становится интерактивной. Любой кликабельный элемент должен побыстрее обрабатываться браузером — а зависит это от собственного и стороннего кода, который используется для интерактивного контента.

Измерение FID нельзя симулировать в тестовой среде, потому что реальное взаимодействие юзеров — которые могут кликнуть по любому элементу в любой момент, или по нескольким сразу или подряд — может приводить к разным задержкам. Можно определить параметр FID по JavaScript с помощью Event Timing API, библиотеки web-vitals или библиотеки от GoogleChromeLabs.

Раньше в отчете Lighthouse можно было просмотреть показатель Max Potential First Input Delay (максимально возможная задержка первого ввода) — система анализировала основной поток выполнения и рассчитывала самый худший вариант задержки. Сейчас отчет включает две другие метрики, так или иначе связанные с FID:

• Time To Interactive (время до интерактивности) — то, как быстро страница становится полностью интерактивной (когда со всеми ее элементами можно взаимодействовать).
• Total Blocking Time (общее время блокировки) — промежуток времени после рендеринга FCP (первого элемента контента) до возможности взаимодействия со всей страницей (TTI). Эта метрика подобна FID, но она высчитывает время без учета реальных пользователей — добавляя все долгие JavaScript-задачи, блокирующие основной поток выполнения.

Для анализа интерактивности сайта стоит учитывать и FID, и TBT. Последнюю метрику вы можете увидеть в отчете Lighthouse:

Несколько уточнений об измерении FID:

• Значения FID зависят от каждой конкретной загрузки страницы реальным пользователем.
• Показатель FID не зафиксируется, если пользователь никак не взаимодействует со страницей.
• Измерения FID будут необъективными, если страница загружена в фоновой вкладке, потому что первое взаимодействие происходит не сразу после загрузки.

Хороший показатель FID — менее 100 миллисекунд.

Cumulative Layout Shift

Метрика Cumulative Layout Shift (совокупное смещение верстки) показывает, как быстро стабилизируется верстка страницы. Если ресурсы страницы загружаются асинхронно или DOM-элементы добавляются динамически, какие-то фрагменты могут смещаться во время загрузки. Низкий показатель CLS гарантирует легкое и беспрепятственное взаимодействие с веб-страницей.

Какие элементы могут быть причиной сдвига верстки:

• Изображения и видео с неуказанными размерами
• Шрифты, отличающиеся по размеру от резервных шрифтов
• Сторонние виджеты или рекламные блоки, динамически изменяющие размер

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

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

Давайте рассчитаем CLS по указанным на картинке выше данным. Доля воздействия — 0.375, доля расстояния — 0.125, так что показатель CLS равен 0.046875.

Показатель CLS ниже 0.1 считается хорошим, 0.1-0.25 требует улучшения, а выше 0.25 сигнализирует о серьезных проблемах.

Вы можете быстро оценить CLS любого сайта с помощью онлайн-калькуляторов:

Что можно сделать, чтобы улучшить CLS:

• Не размещайте контент поверх уже существующего.
• Указывайте размеры изображений и видео. Если вы используете адаптивные изображения, браузер сам их размещает по странице в зависимости от размеров экрана девайса. Чтобы избежать сдвигов, нужно прописывать пропорции в CSS или в атрибуте srcset.
• Используйте CSS-свойство transform для анимаций.
• Используйте CSS-значения font:display для шрифтов или предварительно загружайте файлы шрифтов.
• Указывайте точные параметры для рекламных блоков или используйте изначально фиксированные по размеру объявления.

Какие смещения не влияют на параметр CLS:

• Намеренные изменения верстки, вызванные пользователем
• Движение элементов, не отображаемых в окне экрана
• Смещения, вызванные добавлением нового элемента в DOM (если при этом существующие элементы не меняют своего начального положения)

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

Инструменты для измерения Core Web Vitals

Оценить сайт по параметрам Core Web Vitals можно с помощью отчета Chrome User Experience (CrUX), собирающего данные пользователей Chrome, инструмента PageSpeed Insights, который включает данные CrUX, или отчета Core Web Vitals в Google Search Console. Без учета пользовательских данных эти метрики можно проанализировать с помощью Chrome DevTools и Lighthouse.

Кроме этого существует множество онлайн-инструментов, которые мониторят разные показатели производительности сайта, включая Core Web Vitals. «Аудит сайта» в SE Ranking тоже включает в себя оценку этих метрик:

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

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

Основные аспекты улучшения работы сайта:

• Минимизация кода
• Оптимизация визуального контента
• Апгрейд хостинга

Давайте рассмотрим их детальнее.

Оптимизация JS, CSS, HTML

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

Минификация

Первое, что стоит сделать, для оптимизации загрузки сайта, — определить части кода, которые не используются, и удалить их. Этот процесс называется минификацией. Можно минимизировать код вручную или с помощью автоматизированных решений — например, Google рекомендует CSSNano и UglifyJS. Сеть доставки контента (CDN) тоже может автоматически минимизировать и сжимать файлы кода.

Чтобы определить, какой код не используется для работы сайта, можно воспользоваться Developer Tools в Chrome — перейдите во вкладку Sources в верхнем меню и Coverage в нижнем. Инструмент покажет реальную статистику по файлам JS и CSS и укажет размеры и процентное соотношение лишних файлов:

Проверить, какая часть JS- и CSS-кода не минимизирована, можно и в «Аудите сайта» SE Ranking — в разделе «Отчет об ошибках»:

В этом инструменте вы также можете проверить соотношение текста к HTML: слишком низкий показатель может сигнализировать о лишнем HTML-коде, который тормозит страницу. Хорошее соотношение — 20-70%.

Адаптация под разные устройства

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

Встроенный стиль

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

Постепенный рендеринг

Когда браузер натыкается на файлы CSS или JS перед первым рендером, выполнение этих файлов приостанавливает процесс загрузки. Стоит определить, какие ресурсы на странице могут блокировать рендеринг, — для этого можно запустить проверку с помощью WebPageTest:

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

Например, кнопки для распространения в соцсетях можно отображать не сразу — для этого нужно использовать асинхронную JavaScript-загрузку. Два атрибута помогают распределить скрипты и сделать рендеринг постепенным: async и defer. Их можно применять к собственному и стороннему JS-коду, сокращая время парсинга HTML без ущерба для отображения контента страницы.

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

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

• Используйте форматы, поддерживаемые всеми браузерами. Самые распространенные и беспроигрышные форматы — JPEG и PNG; WebP — многообещающий в плане качественного сжатия формат, но пока не доступен во всех браузерах; GIF можно использовать, если размер не слишком большой, или же конвертировать в видеофайл.
• Сжимайте изображения без существенной потери качества. Можно пользоваться онлайн-инструментами или встроенными в CMS решениями для сжатия.
• Указывайте несколько пропорций изображений, чтобы они выглядели как нужно на любом устройстве. Большинство CMS способны сделать это автоматически.
• Используйте асинхронную загрузку, если на странице много изображений. Сделать это можно с помощью ленивой загрузки или атрибута decoding=async.
• Храните большие видеофайлы на сторонних сайтах, чтобы уменьшить нагрузку при отображении сайта.

В «Аудите сайта» SE Ranking, в разделе «Найденные ресурсы», можно просмотреть размеры изображений и время их загрузки:

Оптимизация сервера

С помощью инструмента SE Ranking вы также можете проанализировать общую ситуацию скорости ответов сервера:

Кроме файлов кода и других ресурсов на сайте на время ответа сервера влияют:

• Возможности девайса и качество связи со стороны пользователя
• Количество получаемого сайтом трафика
• Ресурсы на каждой странице
• Выбранный провайдер и тип хостинга
• CMS и подключенные к ней плагины

Оборудование и сетевое подключение

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

Хостинг и CDN

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

Выделенный сервер — всегда лучший выбор, потому что так вы не будете делить сервер с другими сайтами. Как промежуточный вариант можно рассматривать виртуальный приватный сервер (VPS), который является совместным, но имитирует выделенный сервер.

Также задумайтесь об использовании сети доставки контента (CDN), в частности если вы целитесь на пользователей из разных стран и регионов. Эта инфраструктура распределяет нагрузку между несколькими серверами, расположенными в разных географических точках.

Кэширование

С помощью кэширования можно дать указания серверу или браузеру хранить ранее загруженный контент — так они не будут обрабатывать страницу, когда пользователь зайдет на нее повторно. Загрузка из кэша минимизирует нагрузку на сервер и улучшает производительность — например, исследование Kinsta показало, что кэширование на стороне сервера может уменьшить время загрузки на целых 30%. Можно настроить кэширование вручную в коде или с помощью плагинов вроде WP Rocket и W3 Total Cache. Некоторые провайдеры хостинга автоматически отправляют статический контент в кэш.

Редиректы

Каждый настроенный редирект замедляет процесс загрузки страницы, поэтому стоит проверять их количество и избегать проблем с цепочками перенаправлений. Узнайте больше о работе редиректов из нашего гайда, а пока разберемся с тем, как их отслеживать. В «Аудите сайта» SE Ranking вы можете просматривать список настроенных редиректов и их ответы сервера, определяя проблемные моменты:

Проверка плагинов

Еще один фактор влияния на скорость и производительность сайта — плагины. Используйте самые актуальные версии CMS и плагинов и следите, чтобы они работали на последней версии PHP. С помощью онлайн-инструментов проверяйте плагины на предмет использования памяти и влияния на скорость загрузки:

Чеклист оптимизации загрузки сайта

Подобьем итоги — почему важно улучшать показатели загрузки сайта и удобства страниц:

• Медленная загрузка веб-страниц несомненно портит впечатление о сайте и негативно влияет на конверсию, но не делайте ставку только на улучшение скорости — анализируйте и отслеживайте метрики, напрямую влияющие на взаимодействие пользователей с сайтом. Сигналы удобства страниц должны быть в центре вашего внимания, ведь они в приоритете Google и будут напрямую влиять на ранжирование с мая 2021 года.
• Метрики Core Web Vitals оценивают то, как быстро страница становится доступной и интерактивной, и здесь важна не скорость загрузки всей страницы, а скорость рендеринга первого экрана. Хорошими показателями считаются LCP до 2.5 секунды, FID до 100 миллисекунд и CLS до 0.1. Измеряйте их и в тестовой среде, и с учетом данных реальных пользователей.
• Отслеживая сигналы удобства страниц, вы будете лучше понимать, что нужно исправить для оптимизации скорости. Среди основных действий, улучшающих загрузку, — минификация кода, оптимизация изображений и выбор подходящего хостинга. Регулярно запускайте проверку своего сайта, чтобы вовремя реагировать на проблемы, влияющие на загрузку.

Google PageSpeed Insights: как провести аудит скорости сайта

Google PageSpeed Insights измеряет скорость загрузки сайтов и работу веб-страниц. От этих показателей зависит позиция сайта в поисковой выдаче, а также глубина просмотров и конверсия. Медленная загрузка страниц раздражает пользователей, и они покидают веб-ресурс, так и не дождавшись полного отображения информации. Рассказываем, как анализировать и повышать скорость загрузки сайта на десктопных и мобильных устройствах с помощью Гугл Пейдж Спид Инсайтс.

Что такое Google PageSpeed Insights

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

Как работает

• время демонстрации первой части страницы;
• задержки при загрузке;
• окончание работы центрального процессора (ЦП);
• скорость загрузки;
• период загрузки до начала взаимодействия.

Максимальный балл, который можно набрать по одному показателю, — 100. Хорошим считается результат от 80 баллов.

PageSpeed Insights помогает рассчитать время, необходимое сайту для полной подготовки к взаимодействию с пользователем. Однако следует понимать, что этот инструмент — не в полной мере про скорость:

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

Есть много примеров, когда топ выдачи занимают сайты с вопиюще низким показателем скорости загрузки страниц, а сайты на одном HTML без каких-либо удобств и функций получают в PageSpeed Insights почти 100 баллов.

Проверим на запросе «авиабилеты».

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

А сайт Артемия Лебедева, который посвящен Московскому метрополитену и написан на HTML, по мнению PageSpeed Insights, идеален.

Подробнее о скорости загрузки сайта читайте в нашей статье.

Сквозная аналитика
Оценивайте эффективность всех рекламных кампаний в одном окне от клика до ROI
Вкладывайте в ту рекламу, которая приводит клиентов

Обновление алгоритмов Google PageSpeed Insights

Летом 2020 года Google запустил новый алгоритм Speed Update, по которому поисковая система учитывает скорость загрузки сайта при ранжировании. Изменения продолжились в ноябре — сервис начал работать на базе Lighthouse. Это инструмент для аудита с открытым исходным кодом, помогает разработчикам улучшать производительность веб-страниц. Раньше сервис оценивал сайты в соответствии с определенными условиями и выполнением поставленных задач. Теперь высокий балл присуждается только за скорость загрузки.

Также появилась функция раскадровки — на слайдах видно, в каком порядке загружается контент на сайте. Гугл Пейдж Спид анализирует изображения на страницах и рекомендует форматы более легких по весу файлов.

Маркетинг

Читайте также:

Руководство по созданию мобильной версии сайта

Руководство по созданию мобильной версии сайта

Как ускорить загрузку сайта на любых устройствах

Google PageSpeed Insights помогает оптимизировать загрузку страниц: инструмент показывает, какие недостатки тормозят работу сайта и как их можно исправить.

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

Пейдж Спид Инсайтс дает рекомендации по оптимизации изображений. Чтобы картинки не тормозили работу сайта, можно предпринять следующие меры:

• Предварительная оптимизация

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

Используйте графический редактор: в идеале Photoshop, на крайний случай Paint. У первого есть параметры сохранения картинок в формате WebP, что улучшает качество оптимизации.

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

Для сайта calltouch.ru Google советует сменить формат ряда изображений. Он говорит, что JPEG 2000, JPEG XR и WebP более оптимизированы для веба, нежели используемые нами PNG.

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

Для размещения фотографий используйте JPEG. Иллюстрации и техническую графику сохраняйте в PNG. Векторным изображениям идеально подходит SVG.

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

• https://tinypng.com/;
• https://jpegmini.com/;
• https://compressor.io/.

Эти сервисы дают сжатие от 30% до 80% без визуальных дефектов.

• Использование атрибутов с правильным размером

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

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

Оптимизация JavaScript и CSS

Google PageSpeed Insights, как правило, рекомендует сокращать JavaScript и CSS. Обычно это совет перенести скрипты и стили в футер. Но не спешите следовать этим рекомендациям.

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

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

Впрочем, есть несколько способов облегчить код и ускорить загрузку страниц.

Чтобы не прибегать к ручной правке, воспользуйтесь онлайн-инструментами сжатия файлов стилей, например CSScompressor. В нем есть 3 степени сжатия: Light, Normal, Super Compact, и 3 варианта сокращения комментариев: не удалять, удалить все, удалить комментарии определенной длины. Доступен Advanced Mode для профессиональных настроек.

Последний вариант сжатия — Super Compact — превращает код в строку. Используйте его только в том случае, если уверены, что файл стилей содержит окончательные данные.

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

Для этой задачи подойдет инструмент Online YUI Compressor. Его можно использовать и для облегчения CSS.

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

• Загрузка контента из Google CDN

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

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

Привлекайте, конвертируйте
и анализируйте ваших клиентов
Платформа омниканального маркетинга

Gzip-сжатие

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

Gzip-сжатие бывает динамическим и статическим.

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

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

Использование кеша

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

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

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

Заголовки Last-Modified и ETag обеспечивают обновление кешированных файлов. При загрузке сайта браузер отправляет GET-запрос и получает ответ 304 — он означает отсутствие изменений и разрешение на использование контента с устройства. На компьютере пользователя чаще всего хранятся файлы изображений, стилей и скриптов.

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

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

Какие параметры важны при измерении скорости сайта

Есть несколько основных параметров, по которым оценивают скорость загрузки сайта. Рассказываем об основных из них.

Largest Contentful Paint (LCP)

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

Время ответа сервера

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

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

Это время с момента открытия страницы до загрузки первого элемента — текстового блока или картинки. Оптимальный показатель — 2–3 секунды, идеальный — 0,5 секунды. Если пользователь увидит белый экран, он может подумать, что сайт не работает, или просто не захочет ждать и закроет страницу.

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

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

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

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

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

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

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

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

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

Приблизительное время задержки при вводе

Этот показатель демонстрирует среднее время отклика страницы на действия посетителей в первые 5 секунд загрузки. Если страница реагирует на запрос дольше 50 миллисекунд, пользователь думает, что сайт «тормозит». Это наименее значимая характеристика при оценке скорости страниц сайта.

Маркетинг

Читайте также:

Что такое заспамленность текста и как ее уменьшить

Что такое заспамленность текста и как ее уменьшить

Заключение

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