Как улучшить первую отрисовку контента (FCP) в WordPress (оптимизация на стороне сервера и интерфейсная часть)

Вы когда-нибудь чувствовали, что ваш сайт WordPress загружается долго? Если да, то вы не одиноки. Медленные веб-сайты расстраивают пользователей и ухудшают ваш рейтинг в поисковых системах. Но не волнуйтесь, разработчики WordPress! Эта статья упрощает улучшение ключевого показателя: первой отрисовки контента (FCP).

Думайте о FCP как о моменте, когда ваш пользователь видит первый фрагмент реального контента, например текста или изображения. Чем быстрее это появляется, тем они счастливее. Медленный ФКП? Они могут уйти, прежде чем увидеть ваш полезный контент.

В этой статье я разобью улучшения FCP на простые шаги, которые смогут понять даже начинающие программисты-ниндзя. Я расскажу об использовании специальных стилей («критический CSS») и устранении любых препятствий («ресурсы, блокирующие рендеринг»).

Что такое FCP и почему это важно?

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

По сути, это момент, когда ваш посетитель наконец видит что-то осязаемое, признак того, что ваш сайт жив и здоров. Быстрый FCP сообщает посетителям: «Эй, мы здесь и готовы показать вам что-то потрясающее!»

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

Улучшение FCP заключается в том, чтобы ваш веб-сайт быстро вызывал этот первоначальный «вау» момент. Взяв под свой контроль отображение вашей страницы, вы можете улучшить взаимодействие с пользователем, повысить рейтинг SEO и создать действительно блестящий веб-сайт.

Что такое хороший показатель FCP?

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

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

Вот разбивка:

0–1,8 секунды: Хорошо! Пользователи воспринимают ваш сайт как молниеносный.
1,8–3 секунды: все еще хорошо, но стремитесь к улучшению, чтобы избежать потенциального разочарования пользователей.
3+ секунды: Бедный! Посетители могут отскочить из-за кажущейся медлительности.

– Источник: web.dev

Диагностика проблем FCP

Такие инструменты, как Lighthouse, Google PageSpeed ​​Insights и GTmetrix, могут анализировать ваш веб-сайт и определять конкретные элементы, задерживающие ваш FCP. Ищите виновных, например:

• Большие или неоптимизированные изображения.
• Ресурсы, блокирующие рендеринг
• Тяжелые шрифты
• Слишком сложный JS и CSS.

После того как вы идентифицировали подозреваемых, копните глубже, чтобы понять их влияние. Такие инструменты, как Google PageSpeed ​​Insights, предлагают подробный анализ производительности, помогая вам определить конкретные сценарии, стили и сетевые запросы, влияющие на FCP.

Откройте Google PageSpeed ​​Insights, введите URL-адрес своего веб-сайта в строку поиска и нажмите«Анализ» .

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

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

• Затем проверьте раздел«Диагностика» в PageSpeed ​​Insights.В нем перечислены конкретные способы улучшения FCP на вашем сайте.

Стратегии улучшения FCP

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

Серверная оптимизация

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

1. Уменьшите время ответа сервера (TTFB)

Время до первого байта (TTFB) — это измерение, используемое в качестве показателя скорости реагирования веб-сервера или другого сетевого ресурса.

Уменьшения TTFB можно добиться за счет оптимизации конфигурации программного обеспечения вашего сервера, обеспечения эффективных запросов к базе данных и минимизации HTTP-запросов.

1.1. Выберите лучшего хостинг-провайдера

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

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

1.2. Оптимизация серверного программного обеспечения

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

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

CDN — это сеть серверов, распределенных по разным точкам земного шара.

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

Для пользователей Cloudways интеграция Cloudflare CDN предлагает дополнительные преимущества, помимо простого географического распределения. Он легко интегрируется с вашей учетной записью Cloudways, упрощая настройку и управление. Кроме того, Cloudflare CDN включает в себя такие функции, как:

2. Используйте кэширование на уровне сервера

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

2.1. Плагины WP для кэширования на уровне сервера

Доступно несколько плагинов WordPress, которые помогут вам реализовать кэширование на уровне сервера. К ним относятся:

1. W3 Total Cache: этот плагин предлагает полный набор опций кэширования, включая кэширование страниц, кэширование объектов и кэширование браузера.
2. WP Super Cache: этот удобный плагин генерирует статические HTML-файлы с вашего динамического сайта WordPress. Веб-сервер будет использовать эти файлы HTML вместо обработки более тяжелых сценариев PHP.

2.2. Настройка правил кэширования на стороне сервера

Настройка кэширования на стороне сервера включает установку правил того, как и когда ваш сервер должен кэшировать контент. Вот несколько общих шагов:

• Включить кэширование: обычно это делается через файл конфигурации вашего сервера (например, .htaccess для серверов Apache).
• Установить заголовки управления кэшем. Эти заголовки определяют, какие типы файлов кэшировать и как долго их хранить.
• Настройте ETags: ETags помогают браузеру определить, изменилось ли кэшированное содержимое с момента его последнего кэширования.
• Используйте заголовки Expires: эти заголовки сообщают браузеру, как долго кэшировать контент.

Внешняя оптимизация

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

3. Устраните ресурсы, блокирующие рендеринг

Ресурсы, блокирующие рендеринг, такие как CSS и JavaScript, могут замедлить время загрузки вашего сайта. Вот как решить эту проблему:

3.1. Определите критический CSS и загрузите его первым

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

3.2. Отложенная или асинхронная загрузка некритического JavaScript

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

Используйте атрибут defer в тегах вашего скрипта, чтобы отложить загрузку некритического JavaScript до тех пор, пока HTML-документ не будет полностью проанализирован:

 <script src="non-critical.js" defer></script>

Альтернативно используйте атрибут async для асинхронной загрузки скрипта:

 <script src="non-critical.js" async></script>

3.3 Удаление неиспользуемых скриптов и стилей

Удалите ненужные байты, удалив неиспользуемые скрипты и стили. Следующие инструменты могут помочь идентифицировать и удалить неиспользуемый CSS.

1. PurifyCSS: этот инструмент можно использовать для удаления неиспользуемого CSS. Он проверяет ваши исходные файлы и удаляет неиспользуемые селекторы из вашего CSS.
2. UnCSS: подобно PurifyCSS, UnCSS также удаляет неиспользуемые стили из ваших таблиц стилей.
3. Chrome DevTools: вкладка «Покрытие» в Chrome DevTools может помочь определить неиспользуемый код JavaScript и CSS.

4. Оптимизируйте структуру CSS

Оптимизация CSS может привести к ускорению рендеринга и улучшению пользовательского опыта. Вот как:

4.1. Минимизация и уменьшение файлов CSS

Минимизация удаляет ненужные символы из кода, чтобы уменьшить его размер, тем самым сокращая время загрузки. Сжатие уменьшает размер файлов CSS для оптимизации доставки в браузер. Breeze предлагает встроенную функцию минимизации CSS, которая автоматически сворачивает все ваши CSS-файлы для сокращения времени загрузки. Он также предоставляет отдельные возможности для встраивания критического CSS, что еще больше улучшает FCP.

4.2. Предварительная загрузка ключевых запросов CSS

Атрибут preload в теге <link>позволяет браузеру как можно скорее загрузить ключевые файлы CSS, что может сократить время, необходимое для рендеринга страницы. Вот пример использования атрибута preload дляпредварительной загрузки файла CSS:

 <link rel="preload" href="styles.css" as="style">

Это сообщит браузеру немедленно начать загрузку файлаstyles.css , так как он, вероятно, скоро понадобится.Атрибутas="style" важен, поскольку помогает браузеру установить правильный приоритет для загрузки ресурса.

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

5. Избегайте элементов, зависящих от JavaScript, над сгибом

Элементы, зависящие от JavaScript, могут замедлить время загрузки вашего сайта. Вот как решить эту проблему:

5.1. Используйте альтернативные решения для анимации и слайдеров

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

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

Вот пример простой CSS-анимации:

 @keyframes слайд {
  из {преобразование: TranslateX (0); }
  в {transform: TranslateX(100px); }
}

.myElement {
  анимация: слайд 2 с бесконечно;
}

Видео HTML5 можно использовать для создания насыщенного, динамичного контента, не полагаясь на JavaScript. Он поддерживается всеми современными браузерами и может управляться с помощью стандартного видео API HTML5.

 <контроллеры ширины видео="1080" высоты="720">
  <источник src="movie.mp4" type="video/mp4">
  Ваш браузер не поддерживает видео тег.
</видео>

5.2. Задержка несущественного выполнения JavaScript

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

Атрибутdefer в теге <script>позволяет браузеру выполнить сценарий после полного анализа HTML-документа.

 <script src="script.js" отложить></script>

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

 <script src="script.js" async></script>

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

 window.addEventListener('load', function() {
  // Здесь ваш код
});

6. Избегайте ленивой загрузки изображений выше сгиба

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

6.1. Предварительная загрузка критических изображений

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

• Используйте значениепредварительной загрузки атрибута relв элементессылкив HTML. Это указывает браузеру начать загрузку указанного ресурса как можно скорее.
• Если ваш сервер поддерживает HTTP/2, вы можете использовать Server Push для отправки ресурсов клиенту до того, как они будут запрошены. Это может быть особенно эффективно для предварительной загрузки важных изображений.

6.2. Используйте методы оптимизации изображений над сгибом

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

7. Оптимизация и сжатие изображений

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

7.1. Выберите правильный формат изображения и уровень сжатия.

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

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

• Сначала установите плагин Imagify на свой сайт WordPress и активируйте его.
• Используйте свой адрес электронной почты для создания ключа API. После создания скопируйте этот ключ и вставьте его по следующему пути:Панель управления WordPress > Настройки > Imagify .
• Перейдите в панель управления WordPress → Настройки → Imagify → Раздел «Оптимизация» .

В разделе «Оптимизация» выберите опцию « Показывать изображения в формате WebP на сайте» и «Использовать теги <picture>».

7.2. Используйте методы адаптивных изображений

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

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

Уменьшение размера объектной модели документа (DOM) может привести к повышению производительности. Вот несколько стратегий:

8.1. Минимизируйте HTML-разметку

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

Чтобы ваш HTML был чистым и компактным, вы можете:

• Используйте средства проверки HTML, такие как служба проверки разметки W3C, для выявления и удаления ненужных тегов.
• Используйте семантические элементы HTML, такие как <article>, <section> и <nav>, чтобы предоставить дополнительную информацию о вашем контенте.
• Используйте внешние таблицы стилей CSS или внутренний CSS в разделе <head> вместо встроенных стилей.

 <!-- Хорошо -->
<голова>
    <стиль>
        .мои занятия {
            цвет синий;
        }
    </стиль>
</голова>
<тело>
    <div class="myClass">Привет, мир!</div>
</тело>

<!-- Плохо -->
<тело>
    <div>Привет, мир!</div>
</тело>

8.2. Избегайте ненужных вложенных элементов

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

Чтобы избежать увеличения и усложнения DOM, вы можете:

• Используйте CSS Flexbox или Grid для макетирования вместо вложенных таблиц или элементов div.
• Используйте комбинаторы CSS для стилизации элементов без усложнения HTML.

ИспользуйтеDocument.querySelector() или Document.querySelectorAll()для прямого доступа к глубоко вложенным элементам.

 <!-- Хорошо -->
<div class="контейнер">
    <div class="item">Элемент 1</div>
    <div class="item">Пункт 2</div>
</div>

<!-- Плохо -->
<дел>
    <дел>
        <div>Пункт 1</div>
    </div>
    <дел>
        <div>Пункт 2</div>
    </div>
</div>

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

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

9.1. Используйте параметры отображения шрифта, такие как «Заменить» или «Резервный вариант».

Свойство CSSfont-display управляет отображением шрифта в зависимости от того, загружен ли он и готов к использованию.

Значение «swap» сообщает браузеру использовать резервный шрифт для отображения текста до тех пор, пока не загрузится пользовательский шрифт, а значение «fallback» дает шрифту короткий период блокировки и бесконечный период замены.

Чтобы использовать такие параметры отображения шрифта, как «своп» или «резервный», вы можете добавить свойство font-display к правилу @font-faceв CSS. Вот как вы можете это сделать:

 @font-face {
  семейство шрифтов: 'MyFont';
  источник: URL('/путь/к/myfont.woff2') формат('woff2'),
       URL('/путь/к/myfont.woff') format('woff');
  шрифт-дисплей: поменять местами; /* или резервный вариант */
}

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

9.2. Размещайте веб-шрифты локально или в CDN

Размещение веб-шрифтов локально или в сети доставки контента (CDN) может ускорить время загрузки за счет уменьшения количества HTTP-запросов, использования кэширования браузера и повышения скорости доставки контента.

Чтобы разместить веб-шрифты локально или в CDN, вы можете выполнить следующие действия:

• Вы можете загрузить файлы веб-шрифтов из таких источников, как Google Fonts, Font Squirrel и т. д.
• Если вы размещаете веб-шрифты локально, загрузите файлы на свой сервер. Если вы используете CDN, следуйте инструкциям CDN, чтобы загрузить файлы.
• Используйте правило @font-face в своем CSS, чтобы указать расположение файлов шрифтов.

 @font-face {
  семейство шрифтов: 'MyFont';
  источник: URL('/путь/к/myfont.woff2') формат('woff2'),
       URL('/путь/к/myfont.woff') format('woff');
}

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

Краткое содержание

В заключение, улучшение First Contentful Paint (FCP) вашего сайта WordPress — это многогранный процесс, который включает в себя стратегии как на стороне сервера, так и на стороне интерфейса. Улучшение ответа сервера, использование кэширования сервера, удаление блоков рендеринга и улучшение CSS — все это ускоряет FCP.

Такие инструменты, как Lighthouse, Google PageSpeed ​​Insights и GTmetrix, могут помочь диагностировать проблемы FCP и направлять ваши усилия по оптимизации. Помните, что хороший показатель FCP составляет 1,8 секунды или меньше, что гарантирует, что большинство пользователей воспринимают ваш сайт как быстрый и отзывчивый.