Объяснение самой крупной содержательной краски: как улучшить свое время

Боретесь с тем, как улучшить Largest Contentful Paint на своем веб-сайте? Или не знаете, что означает Largest Contentful Paint и почему вам вообще нужно об этом заботиться?

Независимо от того, с чего вы начинаете, этот пост для вас, потому что вы узнаете все, что вам нужно знать о Largest Contentful Paint.

Это включает в себя то, что означает «наибольшая содержательная отрисовка», почему это важно, как ее измерить и как ее улучшить.

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

Что такое самая большая содержательная краска (LCP)? Объяснение значения крупнейшей содержательной краски

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

Крупнейшая содержательная отрисовка является частью показателей Google Core Web Vitals, наряду с кумулятивным смещением макета (CLS) и задержкой первого ввода (FID).

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

Что означает «основной контент» с точки зрения LCP?

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

• Текст — точнее, любые элементы блочного уровня, содержащие текстовые узлы или другие текстовые элементы встроенного уровня.
• Изображение — элементы внутри элемента <img> или элементы <image> внутри элемента <svg>.
• Видео — любые элементы <video> (использует изображение постера).
• Элемент с фоновым изображением — только при загрузке через функцию CSS url() (не относится к градиентам CSS).

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

Самая большая содержательная отрисовка против первой содержательной отрисовки

У вас может возникнуть один общий вопрос: в чем разница между самой большой отрисовкой с контентом и первой отрисовкой с контентом, еще одной общей метрикой производительности.

Хотя эти два термина схожи, ключевое отличие состоит в том, что «Самая большая отрисовка по содержанию» измеряет, сколько времени требуется для загрузки «основного содержимого» страницы, а «Первая отрисовка по содержанию» измеряет, сколько времени требуется для загрузки «первого объекта» ( независимо от того, это основное содержание ).

По сути:

• LCP = только основной контент
• FCP = первая часть контента, независимо от того, что это за контент

Таким образом, ваше время LCP почти всегда будет немного выше, чем ваше время FCP, потому что элемент «основной контент» обычно не загружается первым.

Почему самое большое время отрисовки контента на вашем сайте имеет значение?

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

1. Пользовательский опыт
2. Поисковая оптимизация

Пользовательский опыт

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

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

Largest Contentful Paint хорошо справляется с попытками измерить этот «ценный» момент, наблюдая, сколько времени требуется для загрузки основного контента.

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

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

Поисковая оптимизация (SEO)

Что касается поисковой оптимизации, то Largest Contentful Paint является частью трех показателей Google Core Web Vitals, которые Google начал использовать в качестве фактора ранжирования SEO в своем обновлении алгоритма Page Experience 2022 года.

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

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

Что может повлиять на самые высокие баллы Contentful Paint?

Два «основных» типа проблем могут повлиять на максимальное время отрисовки страницы:

1. Сколько времени требуется вашему серверу, чтобы ответить исходным HTML-документом.
2. Сколько времени требуется фактическому ресурсу LCP для загрузки.

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

Вот некоторые из распространенных проблем, которые влияют на это:

• Не использовать кэширование страниц — неиспользование кэширования страниц заставляет сервер выполнять больше «работы», прежде чем он сможет ответить HTML-документом.
• Медленный хостинг — у медленного хостинг-провайдера всегда будет медленный TTFB, независимо от того, что вы делаете.
• Без использования CDN — сеть доставки контента (CDN) может ускорить TTFB, обслуживая страницы из своей глобальной сети, вместо того, чтобы требовать от пользователей загрузки их с исходного сервера вашего сайта.

После того, как сервер вашего сайта доставит первоначальный HTML-документ, могут возникнуть дополнительные узкие места, когда дело доходит до загрузки фактического основного элемента контента.

Вот некоторые из распространенных проблем, которые влияют на это:

• Блокирующий рендеринг JavaScript или CSS (или вообще неоптимизированный/ненужный код) — если браузеру пользователя необходимо загрузить и/или обработать ненужный JavaScript или CSS, прежде чем он сможет загрузить основной элемент, это замедлит работу LCP.
• Неоптимизированные изображения — если элемент LCP является изображением, использование неоптимизированных изображений замедлит ваше время, поскольку для загрузки больших изображений требуется больше времени.
• Загрузка неоптимизированного шрифта — если элемент LCP является текстом, загрузка пользовательских шрифтов неоптимизированным способом может привести к увеличению времени появления этого текста.
• Несжатые файлы — если вы не используете технологии сжатия, такие как Gzip или Brotli, браузеру пользователя потребуется больше времени для загрузки файлов вашего сайта.

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

Что такое хорошее максимальное время рисования контента?

Google определяет «хорошее» самое большое время отрисовки контента как менее 2,5 секунд.

Если максимальное время отрисовки содержимого вашей страницы составляет от 2,5 до 4,0 секунд, Google классифицирует это как «Требует улучшения». И если время вашей страницы превышает 4,0 секунды, Google определяет это как «Плохо».

Вот рисунок от Google, который показывает это визуально:

Как измерить самую большую содержательную краску: лучшие инструменты тестирования LCP

Существует ряд инструментов, которые вы можете использовать для проверки производительности вашего сайта для Largest Contentful Paint — давайте рассмотрим некоторые из наиболее полезных…

Статистика PageSpeed

PageSpeed ​​Insights — один из лучших инструментов для оценки самого большого содержания, поскольку он предлагает четыре полезных элемента информации:

1. Вы можете увидеть самое большое время отрисовки содержимого вашего сайта с реальными пользователями из отчета Chrome UX ( если на вашем сайте достаточно трафика для включения в отчет ).
2. Вы можете запустить смоделированные тесты, чтобы увидеть, как работает ваш сайт.
3. Google сообщит вам фактический элемент LCP, который он использует для теста, что позволит вам узнать, какой элемент оптимизировать.
4. Google предоставит предложения о том, как улучшить время LCP.

Вот как это использовать:

1. Перейдите на сайт PageSpeed ​​Insights.
2. Введите URL-адрес страницы, которую вы хотите протестировать.
3. Щелкните Анализировать .

Затем Google покажет вам результаты как для мобильных устройств, так и для компьютеров — обязательно проверьте оба варианта.

Чтобы найти основной элемент, который Google использует для расчета LCP, вы можете прокрутить вниз до раздела «Диагностика» и развернуть раздел «Самый большой элемент Contentful Paint» :

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

Инструменты разработчика Chrome

Вы также можете протестировать самое большое время отрисовки содержимого непосредственно из инструментов разработчика Chrome, используя вкладку «Производительность» или функцию аудита Lighthouse. Мы рекомендуем использовать вкладку «Производительность» , так как она дает вам больше информации.

Вот как начать:

1. Откройте страницу, которую хотите протестировать.
2. Откройте Инструменты разработчика Chrome.
3. Перейдите на вкладку Производительность .
4. Убедитесь, что флажок Web Vitals установлен.
5. Нажмите кнопку «Перезагрузить» ( отмечено ниже ).

Теперь вы должны увидеть полный анализ вашего сайта.

Если навести курсор на LCP во вкладке Network , можно увидеть время:

Если вы наведете курсор на LCP на вкладке «Тайминги» , вы увидите фактический элемент LCP:

Консоль поиска Google

Хотя Google Search Console не позволяет протестировать отдельную страницу на предмет максимального времени отрисовки контента, она действительно полезна для оценки производительности всего сайта.

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

С помощью Google Search Console вы сможете увидеть, где каждая страница вашего сайта находится в категориях Google «Хорошо», «Требует улучшения» и «Плохо». Данные о производительности взяты из отчета Chrome UX, поэтому они основаны на реальных пользовательских данных.

Если вы еще этого не сделали, вам сначала необходимо подтвердить свой сайт с помощью Google Search Console.

Как только вы это сделаете, вот как получить доступ к отчету LCP:

1. Откройте Google Search Console для своего сайта.
2. Перейдите в Core Web Vitals на вкладке «Опыт» .
3. Нажмите «Открыть отчет» рядом с диаграммой для мобильных или настольных компьютеров.
4. Ищите любые проблемы в разделе «Почему URL-адреса не считаются хорошими» . Если вы нажмете на проблему, вы увидите больше информации о том, какие URL-адреса вызывают проблемы.

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

Веб-страницаТест

WebPageTest — еще один удобный вариант для запуска симулированных тестов производительности.

В отличие от PageSpeed ​​Insights, WebPageTest позволяет полностью настраивать различные показатели тестирования, такие как место тестирования, скорость соединения, устройство и многое другое. Это основное преимущество его использования по сравнению с другими инструментами — он дает вам больше возможностей для настройки теста.

Вот как запустить тест:

1. Перейдите в WebPageTest.
2. Добавьте URL-адрес страницы, которую вы хотите протестировать.
3. Разверните параметры расширенной конфигурации , чтобы полностью настроить тест.

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

Как найти самый большой содержательный элемент Paint

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

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

Как мы упоминали ранее, вы можете найти самый большой элемент Contentful Paint с помощью PageSpeed ​​Insights или Chrome Developer Tools.

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

Как улучшить самую большую содержательную отрисовку в WordPress (или других платформах)

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

Хотя в этих советах мы сосредоточимся на WordPress, все советы универсальны и применимы к другим типам веб-сайтов.

Настройте кэширование, чтобы улучшить время отклика сервера

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

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

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

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

Перейдите на более быстрый хостинг WordPress

Хотя все тактики в этом списке могут помочь вам улучшить время LCP, ходить вокруг да около:

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

Возможно, вы сможете немного улучшить ситуацию, но вам всегда будет сложно достичь времени LCP менее 2,5 секунд, если ваш хост медленный.

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

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

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

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

Используйте сеть доставки контента (CDN)

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

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

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

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

Функция краевого кэширования Kinsta работает путем кэширования полных HTML-страниц и статических ресурсов вашего сайта в глобальной сети Cloudflare ( а не просто кэширования статических ресурсов, как в большинстве решений CDN ).

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

Чтобы включить кеширование Edge в Kinsta, перейдите на вкладку Edge Caching на панели управления вашего сайта в MyKinsta.

Если вы размещаете где-то еще, вы можете настроить CDN для статических ресурсов вашего сайта, используя популярные сервисы CDN, такие как KeyCDN, Bunny, StackPath и другие.

Избегайте блокирующего рендеринг JavaScript (отложить или удалить)

JavaScript, блокирующий рендеринг, — это JavaScript, который загружается перед вашим основным элементом LCP, даже если в данный момент он не нужен.

Откладывая загрузку элемента LCP, вы замедляете время загрузки LCP.

Чтобы исправить это, есть несколько стратегий, которые вы можете реализовать:

• Удалите ненужный JavaScript, если это возможно.
• Отложите JavaScript, чтобы он не блокировал загрузку основного элемента вашего сайта.
• Отложите JavaScript до тех пор, пока пользователь не взаимодействует с вашим сайтом.

Для большинства людей самый простой способ реализовать эту функцию — использовать такие плагины, как Autoptimize или WP Rocket.

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

• Как устранить ресурсы, блокирующие рендеринг, в WordPress
• Как отложить парсинг JavaScript

Избегайте блокировки рендеринга CSS и оптимизируйте доставку CSS

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

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

Если вы не разработчик, самый простой способ добиться этого — использовать плагины для оптимизации производительности, такие как Perfmatters, WP Rocket или FlyingPress.

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

Если вы хотите более подробно изучить, как все это сделать, ознакомьтесь с нашим полным руководством по оптимизации CSS.

Сократите свой HTML, CSS и JavaScript

В дополнение к методам оптимизации кода, описанным выше, вы также захотите минимизировать HTML, CSS и JavaScript вашего сайта.

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

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

1. Откройте панель управления вашего сайта в MyKinsta.
2. Перейдите на вкладку CDN .
3. Нажмите «Настройки» рядом с «Оптимизация изображения».
4. Установите галочки для CSS и JS и сохраните настройки.

Если вы размещаете свой сайт в другом месте, вы можете использовать бесплатный плагин, такой как Autoptimize, для минимизации кода или один из комплексных плагинов премиум-класса, таких как Perfmatters, WP Rocket или FlyingPress.

Или ознакомьтесь с нашим полным руководством по минимизации кода, чтобы узнать больше. Хотя руководство посвящено JavaScript, вы можете использовать те же методы и плагины для минимизации другого кода.

Используйте сжатие на уровне сервера (Gzip или Brotli)

Сжатие на уровне сервера позволяет уменьшить размер файлов вашего сайта с помощью таких технологий, как Gzip или Brotli.

Например, сжатие, которое мы используем для веб-сайта Kinsta, уменьшило размер файла домашней страницы Kinsta на 85,82%.

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

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

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

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

1. Откройте свой сайт в панели инструментов Cloudflare.
2. Перейдите в раздел «Скорость» → «Оптимизация» в боковом меню.
3. Включите переключатель Brotli .

Сжатие и изменение размера изображений

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

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

Этот подход обычно является передовой практикой оптимизации производительности — он не относится только к Largest Contentful Paint.

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

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

Вот как включить эту функцию:

1. Откройте панель управления вашего сайта в MyKinsta.
2. Перейдите на вкладку CDN .
3. Нажмите «Настройки» рядом с «Оптимизация изображения».
4. Выберите предпочитаемый уровень оптимизации изображения и сохраните настройки — использование Lossy обеспечит наибольшие улучшения скорости, хотя это может незначительно повлиять на качество изображения.

Предварительно загрузите самое большое содержательное изображение Paint

Если ваш элемент LCP является изображением, другой стратегией улучшения LCP является предварительная загрузка самого большого изображения Contentful Paint. Вот почему вы можете увидеть в PageSpeed ​​Insights такую ​​рекомендацию, как «Предварительно загрузить самое большое изображение Paintful Contentful».

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

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

Для этого на WordPress.org также есть несколько бесплатных плагинов, таких как плагин WPZOOM Preload Featured Images, а также другие плагины премиум-класса, такие как FlyingPress.

Проверьте наличие проблем с ленивой загрузкой

Еще одна проблема, которая может вызвать сообщение «Предварительно загрузить самое большое изображение Contentful Paint» в PageSpeed ​​Insights, — это проблемы с тем, как ваш сайт WordPress лениво загружает изображения.

Или это также может вызвать предупреждение «Самое большое изображение Contentful Paint было лениво загружено» в PageSpeed ​​Insights.

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

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

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

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

Однако, если вы используете подключаемый модуль отложенной загрузки на основе JavaScript, вам может потребоваться вручную настроить это исключение в настройках подключаемого модуля. Например, плагин Perfmatters включает опцию, позволяющую исключить первые изображения «X» из отложенной загрузки.

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

Оптимизация загрузки шрифтов с помощью Font-Display: необязательно

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

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

Чтобы исправить это, вы можете использовать Font-Display: опциональный дескриптор CSS.

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

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

В качестве альтернативы вы также можете использовать Font-Display: Swap, который сразу же загружает резервный шрифт, а затем «заменяет» пользовательский шрифт после загрузки пользовательского шрифта. Однако этот подход может вызвать проблемы с кумулятивным смещением макета, если шрифты имеют разные размеры, поэтому вам нужно быть осторожным.

Если ваш пользовательский шрифт не является абсолютно необходимым для дизайна вашего веб-сайта, использование Font-Display: Optional обычно является лучшим вариантом с точки зрения Core Web Vitals.

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

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

• Asset CleanUp — поддерживает бесплатные шрифты Google и пользовательские локальные шрифты в версии Pro.
• Perfmatters — предлагает функцию для Google Fonts.

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

1. Перейдите в Элементор → Настройки .
2. Откройте вкладку «Дополнительно» .
3. В раскрывающемся списке «Загрузка шрифтов Google» установите значение «Необязательный» .

Резюме

Изучение того, как улучшить Largest Contentful Paint, важно для улучшения пользовательского опыта вашего сайта и максимизации вашего рейтинга в поисковых системах.

Как правило, улучшение Largest Contentful Paint состоит из двух частей: ускорение времени отклика вашего сервера и оптимизация кода вашего сайта для максимально быстрого отображения элемента LCP.

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

Кроме того, с помощью функции кэширования Kinsta Edge вы можете кэшировать страницы своего сайта в глобальной сети Cloudflare, что означает, что посетители со всего мира будут наслаждаться молниеносным временем отклика сервера (и, следовательно, молниеносным временем LCP).

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

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