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

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

В этой статье я объясню, что такое FCP, почему он важен и как проверить свой сайт на соответствие этому показателю. Затем покажу вам, как улучшить показатели First Contentful Paint (FCP) в WordPress.

Что такое First Contentful Paint (FCP) ?

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

First Contentful Paint (FCP) — одна из метрик отчета Google Lighthouse. Метрики Google Lighthouse оценивают пользовательский опыт сайта и включают в себя:

Лабораторные данные (Lab Data)

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

1. First Contentful Paint (FCP): Время, за которое браузер отображает первый видимый контент на экране.
2. Largest Contentful Paint (LCP): Время, за которое браузер отображает крупнейший видимый элемент контента на экране.
3. First Input Delay (FID): Время, в течение которого браузер реагирует на первое взаимодействие пользователя с сайтом.
4. Cumulative Layout Shift (CLS): Мера визуальной стабильности страницы. Измеряет, насколько элементы на странице смещаются во время загрузки.
5. Time to Interactive (TTI): Время, за которое страница становится полностью интерактивной.
6. Total Blocking Time (TBT): Общее время, в течение которого страница блокируется и не может отвечать на взаимодействие пользователя.
7. Speed Index: Мера того, насколько быстро контент становится видимым на странице.

Полевые данные (Field Data)

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

1. First Contentful Paint (FCP): Время, за которое браузер отображает первый видимый контент на экране.
2. Largest Contentful Paint (LCP): Время, за которое браузер отображает крупнейший видимый элемент контента на экране.
3. First Input Delay (FID): Время, в течение которого браузер реагирует на первое взаимодействие пользователя с сайтом.
4. Cumulative Layout Shift (CLS): Мера визуальной стабильности страницы. Измеряет, насколько элементы на странице смещаются во время загрузки.

WordPress разработчик должен работать над улучшением всех этих показателей, чтобы улучшить пользовательский опыт. И хотя First Contentful Paint не является основным основным показателем Google Page Speed, это дополнительная метрика, которая может помочь вам выявить и улучшить проблемы с загрузкой и пользовательским опытом.

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

First Contentful Paint (FCP) и пользовательский опыт

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

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

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

Если же посетитель видит только пустой экран или белый экран, то скорее всего он просто перейдет на другой сайт.

Что влияет на FCP или First Contentful Paint

По мнению Google, идеальный показатель FCP должен составлять менее 1,8 секунды. Если у вас низкий показатель, это может быть результатом нескольких факторов:

1. Медленное время отклика сервера: Если ваш сайт имеет высокий показатель Time to First Byte (TTFB), это может повлиять на First Contentful Paint.
2. Блокирующие рендеринг JavaScript и CSS: Неэффективная очередь сценариев может приостановить процесс рендеринга до тех пор, пока не будут обработаны тяжелые сценарии.
3. Очереднось загрузки стилей и скриптов: Важно что бы сначала загружались стили с очередью как элементы на странице, в футер переносится загрузка скриптов с очередью как у элементов на станице, очень важно соблюдать очередность как у элементов на странице.
4. Lazy Loading изображений: Хотя ленивая загрузка изображений может повысить скорость страницы, этот процесс использует JavaScript, что может увеличить FCP.
5. Неэффективная загрузка шрифтов: Шрифты могут иметь громоздкие файлы, которые задерживают отрисовку текста.
6. Много Document Object Model (DOM): слишком большое количество элементов с DOM может привести к неэффективной загрузке страницы.

Как проверить First Contentful Paint вашего сайта

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

Google PageSpeed Insights

Вы можете просто ввести URL-адрес своего сайта и мгновенно проанализировать его показатели Core Web Vitals.

Ниже прилагаю скриншоты с показателями моего сайта с показателями First Contentful Paint (FCP) поскольку сейчас мы разбираемся как оптимизировать именно этот показатель.

Анализ моего сайта для мобильных устройств

Анализ моего сайта для десктопов

Как мне удалось достигнуть таких показателей

На самом деле все просто и я следовал рекомендациям Google Developers и применил немного практических знаний.

Время отклика сервера

Мой сайт не требует точной аналитики для WooCommerce и я выбрал самый дешовый тариф c шаред хостинг, по мощности как для персонального почтового ящика. Из приемуществ у хостинга только memcached, GZIP сжатие и хороший дата центр с uptime 99,99%, так же на сайте включено кэширование с помощью WP Super Cache.

При увеличение трафика можно перенести ресурсы вендоров(скрипты, стили, шрифты) на CDN Cloudflare и сам сайт начать проксировать через сервера Cloudflare, это доступно даже на бесплатном тарифе в Cloudflare.

Сейчас этого не делаю, поскольку на сайте небольшой трафик и по анализу из Google Page Speed было видно, что скорость для пользователей в России лучше при прямом размещение у текущего хостинг провайдера, я пробовал как с переносом ресурсов вендоров в Cloudflare так и без, только проксирование.

Уточняю: у меня shared хостинг и скорость загрузки по Google Page Speed может различатся, в разное время суток, взависимости от общей нагрузки на сервер, днем трафик больше и скорость загрузки дольше.

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

Отрисовка контента

Загрузка скриптов для счетчиков аналитики произведена через Google Tag Manager и скрипты загружаются только после любого действия пользователя на сайте.

Для самого скрипта Google Tag Manager выбран метод data-wp-strategy=async и это немнго блокирует отрисовку сайта, однако предоставляет более точную аналитику.

Я полностью отказался от испоьзования JQuery для фронтэнд и это ускорило загрузку сайта.

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

Скрипты вендоров и темы я загружаю в футере, так же в файле скриптов темы есть проверка на наличие скрипта на странице и срабатывают только те скрипты что есть на текущей странице, скрипты загружаю с атребутом data-wp-strategy=defer.

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

Зависимости и очередность загрузки

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

Очередность загрузки стилей формируется исходя из расположения Gutenberg Blocks на странице сайта.

Загрузка картинок

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

Так же картинки имеют тег Lazy и это значит что для них будет активирован функционал Lazy Loading по умолчанию, для картинок находящихся в верхней области просмотра выбран тип загрузки loading=eager.

Шрифты

Для шрифтов используется современный формат Woff2, в предыдущих версиях браузеров автоматически Woff

Так же для шрифтов включена предварительная приоритетная загрузка и добавлен атребут font-display: swap; в файле подключения.

Использование Document Object Model (DOM)

Google требует соблюдать глубину(Depth) вложенности для дочерних элементов взаимодействия и делать обработки циклов не более чем из 17 элеменов, у меня 20.

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