Как улучшить первую содержательную отрисовку (FCP) в WordPress
Опубликовано: 2023-02-17Не знаете, как улучшить First Contentful Paint (FCP) на своем веб-сайте?
Если вы хотите, чтобы ваши посетители чувствовали себя комфортно, вам нужно, чтобы время первой отрисовки содержимого (и другие связанные с ним показатели производительности) были как можно меньше.
К счастью, есть несколько простых способов улучшить First Contentful Paint, даже если вы не разработчик!
- Перейти к методам FCP
В этом посте мы более подробно рассмотрим FCP и покажем, как его измерить. Затем мы рассмотрим, как улучшить First Contentful Paint с помощью шести проверенных методов. Давайте начнем!
Введение в First Contentful Paint
First Contentful Paint — полезная метрика, которая отслеживает скорость загрузки вашей страницы. Существует множество подобных показателей, которые измеряют производительность сайта. FCP, в частности, фокусируется на времени, которое требуется для появления первой части контента на странице. Как только FCP сгенерирован, пользователь знает, что все остальное уже в пути.
Это похоже на метрику «Самое большое содержание контента» (LCP) в Google Core Web Vitals. Но в то время как LCP измеряет, сколько времени требуется для загрузки «основного» контента сайта, FCP просто фокусируется на первом фрагменте контента, который может быть или не быть основным контентом.
Есть много факторов, которые влияют на ваш балл FCP. Файлы JavaScript и плохо оптимизированный HTML являются распространенными причинами низкой производительности, поскольку для их обработки требуется много ресурсов. Кроме того, скрипты, блокирующие рендеринг, могут повлиять на вашу оценку FCP, поскольку их необходимо обработать до выполнения любых других операций.
Ваша оценка FCP важна, потому что это показатель общей скорости вашего сайта. Мало того, что производительность жизненно важна для вашего UX, это также фактор, который поисковые системы, такие как Google, учитывают при принятии решения о ранжировании ваших страниц. Низкая производительность может привести к снижению позиций в поиске. Это означает, что если вы не знаете, как улучшить First Contentful Paint, это может повлиять на видимость вашего веб-сайта.
Как измерить первую содержательную отрисовку
Хотя FCP дает вам представление о восприятии пользователем, это все же показатель, который можно объективно измерить с помощью лабораторных тестов и полевых данных. Например, PageSpeed Insights — это инструмент, который позволяет вам увидеть, с чем сталкиваются ваши реальные пользователи ( при условии, что на вашем сайте достаточно трафика, чтобы его можно было включить в отчет об опыте использования Chrome ).
Даже если на вашем сайте недостаточно данных, чтобы увидеть реальный пользовательский опыт, PageSpeed Insights все равно может помочь вам собрать данные FCP в своих смоделированных лабораторных тестах.
Чтобы использовать его, просто введите свой URL-адрес и получите немедленный результат:
Вы также можете переключаться между представлениями для мобильных устройств и настольных компьютеров, чтобы увидеть, насколько ваш веб-сайт реагирует на различные устройства.
Еще одним полезным инструментом для измерения FCP является WebPageTest, который занимает немного больше времени, но может обеспечить более глубокий анализ.
Что такое хорошее время FCP?
Согласно Chrome, ваш сайт имеет хороший показатель FCP, если он ниже 1,8 секунды. Когда ваш показатель FCP превышает три секунды, это повод для беспокойства.
Однако, даже если ваш сайт в настоящее время имеет высокий балл FCP, всегда есть возможности для улучшения.
Как улучшить First Contentful Paint в WordPress (6 приемов)
Теперь, когда вы знаете немного больше о FCP, давайте посмотрим, как улучшить First Contentful Paint на вашем сайте с помощью шести эффективных методов:
- Используйте сеть доставки контента (CDN)
- Оптимизация и сжатие изображений
- Устранение ресурсов, блокирующих рендеринг
- Уменьшите размер вашего DOM
- Улучшить время отклика сервера
- Избегайте слишком большого количества переадресаций страниц
1. Используйте сеть доставки контента (CDN)
Сеть доставки контента (CDN) — это простой способ увеличить общее время загрузки. Без него, когда пользователь посещает ваш веб-сайт, ему придется ждать, пока необходимые данные будут переданы между основным сервером вашего сайта и его местоположением. Это может привести к увеличению времени ожидания для пользователей, географически удаленных от серверов вашего хостинг-провайдера.
С другой стороны, CDN предлагает сеть серверов, распределенных по всему миру. Таким образом, контент может быть доставлен с любого сервера, который физически находится ближе всего к каждому посетителю.
Одним из популярных примеров CDN является Cloudflare, который имеет более 275 центров обработки данных по всему миру:
С Cloudflare вы можете воспользоваться другими методами оптимизации, такими как оптимизация изображений без потерь.
Как правило, CDN также используют кэширование и другие стратегии для улучшения FCP. Например, ваш провайдер CDN может предложить минимизацию и сжатие файлов, чтобы упростить ваш сайт. Это поможет вам уменьшить задержку, улучшить UX и снизить нагрузку на ваш основной сервер.
2. Оптимизируйте и сжимайте изображения
Изображения редко являются первым элементом, загружаемым на ваш сайт. Однако, если вы запускаете сайт с большим количеством медиа, например, портфолио или витрину фотографий, важно оптимизировать и сжимать изображения, чтобы улучшить оценку FCP (и общую производительность).
Один из способов оптимизировать изображения — переключиться на другой формат файла. Например, если вы в настоящее время полагаетесь на JPG/JPEG или PNG, вы можете перейти на формат с лучшим сжатием, такой как SVG или WebP.
Вы также должны изменить размер изображений до наименьшего размера, который соответствует вашим потребностям, и сжать их, чтобы еще больше уменьшить их размер.
Хотя вы можете сделать все это вручную с помощью онлайн-инструментов, для пользователей WordPress гораздо проще использовать плагин для оптимизации изображений.
Например, бесплатный плагин Optimole может автоматически изменять размер, сжимать и конвертировать ваши изображения. Кроме того, он также может обслуживать их через встроенный CDN, который убивает двух зайцев одним выстрелом.
Этот инструмент также позволяет предоставлять высококачественные изображения с высокой скоростью, независимо от того, какое устройство используют посетители для доступа к вашему сайту. Вы можете использовать такие функции, как отложенная загрузка и изменение размера изображения, чтобы улучшить свои изображения.
3. Удалите ресурсы, блокирующие рендеринг
Ресурсы, блокирующие рендеринг, могут помешать быстрой загрузке вашего контента, поскольку браузер должен сначала обработать их, даже если они не важны для загрузки исходного контента вашего сайта. В результате они могут замедлить ваш счет FCP. Это может включать код HTML, таблицы стилей CSS и файлы JavaScript.
Если вам интересно, как улучшить First Contentful Paint, есть несколько способов устранить ресурсы, блокирующие рендеринг. Если вас устраивает разработка, и вы нашли код, который не используется на вашей странице, вы можете удалить его. Вы также можете идентифицировать свои критические ресурсы и «встроить» их в свою страницу, используя теги <script> и <style>.
Кроме того, можно отложить выполнение JavaScript, чтобы ваш контент не задерживался, пока браузер не обработает эти файлы. Кроме того, вы можете сгенерировать критический CSS для отображения контента «вверху» (та часть, которую сразу видят пользователи). Если вы не разработчик, такой инструмент, как Jetpack, может помочь вам внести некоторые из этих изменений.
4. Уменьшите размер DOM
Когда веб-страница загружается, ваш браузер создает объектную модель документа (DOM). Это представление всех объектов, составляющих вашу страницу.
Если на вашей странице слишком много узлов DOM (тегов HTML) или если они слишком глубоко вложены, браузеру требуется больше времени для обработки вашей страницы. Это может привести к снижению скорости загрузки и плохой оценке FCP.
Таким образом, вы можете улучшить свой FCP, уменьшив размер DOM. Вы можете сделать это вручную, удалив ненужные теги <div>, разбив длинные страницы на более мелкие и ограничив количество сообщений в вашем архиве или на вашей домашней странице.
Кроме того, вы можете лениво загружать свои HTML-элементы с помощью плагина оптимизации, такого как Optimole. Ленивая загрузка — это метод, который откладывает загрузку контента до тех пор, пока он не понадобится. Вместо того, чтобы обрабатывать все сразу, браузер может сосредоточиться на доставке тех элементов, которые сразу видны.
Выбор оптимизированной темы также может помочь уменьшить размер DOM, поскольку многие темы (и компоновщики страниц) используют слишком много тегов <div>. Если вы ищете новую тему, мы рекомендуем обратить внимание на Neve — быструю, легкую и использующую только качественный код.
5. Улучшить время отклика сервера
Время ответа сервера также называется временем до первого байта (TTFB). Этот показатель измеряет время, которое проходит между моментом, когда пользователь делает запрос, и моментом, когда сервер отправляет первый байт информации.
Есть много способов улучшить время отклика вашего сервера (и, как следствие, вашу оценку FCP).
Во-первых, важно выбрать качественного хостинг-провайдера. Лучше всего искать хостинг, специально предназначенный для веб-сайтов WordPress, и обращать внимание на расположение его серверов. В идеале у вашего хоста должны быть серверы, близкие к вашей основной аудитории.
Если вы хотите повысить производительность своего хостинга, вы можете выбрать провайдера из нашей коллекции самых быстрых хостингов WordPress с поддержкой данных.
Однако, если ваш хостинг-провайдер не предлагает удобные серверы, вы всегда можете выбрать CDN, о котором мы говорили ранее, когда обсуждали, как улучшить First Contentful Paint.
Кэширование — отличный способ сократить время отклика. Некоторые хосты предлагают встроенное кэширование. В качестве альтернативы вы можете установить плагин кэширования, такой как WP Rocket или WP Fastest Cache.
6. Избегайте слишком большого количества переадресаций страниц
Когда вы посещаете страницу, которая немедленно перенаправляет вас на другой сайт, ваш браузер должен сделать еще один HTTP-запрос к новому местоположению. Это может привести к плохой оценке FCP, поскольку задерживает загрузку вашей веб-страницы.
Чем больше переадресаций на вашей странице, тем хуже будет ваш показатель FCP. Кроме того, слишком много перенаправлений страниц могут серьезно нарушить ваш UX.
Если проблема возникает на всем сайте, возможно, вы захотите изучить, как вы управляете переадресацией с www на не-www (или наоборот) и/или с HTTP на HTTPS.
Например, если вы перенаправляете с http://www.yoursite.com
на http://yoursite.com
, а затем снова на https://yoursite.com
, было бы эффективнее просто сделать это за один шаг.
Если перенаправления влияют только на ваш FCP на одной странице, вы можете изучить все перенаправления, которые вы создали для этой страницы.
Вы можете управлять перенаправлениями вручную, хотя это может занять много времени. Обычно лучше выбрать плагин WordPress, такой как Redirection:
После установки вы можете использовать этот инструмент для простого и быстрого управления перенаправлениями.
Улучшите время FCP вашего сайта сегодня
На сложных или насыщенных контентом веб-сайтах может быть сложно поддерживать быстрое время загрузки. К счастью, ориентируясь на ключевые показатели, такие как First Contentful Paint (FCP), вы можете оценить и сократить время, необходимое посетителям для просмотра вашего контента.
Напомним, вот как можно улучшить First Contentful Paint в WordPress:
- Используйте сеть доставки контента (CDN).
- Оптимизируйте и сжимайте изображения.
- Удалите ресурсы, блокирующие рендеринг.
- Уменьшите размер объектной модели документа (DOM).
- Улучшить время отклика сервера.
- Избегайте слишком большого количества редиректов страниц.
Чтобы узнать о других способах ускорения работы вашего сайта, ознакомьтесь с нашей коллекцией различных способов ускорения работы WordPress.
У вас есть вопросы по улучшению FCP в WordPress? Дайте нам знать в комментариях ниже!
…
Не забудьте присоединиться к нашему ускоренному курсу по ускорению вашего сайта WordPress. Узнайте больше ниже: