2

9 советов по улучшению FCP в WordPress

Google недавно объявил, что ранжирует веб-сайты на основе FCP и FID.

Они делят веб-сайты на медленные, умеренные и быстрые.

fcp и fid

Теперь это видно в меню «Скорость» консоли поиска Google .

консоль поиска скорости сайта

Это также отображается в Google PageSpeed ​​Insights как «Полевые данные».

основные данные 14 января

«Но мой сайт загружается за 2 секунды» Почему это важно?

Полевые данные – это данные, собранные из отчета о пользовательском опыте Chrome (Crux). Chrome собирает данные от реальных пользователей.

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

Данные поля показывают фактическую скорость, которую испытывают ваши пользователи.

Итак, если вы пытаетесь выяснить, как уменьшить FCP, вот несколько советов:

ОГЛАВЛЕНИЕ
  1. Уменьшить TTFB
  2. Удаление ресурсов, блокирующих рендеринг
    1. Создать критический CSS
  3. Используйте хорошо написанные темы и компоновщики страниц
  4. Избегайте JS-зависимых элементов в верхней части страницы
  5. Предварительная загрузка страниц в фоновом режиме
  6. Исключение изображений с верхним сгибом из отложенной загрузки
  7. Встроенные «критические» изображения
  8. Уменьшить размер DOM
  9. Убедитесь, что текст остается видимым во время загрузки веб-шрифта
  10. Вывод

Уменьшить TTFB

FCP = TTFB + время рендеринга.

Итак, вам нужно уменьшить TTFB, чтобы уменьшить FCP.

Есть несколько способов уменьшить TTFB в WordPress. Самый простой – использовать хороший плагин кеширования, такой как WP Rocket, и хорошего хостинг-провайдера, например Cloudways .

Удаление ресурсов, блокирующих рендеринг

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

Обычно это CSS и JavaScript.

Для JavaScript вы должны добавить deferатрибут к тегу скрипта. Атрибут defer указывает браузеру выполнять файл сценария только после того, как HTML-документ будет полностью проанализирован.

Для CSS мы загружаем их внизу асинхронно.

Почти все плагины кеширования могут делать и то, и другое. Я обычно рекомендую WP Rocket, так как он тоже может генерировать критический CSS.

Создать критический CSS

Когда вы загружаете CSS асинхронно, в браузере нет необходимых стилей. Это создаст Flash нестилизованного содержимого FOUC.

Чтобы этого не произошло, мы должны сгенерировать Critical CSS.

Critical CSS – это CSS, который требуется для отображения указанного выше содержимого свертки. Он встроен в HTML, поэтому не нужно загружать ресурсы, и браузер может немедленно отобразить контент.

Используйте хорошо написанные темы и компоновщики страниц

Хорошая тема играет важную роль в снижении FCP. Используйте хорошо написанные темы, такие как GeneratePress или Astra .

Создатели страниц также добавляют слишком много div и нежелательного CSS. Используйте такие конструкторы, как Oxygen, которые не вводят нежелательные блоки div и имеют больший контроль над всем.

Избегайте JS-зависимых элементов в верхней части страницы

Все, что требует выполнения JavaScript для рендеринга, может повредить First Contentful Paint.

Итак, как правило, избегайте элементов, для отображения которых требуется JavaScript, в указанном выше сгибе, например:

  • Слайдеры вроде слайдера Revolution
  • Google Рекламы
  • Плагины Mega Menu
  • Анимации

Предварительная загрузка страниц в фоновом режиме

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

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

Документы Mozilla

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

Код выглядит так:

<link rel="prefetch" href="URL_TO_PAGE">

Используйте плагины, такие как Flying Pages, которые интеллектуально автоматизируют эту задачу.

Обложка Flying Pages

Исключение изображений с верхним сгибом из отложенной загрузки

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

Всегда исключайте изображения в верхней части страницы из отложенной загрузки.

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

настройки летающих изображений

Встроенные «критические» изображения

Встраивание изображений означает, что браузеру не нужно делать еще один HTTP-запрос для загрузки изображения. Содержимое изображения уже находится внутри HTML.

Нормальное изображение в HTML:

<img src="https://yout-site.com/logo.png"/>

Изображение base64 в HTML (встроенное):

<img src="data:image/png;base64,...[content]..."/>

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

Уменьшить размер DOM

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

Эта древовидная структура называется DOM или объектной моделью документа.

построение дерева рендеринга

Чем больше элементов вы добавляете на страницу, тем больше увеличивается время рендеринга и First Contentful Paint.

Убедитесь, что текст остается видимым во время загрузки веб-шрифта

Возможно, вы видели такую ​​ошибку в Google PageSpeed ​​Insights:

шрифты ошибка goole psi

Файлы шрифтов обычно добавляются в файлы CSS.

Чтобы браузер мог подготовить шрифты, он должен проанализировать HTML, загрузить файлы CSS, проанализировать их и загрузить файлы шрифтов.

Пока все это не будет сделано, текст невидим! Также называется Flash of Invisible Text (FOIT).

Демо:

Вы можете исправить это, добавив display:swapв CSS (@ font-face). Это указывает браузеру использовать шрифт по умолчанию, пока не будет загружен фактический.

Вывод

Поскольку Google начал уделять больше внимания скорости работы сайта, улучшение FCP больше не является «благом», это «необходимость».

Не только Google, FCP и FMP – это метрики, которые показывают, когда сайт «виден» пользователю. Не всегда достаточно измерить время полной загрузки.

0 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 50 оценок, среднее: 0,00 из 5 (0 оценок, среднее: 0,00 из 5)
Для того чтобы оценить запись, вы должны быть зарегистрированным пользователем сайта.
Загрузка...
Scroll Up