8 действенных способов улучшить FCP в WordPress

В этой статье мы рассмотрим несколько простых способов улучшить FCP или First Contentful Paint в WordPress. Улучшив этот показатель производительности, ваш веб-сайт WordPress будет более удобным для пользователей, получит более высокий рейтинг в Google и будет загружаться заметно быстрее. Во-первых, давайте очень быстро рассмотрим, что такое FCP, а затем обсудим несколько простых способов улучшить этот показатель на вашем веб-сайте WordPress.

Что такое ФКП?

FCP, также известный как First Contentful Paint, представляет собой статистику, полученную от реальных пользователей с помощью отчета о пользовательском опыте Chrome. Это одна из наиболее реалистичных мер реального пользовательского опыта. Он предназначен для измерения того, как отдельные посетители и пользователи воспринимают производительность веб-сайта. Это также одна из первых из многих статистических данных о скорости, которые Google начнет использовать в своей кампании по повышению привлекательности веб-сайтов, направленной на улучшение пользовательского опыта для потребителей на всех веб-сайтах.

The First Contentful Paint — это первый случай рендеринга визуального контента для конечного пользователя. В этом примере FCP появляется во втором кадре, и это первый элемент контента, отображаемый для пользователя. Наличие более быстрого FCP гарантирует, что пользователь останется на вашем веб-сайте до тех пор, пока весь контент не загрузится, поскольку воспринимаемое время загрузки этого контента намного быстрее.

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

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

Тестирование и понимание первой Contentful Paint

Понять и протестировать показатели First Contentful Paint очень просто. Все, что вам нужно, — это инструмент Google Pagespeed. Просто введите свой URL-адрес, и одна из первых метрик покажет вам за секунды, насколько быстро загружается ваш сайт.

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

Хорошей новостью является то, что для улучшения вашего First Contentful Paint в WordPress есть несколько действенных методов, которые приведут к немедленному и долговременному улучшению. Большинство этих решений включают в себя плагины, которые автоматизируют для вас процесс оптимизации, что значительно упрощает оптимизацию FCP в WordPress.

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

Сосредоточьтесь на времени до первого байта

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

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

FCP — это первая отображаемая метрика, поэтому она почти напрямую связана с TTFB. Два основных способа, которыми вы можете улучшить свое время до первого байта на веб-сайте WordPress, напрямую увеличивая ваш показатель First Contentful Paint, — это выбрать быстрый хост WordPress и использовать качественный CDN.

Если у вас быстрый хост WordPress, данные отправляются в браузер посетителей намного быстрее, чем обычно, что увеличивает TTFB. Если у вас есть пользователь, который загружает веб-сайт из географически удаленного места по отношению к расположению сервера, использование CDN с отдельным узлом, который физически находится ближе к конечному пользователю, серьезно увеличит ваш TFB и приведет к гораздо лучшему первому. Контентная оценка Paint.

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

Итак, первое, что вы можете сделать, чтобы улучшить свой FCP, — это посмотреть на хорошего хоста. Лучший хост со встроенным CDN (предприятие Cloudflare, которое включает автоматическую оптимизацию платформы) — это Rocket.net.

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

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

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

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

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

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

Встроенный критический CSS

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

Удален неиспользуемый CSS

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

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

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

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

Удалите элементы скрипта в верхней части страницы (например, рекламу JS)

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

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

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

Заменив их более быстрой загрузкой HTML, вы серьезно улучшите First Contentful Paint, просто благодаря природе технологий HTML и CSS.

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

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

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

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

Встроенные изображения (SVG или Base64)

Если вы хотите стать еще более безумным с оптимизацией изображения, для небольших изображений, которые не имеют серьезных требований к разрешению, вы можете пойти дальше и встроить их. Это хорошо, если у вас есть определенный логотип или изображение меньшего размера, которое загружается в верхней части страницы. Преобразовывая их в форматы SVG или base 64, вы встраиваете изображение, уменьшая дополнительный HTTP-запрос для их загрузки, улучшая FCP.

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

Тем не менее, использование логотипов SVG и base 64, значков поиска, значков социальных сетей и фона может быть полезным для вашего First Contentful Paint, повышения рейтинга вашего веб-сайта WordPress в Google и улучшения вашего рейтинга и удобства пользователей.

Сосредоточьтесь на размере DOM

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

Таким образом, любые элементы div внутри тела, обертки span, абзацы, заголовки, металинки и т. д. будут считаться элементами DOM. Чем больше элементов на странице, тем больше время рендеринга и тем медленнее выполняется первая отрисовка содержимого.

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

Например, Elementor упаковывает свои элементы в десятки ненужных элементов div, поэтому переключение на конструктор страниц с меньшим раздуванием кода может минимизировать количество элементов DOM на странице, что приведет к меньшему количеству передачи данных, что приведет к более быстрому времени рендеринга, что приведет к лучшие оценки First Contentful Paint в Google.

Вывод

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

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