При доступе к моему сообщению в блоге начальным контентом, который обычно появляется, в зависимости от вашего местоположения, является заголовок. Впоследствии остальной контент загружается синхронно до тех пор, пока не отобразятся все элементы и вы не сможете прочитать текст. Время, необходимое для загрузки первого контента, который может включать изображения (в том числе фоновые изображения), элементы ‹svg› или небелые элементы ‹canvas›, оказывает значительное влияние на первоначальное впечатление пользователя. Если первый контент загружается слишком долго, пользователи могут счесть веб-сайт не отвечающим и немедленно закрыть его. Это широко известно как первая содержательная краска.

ВРЕМЯ, ТРЕБУЕМОЕ ДЛЯ ОТОБРАЖЕНИЯ ПЕРВОГО СОДЕРЖИМОГО СТРАНИЦЫ ПЕРЕД ЭКРАНОМ ПОЛЬЗОВАТЕЛЯ.

Улучшение показателя First Contentful Paint (FCP) имеет решающее значение для создания впечатления о быстро загружаемом веб-сайте. FCP — это время, необходимое для отображения первой части содержимого веб-страницы на экране пользователя. Важно отметить, что, хотя веб-сайт может иметь довольно быстрый FCP, он может иметь медленную отрисовку самого большого содержимого (LCP), которая относится к времени, которое требуется для отображения самого большого содержимого на странице в объектной модели документа. (ДОМ).

Чтобы повысить производительность веб-сайтов, необходимо провести комплексный аудит и внести улучшения во все важные показатели Google Web Core. По данным Google, в то время как хороший показатель FCP составляет от 0 до 1,8 секунды, удовлетворительный результат составляет от 1,8 до 3,0 секунд, а плохой результат составляет 3 секунды и более.

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

ИНСТРУМЕНТЫ ДЛЯ ИЗМЕРЕНИЯ FCP

Существуют разные инструменты, используемые для измерения FCP, основанные на двух разных условиях (полевые измерения и лабораторные измерения).

Лабораторные испытания

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

  • Инструменты разработчика Chrome
  • Маяк
  • Анализ PageSpeed
  • Веб-страницатест

Полевые испытания

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

  • Отчет о пользовательском опыте Chrome
  • Search Console (отчет Core Web Vital )