Как повысить показатель Google PageSpeed ​​Insights для WordPress

Скорость загрузки веб -сайта может добиться или сломать свой успех. Если вы сравниваете две идентичные страницы, более быстрая страница получает предпочтительную обработку от поисковых систем, таких как Google. К счастью, есть способ проверить скорость вашего сайта и получить советы по ее улучшению. Это называется Google PageSpeed ​​Insights - вот что это такое и как вы можете его использовать.

Что такое Google PageSpeed ​​Insights?

Google PageSpeed ​​Insights (PSI) - это бесплатный онлайн -инструмент, разработанный Google, который анализирует скорость и различные элементы пользовательского опыта веб -страниц на мобильных и настольных устройствах. Он анализирует страницу и дает оценки и рекомендации, чтобы помочь владельцам веб -сайтов повысить производительность своего сайта. Любой может запустить отчет на любой веб -странице - это отличный способ увидеть, насколько хорошо работают ваши собственные и конкурентные сайты.

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

Команда Google Chrome представила Core Web Vitals (CWV) в 2020 году для стандартизации метрик для определения хорошей скорости сайта и пользовательского опыта. PageSpeed ​​Insights - это просто инструмент, который анализирует и отчеты по этим показателям. Вот почему для владельцев сайтов важно понимать метрики CWV и как они влияют на SEO на вашу страницу.

Основные веб -сайты: что означают эти аббревиатуры и измеряют?

Ваш балл PageSpeed ​​измеряется с помощью пяти основных метрик (хотя только три действительно считаются «ядром», причем два других называют «известными».

Вот быстрое объяснение аббревиатуры LCP, INP, CLS, FCP и TTFB:

• LCP (самая большая довольная краска) измеряет, сколько времени требуется для крупнейшего элемента контента (изображение, видео, блок текста), видимый в виде, для рендеринга на экране. Это представляет, насколько быстро основной контент страницы виден пользователю. Цель на 2,5 секунды или меньше для хорошего пользовательского опыта.
• INP (взаимодействие к следующей краске) ​​измеряет отзывчивость страницы на взаимодействие с пользователями. В нем рассматривается задержка всех взаимодействий «Кличок», «Нажмите и клавиатуру» во время посещения пользователя на страницу и сообщает одно значение, представляющее типичную задержку страницы. Хороший INP составляет 200 миллисекунд или менее. Раньше это называлось входной задержкой .
• CLS (совокупный сдвиг макета) измеряет визуальную стабильность страницы. Он количественно определяет, сколько движения видимого контента происходит в точке зрения. Неожиданные сдвиги макета могут расстроить пользователей (например, если кнопка движется, когда они пытаются нажать его). Цель CLS балл 0,1 или менее.
• FCP (первая довольная краска) измеряет время от того, когда страница начинает загружаться, когда любой контент (текст, изображение и т. Д.) Сначала нарисовано на экране. Это указывает на то, как быстро пользователь получает визуальную обратную связь, которую загружает страница. Цель на 1,8 секунды или меньше.
• TTFB (время до первого байта) измеряет время, необходимое для браузера, чтобы получить первый байт данных с сервера после запроса страницы. Это ключевой показатель для отзывчивости сервера. Цель на 800 миллисекунд или меньше.

Зачем расставлять приоритеты в скорости мобильной страницы?

С появлением смартфонов и тем фактом, что большинство поисков сейчас происходят из мобильных устройств, Google и другие поисковые системы начали приоритет мобильному опыту веб -сайтов и веб -страниц. Итак, когда вы запускаете оценку PageSpeed ​​Insight, вы увидите, что она дает вам счет как для настольных, так и для мобильных устройств.

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

1. Многие веб -дизайнеры по -прежнему разрабатывают свои веб -сайты в основном из опыта настольного компьютера. Мобильный дизайн - это запоздалая мысль.
2. Тест мобильной скорости предполагает скорость в Интернете с использованием сотовых данных, тогда как настольные компьютеры, как правило, используют стабильные и высокоскоростные домашние или деловые интернет-соединения. Из -за этого несоответствия мобильный опыт, как правило, медленнее.
3. Основываясь на 1 выше, веб -дизайнеры также оптимизируют свои веб -сайты с учетом настольных компьютеров, что означает, что многие из лучших оптимизаций не адаптированы к мобильному опыту.

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

Как улучшить основные веб -жизненные силы для лучших результатов страниц

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

LCP (самая большая краска)

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

Сосредоточьтесь на этих трех вещах:

1. Оптимизируйте элемент LCP: определите самый большой элемент в начальном виде просмотра (часто изображение или текст героя). Сначала оптимизируйте этот элемент:
   • Изображения: Сжатие изображений с использованием современных форматов, таких как WebP. Используйте соответствующие размеры (не подайте большие изображения, чем необходимые). Используйте атрибуты SRCSET и размеры для адаптивных изображений. Подумайте об использовании CDN для доставки изображений.
   • Текстовые блоки: убедитесь, что веб-шрифты загружаются эффективно (с помощью Font-Display: SWAP хорош). Избегайте больших блоков JavaScript JavaScript или CSS, которые задерживают рендеринг текста.
2. Оптимизируйте содержимое выше, а также приоритет загрузке содержимого над складом (часть страницы видимой без прокрутки) быстро. Отложить загрузку некритических ресурсов ниже сгиба.
3. Улучшение времени отклика сервера (TTFB): более быстрый TTFB напрямую влияет на LCP. См. Предложения TTFB ниже.

INP (взаимодействие к следующей краске)

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

Но вы должны сосредоточиться на этих задачах, если думаете, что вы готовы к этому:

1. Минимизируйте длинные задачи : выявляйте и разбивайте длительные задачи JavaScript (все, что блокирует основной поток на 50 мс или более). Используйте разделение кода и откладывает некритический JavaScript.
2. Оптимизируйте обработчики событий : убедитесь, что обработчики событий (например, Click или Tap Events) являются эффективными и не вызывают длинных задержек. Избегайте сложных расчетов или манипуляций с DOM в рамках обработчиков событий.
3. Избегайте макета : избегайте вынуждения синхронных макетов (где JavaScript заставляет браузер пересматривать макет несколько раз за короткий период). Это часто происходит при чтении, а затем сразу же написание стилей.

CLS (совокупный сдвиг макета)

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

Попробуйте сосредоточиться на этих вещах:

1. Установите явную ширину и высоту на изображениях и видео : всегда включайте атрибуты ширины и высоты (или используйте CSS Aspose-Ratio) для изображений и видео, чтобы зарезервировать пространство для них во время загрузки. Это предотвращает прыжки с контентом.
2. Резервные места для рекламы и встроенного контента : если вы используете рекламу или вставки, которые могут изменить размер, зарезервируйте достаточно места для них, используя заполнители или скелетные погрузчики.
3. Избегайте вставки контента выше существующего контента : не динамически вводите контент выше существующего контента, если он не в ответ на взаимодействие с пользователем.

FCP (первая довольная краска)

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

Сосредоточьтесь на этих элементах, чтобы решить проблемы с FCP:

1. Устранение ресурсов блокировки рендеринга : минимизировать или устранить CSS и JavaScript, которые блокируют рендеринг. Минирируйте и сжатие файлов CSS и JavaScript. Встроенные критические CSS (CSS, необходимые для того, чтобы отобразить выше содержание) и отложить некритический CSS. Отложить некритический JavaScript с использованием атрибутов Defer или Async.
2. Оптимизировать время ответа на сервер : более быстрый TTFB напрямую улучшает FCP. См. Предложения TTFB ниже.
3. Оптимизируйте порядок загрузки ресурсов : распределить приоритет загрузки критических ресурсов (например, CSS и шрифты, необходимые для вышеупомянутого контента).

TTFB (время до первого байта)

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

Действительно копайте эти элементы для решения времени ответа на сервер:

1. Оптимизировать производительность сервера : это часто является наиболее эффективным фактором.
   1. Обновление плана хостинга до более мощного сервера (или обновление более мощного хостингового поставщика).
   2. Использование сети доставки контента (CDN) для кэша статических активов ближе к пользователям.
   3. Оптимизация вашего кода на стороне сервера и запросов базы данных.
2. Используйте кэширование : реализуйте правильные механизмы кэширования (GZIP, кэширование браузера, кэширование на стороне сервера, кэширование объекта), чтобы уменьшить нагрузку на ваш сервер.
3. Используйте поставщика DNS с быстрым временем поиска : быстрый поставщик DNS может сократить время, необходимое для разрешения вашего доменного имени до IP -адреса.

Как исправить скорость страницы для веб -сайта WordPress

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

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

Как улучшить TTFB

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

Сайт -земной хостинг

Надежное хостинг с оптимизированными конфигурациями сервера имеет решающее значение для быстрого TTFB. Siteground предлагает отличную производительность и оптимизированные для WordPress.

Получить сайт

Cloudflare CDN

Сеть доставки контента (CDN), такая как CloudFlare, кэширует статические активы вашего веб -сайта на серверах по всему миру, уменьшая движения данных на расстоянии и улучшая TTFB для пользователей во всем мире. Бесплатная версия предлагает значительные преимущества.

Получите CloudFlare

Как улучшить FCP, CLS и LCP

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

Нитропак

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

Получите нитропак

W3 Total Cache

W3 Total Cache - это давний плагин кэширования WordPress, который предлагает комплексный набор вариантов для улучшения времени загрузки, включая кэширование страниц, министерство и кэширование браузера.

Получите w3 total cache

WP Rocket

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

Получите WP Rocket

EWWW Оптимизатор изображения

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

Получить оптимизатор изображения EWWW

Как улучшить LCP и Inp

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

Divi Тема

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

Получите Divi Pro

Сделать все это вместе

Оптимизация вашего веб -сайта для основных веб -Vitals (CWVS) - это инвестиция в ваш онлайн -успех. Я знаю, что это много, но, сосредоточившись на LCP, INP, CLS, FCP и TTFB, вы напрямую улучшаете пользовательский опыт, делая ваш сайт более приятным и привлекательным. Это приводит к более низким показателям отказов, увеличению времени на участке и, в конечном счете, большей конверсии.

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

Создайте сайт WordPress с высокой оценкой сегодня

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

1. Получите надежный хостинг (мы рекомендуем Siteground)
2. Выберите такую ​​тему, как Divi, созданная с использованием лучших практик, чтобы обеспечить удивительную производительность.
3. Завершите это с хорошим плагином кэширования и CDN.

Тестировать страницу Divi (живая демонстрация)

Получите Divi сегодня

Часто задаваемые вопросы