Несколько методов оптимизации LCP, оптимизация плагина LCP в один клик, оптимизация индикатора WP Meteor LCP

Дурацкий плагин оптимизации LCP WP Meteor, подробное объяснение, как оптимизировать LCP

Это может сделать сайт более заметным в поисковых системах, тем самым привлекая больше трафика. Самый простой способ — установить   ,этотВы можете одним щелчком мыши оптимизировать скорость LCP, задержать загрузку JS-файлов и т. д. В WP Meteor нет сложных настроек, только простая кнопка. Его можно использовать из коробки, и с ним легко начать. Это очень удобно. подходит для начинающих пользователей.Вот подробное введение в метод оптимизации LCP.

优化LCP 的几种方法,一键 LCP优化 插件 WP Metreo-1

использовать, индекс LCP после оптимизации LCP ниже 2,5, найдите в плагине WP Meteor и установите его.WP Meteor — это новый способ оптимизации скорости страницы. Он может даже работать поверх существующих оптимизаций, в том числе:

  1. Автоматическая оптимизация
  2. смачиваемая ракета
  3. Общий кеш WP
  4. WP Супер Кэш
  5. LiteSpeed-кэш

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

Несколько методов оптимизации LCP

  • Максимальная прорисовка контента (LCP) измеряет, сколько времени требуется для загрузки самого большого элемента над сгибом на странице.
  • Уменьшение LCP вашего сайта помогает пользователям быстрее просматривать необходимый контент на вашем сайте.
  • Раздел «Диагностика» в PageSpeed Insights показывает, какой элемент вызвал срабатывание метрики LCP.
优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

Панель «Производительность» в DevTools выполняет ту же работу.

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

Чтобы улучшить время LCP вашей страницы, вы должны оптимизировать время загрузки этого элемента. Вот пять эффективных способов улучшить ваш индекс LCP. Коррекции, конечно, также помогут улучшить показатели FCP, CLS и TTI.

Оптимизация LCP: как улучшить время LCP

  1. Оптимизация изображения;
  2. оптимизация CSS и JavaScript;
  3. Более быстрое время ответа сервера;
  4. Ограниченный и оптимизированный рендеринг на стороне клиента;
  5. Предварительно загружен и подключен.

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

Оптимизация изображений — это набор методов, которые улучшают все показатели загрузки и уменьшают смещение макета (CLS). Сжатие изображения еще более важно. Сжатие означает применение различных алгоритмов для удаления или группировки частей изображения, уменьшая при этом его размер. И есть два типа сжатия — с потерями и без потерь.

  • Сжатие с потерямиНекоторые данные удаляются из файла, в результате чего изображение становится менее качественным и облегченным. и GIF являются примерами типов изображений с потерями.
  • сжатие без потерьСохраняет примерно такое же качество изображения, т.е. не удаляет никакие данные. Он производит тяжелые, высококачественные изображения. RAW и PNG — это типы изображений без потерь.

Для этой работы уже существует множество отличных инструментов, таких какизображениеминИлиОптимизилла.

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

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

Выберите правильный формат

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

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

  • Используйте SVG для изображений, состоящих из простых геометрических фигур, таких как логотипы;
  • Если вы жертвуете скоростью при сохранении качества, используйте PNG;
  • Добейтесь наилучшего баланса между качеством и пользовательским интерфейсом, используя WebP, сохраняя при этом исходный формат в качестве резервной копии. Потому что WebP не поддерживает браузер 100%.

Не забудьте попробовать сжать изображение после выбора типа изображения.

Использование атрибута srcset

Типичная ошибка при работе с изображениями — предоставление одного и того же большого изображения для всех размеров устройства. Большие изображения отлично смотрятся на небольших устройствах, но просматриваются очень медленно.

Лучший подход — предоставить изображения разных размеров и позволить браузеруПо устройствуРешите, какой из них использовать. Для этого используйте атрибут srcset и укажите разную ширину обслуживаемого изображения. Ниже приведен пример:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

Как видите, для srcset мы используем w вместо px. Если вы хотите, чтобы версия изображения имела ширину 600 пикселей, вам нужно написать 600w. Опять же, этот подход передает выбор размера изображения браузеру. Вы просто предлагаете варианты.

На сайте Airbnb используется такой подход:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

При выборе правильного размера изображения используйте Аналитика для расчета процента вашей аудитории, которая заходила на ваш сайт с настольного или мобильного устройства. Отчет «Устройства» также содержит подробную информацию о конкретных устройствах, используемых вашими посетителями.

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

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

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

Если вам нужно изменить размер изображения, используйтеУмное изменение размераПакетное изменение размера.

Примечания пользователя:Начиная с версии 4.4, WP автоматически создает разные версии изображений. Он также добавляет атрибут srcset. Если вы пользователь WordPress, вам просто нужно Укажите правильные размеры изображения.

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

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

Веб-сайт Forbes предварительно загружает самое большое изображение над сгибом на главной странице:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

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

  • JavaScript;
  • Свойство фонового изображения в CSS.

2. Оптимизация CSS и JavaScript

Прежде чем браузер сможет отобразить страницу, он должен загрузить, проанализировать и выполнить все файлы CSS и JavaScript, которые он найдет при анализе HTML. Вот почему и CSS, и JavaScript по умолчанию блокируют рендеринг. Если они не оптимизированы, они могут повредить ваш LCP, замедляя загрузку страниц. Вот как их оптимизировать:

  • уменьшитьи сжатые файлы кода

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

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

Вы можете использовать вкладку «Сеть» в DevTools и проанализировать заголовки ответов файла, чтобы убедиться, что это так:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

Большинство минифицированных файлов имеют в своем имени «.min». . Сжатый файл имеет заголовок ответа Content-Encoding., обычно с или значение бр.

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

Реализуйте критический CSS

Внедрение критического CSS — это трехэтапный процесс, который включает в себя:

  • Найдите CSS для стилей над свернутым содержимым в разных окнах просмотра;
  • Поместите этот CSS непосредственно (встроенным) в заголовок страницы;
  • Отложите остальную часть CSS.

Сначала вы можете использовать панель «Покрытие» в DevTools, чтобы рассчитать использование каждого файла CSS на странице.

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

Вы можете упорядочить ресурсы по типу и просмотреть каждый файл CSS и JS.

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

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

После извлечения критический CSS встраивается в тег заголовка страницы.

Наконец, остальная часть CSS загружается асинхронно.Google ПредложенияИспользуйте ссылку rel="preload", as="style", пустой обработчик загрузки и вставьте ссылку на таблицу стилей в элемент noscript.

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

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

Обеспечьте меньшую полезную нагрузку JavaScript.

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

Для ЛКП,Разделить пакет JavaScriptэто отличный способ улучшить свой результат. Идея состоит в том, чтобы отправить только код, необходимый для первоначальной маршрутизации. Все, что не включено в первоначальный пакет, должно быть доступно позже. Таким образом, меньше JavaScript потребуется анализировать и компилировать одновременно. Некоторые популярные инструменты, которые работают, — это Webpack, Rollup и Browserify. Дополнительную информацию о разделении кода см.Эта статья с сайта web.dev.

3. Более быстрое время ответа сервера

Сокращение времени ответа сервера — одна из самых распространенных рекомендаций в PageSpeed Insights.

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

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

Обновите свой план хостинга. Если у вас дешевый план общего хостинга, вам необходимо обновить его. Невозможно иметь быстрый сайт и медленный хостер.;

Оптимизируйте свой сервер. Многие факторы могут повлиять на производительность сервера, особенно во время скачков трафика. использоватьЭтот урок Кэти Хемпениусдля оценки, стабилизации, улучшения и мониторинга ваших серверов;

Уменьшите зависимость сайта от сторонних плагинов, инструментов и библиотек.. Они увеличивают объем кода, который необходимо выполнить на сервере или в браузере. Это увеличивает потребление ресурсов и вредит таким показателям, как время до первого байта, первая отрисовка содержимого и LCP;

Используйте кэш по максимуму.Кэширование — основа отличной производительности в Интернете. Многие ресурсы могут храниться в кэше месяцами или даже годами (логотипы, значки навигации, медиафайлы). Кроме того, если ваш HTML статический, вы можете его кэшировать, что может значительно уменьшить TTFB;

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

Используйте сервис-воркеров. Service Workers уменьшают размер полезных данных HTML, избегая дублирования общих элементов. После установки сервис-воркер запрашивает с сервера минимальный объем данных и преобразует их в полноценный HTML-документ.Ознакомьтесь с этим руководством Филипа Уолтона для получения более подробной информации..

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

Рендеринг на стороне клиента (CSR) — это использование JavaScript для рендеринга страниц непосредственно в браузере. Такой подход переносит задачи (извлечение данных, маршрутизация и т. д.) с сервера на клиента. Поначалу CSR может быть идеальным решением, но по мере того, как вы добавляете больше JavaScript, его становится все труднее поддерживать.

Если вы внедрили CSR, вам нужно быть особенно осторожным при оптимизации JavaScript.Разделение кода, сжатие и минификация обязательны.. Кроме того, используйтеЗагрузка сервера HTTP/2 иСсылка rel=preload может помочь быстрее доставить критически важные ресурсы.

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

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

5. Используйте rel=preload, rel=preconnect и rel=dns-prefetch.

Эти три свойства помогают браузеру, указывая ему на ресурсы и соединения, которые необходимо обработать в первую очередь.

Во-первых, используйте rel=preload для ресурсов, которым браузер должен уделять приоритетное внимание. Обычно это изображения, видео, ключевые CSS или шрифты, расположенные над сгибом страницы. Это так же просто, как добавить несколько строк в тег head, например:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

При предварительной загрузке шрифтов такие вещи, как as="font", type="font/woff2" и crossorigin, могут помочь браузеру расставить приоритеты ресурсов во время рендеринга. В качестве бонуса предварительная загрузка шрифтов также помогает им соответствовать FCP, тем самым уменьшая сдвиг макета.

Forbes.com использует этот метод, чтобы сократить время загрузки шрифтов:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

Затем rel=preconnect сообщает браузеру, что вы намерены немедленно установить соединение с доменом. Это сокращает количество обращений к важным доменам. Опять же, реализовать это очень просто:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

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

Наконец, чтобы сэкономить время на поиске DNS менее важных соединений, используйте rel=dns-prefetch.

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

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

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

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

Уменьшите показатели LCP на веб-сайте WordPress

Перечисленные выше методы помогают улучшить LCP на всех сайтах, в том числе на WordPress (WP). Однако два дополнительных совета также могут помочь оптимизировать этот показатель на вашем сайте WP:

Выберите легкую тему.Слишком загруженная тема может значительно увеличить время загрузки и нанести вред вашим основным веб-жизненным показателям, включая LCP. Вот почему вам следует тщательно выбирать тему. Для более подробной информации проверьтеЭто исследование Кинсты;

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

Оба эти совета необходимы при использовании веб-сайта WP. Объедините их с методами, перечисленными выше, и вы увидите значительные улучшения в LCP.

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

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

Полевые данные предоставлены Коллекция отчетов об опыте пользователя (CrUX). Эти данные показываютреальные пользователиКак испытать свой сайт. Данные о полях можно найти прямо под общим баллом в PageSpeed Insights:

优化LCP 的几种方法,一键 优化LCP 插件 WP Metreo

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

Если PageSpeed Insights не отображает этот раздел из-за отсутствия данных, вы можете использовать другой инструмент для доступа к набору данных CrUX:

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

Аналогично, обязательно проверяйте отчет Core Web Vitals хотя бы раз в месяц. Иногда проблемы возникают в неожиданных местах и долгое время остаются незамеченными.

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

счет

Ответить

Ваш адрес email не будет опубликован. Обязательные поля помечены *