FCP, она же First Contentful Paint, она же Первая Отрисовка Контента – показатель, помогающий оценить, насколько быстро загружается та или иная страница.
Метрика фиксирует время от начала запроса до момента, когда пользователь видит на экране первый элемент – например, текст или изображение.
Выглядит это так:
Первой отрисовкой контента скриншоте можно считать момент появления поисковой строки и запроса в ней. Все, что подгружается далее, к показателю отношения не имеет.
Почему FCP вообще важен
От того, насколько быстро на экране появится хоть какой-нибудь значимый элемент, целиком и полностью зависит первое впечатление. Так, если контент загружается медленно, посетитель решит, что сайт тормозит (и правильно сделает), и просто покинет его, не выполнив никаких целевых действий.
Цифры тут говорят за себя: больше половины (53%, если еще точнее) не станут ждать и трех секунд. К примеру, Amazon подсчитал, что замедление загрузки всего на секунду обходится им в 1,6 миллиарда долларов ежегодно. А Google, в свою очередь, выяснил, что ускорение даже на 0,1 секунды поднимает конверсию – в среднем по палате – на целых 8%. Так что, в идеале, первый элемент должен загружаться или моментально или не дольше одной секунды.
Полезна быстрая загрузка и с точки зрения SEO – поисковой оптимизации. Так, быстрые сайты лучше ранжируются и получают более высокие позиций в поисковой выдаче – те самые результаты поиска, которые показываются после вбитого запроса в Google, Яндексе и т.д.
Где и как узнать показатель FCP
Это можно сделать с помощью Google Page Speed Insights. В инструменте достаточно ввести URL-адрес для анализа – система сама сформирует отчет, который будет включать не только FCP, но и другие показатели: LCP, FID и CLS.
У нас, кстати, есть статьи и по ним. Ознакомиться можно здесь и здесь.
Как можно улучшить FCP
Вариантов много. Пройдемся по наиболее результативным и целесообразным.
Кэширование
При включении кэширования копия сайта будет создаваться, сохраняться и передаваться следующим пользователям. Это снизит нагрузку на всервер, поскольку тому не нужно будет генерировать страницы с нуля для каждого нового посетителя.
Отказ от кучи ненужных перенаправлений
Перенаправления (они же редиректы) замедляют скорость загрузки. Когда браузер делает запрос на страницу, которая по каким-либо причинам сменила адрес, сервер возвращает код ошибки 301. После этого браузер должен сделать еще один запрос, что закономерно приводит к задержке. Не столь ужасной, поскольку речь обычно идет о милисекундах, но тем не менее.
Оптимизация изображений
Еще один вариант – оптимизация мультимедийного контента. Например, картинок. Если слишком «тяжелые» (много весят), то будут тормозить отображение контента. Иной раз достаточно серьезно. Исправить это можно, сжав их. Проще всего сделать это с помощью сервисов в духе TinyPNG или Optidash. Просто примеры: на рынке их много, и все они работают по +- схожему принципу.
Также можно рассмотреть «ленивую загрузку». Это метод, при котором часть контента на странице загружается не сразу, а только тогда, когда пользователь приближается к этой самой части при прокрутке. Например, при первом открытии сайта браузер загружает только основную структуру: текст и стили, а тяжелые элементы (изображения в нижней части) подгружаются по мере необходимости.
Использование CDN
CDN (Content Delivery Network, или Сеть Доставки Контента) – система серверов, распределенных по разным регионам мира. Ее задача – доставлять контент пользователям максимально быстро, где бы те ни находились.
Как это работает: обычно, когда вы открываете сайт, запрос идет напрямую к основному серверу. И если он расположен за тысячи километров, загрузка может затянуться. Представьте, что сервер в Китае, а вы, скажем, находитесь в России. Буквально каждый клик будет медленнее – и ощутимо. А когда CDN есть, то он автоматически перенаправит пользователя его к ближайшему серверу. Контент будет грузиться в разы быстрее.
Помогает CDN и с перераспределением нагрузки. Если система доставки есть, то даже при большом наплыве посетителей сайт останется стабильным.
