С момента появления Lighthouse появились новые параметры, связанные со скоростью страницы. Одним из наиболее важных из этих параметров является First Contentful Paint (FCP). В версии Lighthouse 10, действующей с июня 2024 г., влияние FCP на общий балл составляет 10 %..
Чтобы принять и понять FCP как показатель, важно сначала изучить лежащую в его основе психологию. Концепция аналогична зеркала установлены в лифтах:
Подведем краткий итог: в первой половине 1900-х годов использование лифтов в высотных зданиях значительно возросло, но лифтовые системы были примитивными по сравнению с сегодняшними днями. Поэтому и возникла идея установить в лифтах зеркала, чтобы время, проведенное в лифте, ощущалось короче.
Возвращаясь к нашей теме: точка, которая по восприятию заставляет вас ждать во время загрузки при попытке доступа к странице, — это FCP. Определение первой содержательной отрисовки — это время, необходимое для отображения пользователю первого текста, изображения, небелого холста и т. д.. Единица измерения FCP — секунды.
В Lighthouse цветовая шкала для FCP определяется следующим образом:
- 0-2 секунды: Зеленый => Быстро
- 2-4 секунды: Оранжевый => Требует улучшения
- 4+ секунд: Красный => Медленно
По данным HTTP-архива, количество сайтов, которые можно считать быстро — 25%, а 50% существующих сайтов относятся к категории медленных.
Что можно сделать для улучшения FCP?
Уменьшить время отклика сервера
В целом это можно интерпретировать как необходимые улучшения на стороне сервера и программного обеспечения. Чтобы перечислить проблемы, которые отрицательно влияют на время ответа сервера:
- Проблема может заключаться в общем доступе к серверу, его конфигурации (т. е. настройках сервера) и ресурсах сервера.. Мощность вашего сервера должна быть увеличена в соответствии с вашим трафиком. В некоторых случаях плохо написанные запросы к базе данных и очень сложные программные компоненты могут серьезно повлиять на время ответа сервера.
- Неиспользование CDN (сети доставки контента) может привести к задержкам доступа к контенту, что повлияет на FCP.. По мере увеличения размера контента, например, если большой анимированный GIF-файл или видео пытаются вызвать без CDN, а главный сервер находится на другом континенте, вам может потребоваться рассмотреть решения CDN для разрешения FCP.
- Если не предоставлять статический контент с помощью правильной и последовательной политики кэширования, это может привести к перегрузке. ваш сервер без необходимости, так как количество посетителей увеличивается. Например, если вы не сохраняете свой логотип в долговременном кеше при его загрузке на каждой странице, вы неоправданно ухудшаете время отклика вашего сервера.
- Ненужные перенаправления страниц хотя доступ к странице может излишне повлиять на ваш FCP.
Например, раньше были такие настройки: когда пользователь хотел войти на сайт, выполнялось перенаправление HTTP на HTTPS, затем, если он был мобильным, перенаправление HTTPS на мобильный (например, https:// с www на https://m), а если страницу удаляли и перенаправляли в другое место с кодом 301, создавалось ощущение, будто пользователя передавали от стола к столу в налоговой инспекции. Это крайний пример для лучшего понимания, но если вы перенаправляете страницу на другой URL-адрес с помощью редиректа 301, а затем перенаправляете эту страницу на другую с помощью 301, вы можете сделать ту же нелогичную настройку.
- если ты не используйте предварительное подключение или предварительную выборку DNS префиксы при подключении к своим сторонним сервисам и подключении ко многим сторонним сервисам, вы не делаете ничего полезного для FCP.
Уменьшите ресурсы, блокирующие рендеринг
Я должен признать, что рассмотрение этого единственного пункта, записанного в виде отдельной статьи, может занять месяцы.
Для этого существует метод решения, при котором все JS, CSS и подобные ресурсы, которые блокируют рендеринг страницы, загружаются после времени создания страницы, но изначально видимая часть сайта загружается первой во время загрузки сайта.. Однако для этого необходимо изучить все JS, CSS и подобные ресурсы, а наиболее трудоемкие процессы разделить. Кроме того, использование как можно меньшего количества сторонних сервисов помогает оптимизировать FCP.
