Самая большая содержательная краска, как уменьшить

Обновлено: 21.11.2024

Содержание; Словарь Вебстера определяет «содержательный» как… не найденный. Очевидно, что кто-то придумал это слово, но это не обязательно плохо.

Мир показателей взаимодействия с пользователем быстро меняется, поэтому необходима новая терминология. Максимальная отрисовка содержимого (LCP) – это один из показателей, измеряющих время рендеринга контента на веб-странице.

Что такое самая большая содержательная отрисовка?

Google определяет LCP как "время рендеринга самого большого элемента контента, видимого в области просмотра". Для того, о чем мы говорим в этом блоге, мы будем считать «контентом» изображение, обычно это файл JPEG или PNG. В большинстве случаев «самый большой» указывает на главное изображение, которое находится «вверху страницы» и является одним из первых изображений, которые люди замечают при загрузке страницы. Применение оптимизации к такому большому контенту имеет решающее значение для улучшения LCP.

Возможно, полезнее рассматривать LCP по сравнению с другими показателями. Например, First Contentful Paint (FCP) и Visually Complete book end LCP.

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

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

По мнению Google, чтобы обеспечить удобство работы пользователей, LCP должен выполняться в течение 2,5 секунд после первой загрузки страницы. Плохие значения — это все, что превышает 4 секунды.

Как крупнейшая содержательная отрисовка влияет на показатели Lighthouse и SEO?

Теперь LCP является частью нескольких показателей Core Web Vitals, которые Google будет измерять в своем алгоритме ранжирования. Каждый из основных веб-показателей представляет собой отдельный аспект пользовательского опыта, поддается измерению в полевых условиях и отражает реальный опыт критического, ориентированного на пользователя результата.

В случае общей оценки Google Lighthouse LCP представляет собой 25-процентный вес по сравнению с оценкой производительности Lighthouse версии 6.0. Это делает LCP наиболее важным показателем Core Web Vitals для определения оценки производительности.

Хотя Google указал, что контент по-прежнему является наиболее важным фактором в рейтинге SEO, лучший пользовательский опыт (по оценке Core Web Vitals) будет способствовать более высокому рейтингу в переполненном поле. Если есть много веб-сайтов, конкурирующих за первые места в поисковых системах, то самая большая содержательная отрисовка будет играть решающую роль в рейтинге.

Как улучшить самую большую отрисовку с контентом

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

Например, веб-сайт содержит изображение JPEG размером 800 КБ, предназначенное для настольных компьютеров с высоким разрешением. На смартфоне это будет оптимизировано до размера менее 100 КБ без заметного влияния на качество. Благодаря этой единственной оптимизации LCP может улучшиться более чем на 60 %, или на несколько секунд.

Найти экономию в самой крупной содержательной отрисовке с помощью теста скорости изображения

Image Speed ​​Test — это отличный инструмент, предлагаемый ImageEngine.io, который позволяет анализировать возможности улучшения LCP. Просто вставьте URL-адрес веб-страницы, которую вы хотите оптимизировать, и тест покажет вам:

  • Уменьшение полезной нагрузки изображения
  • Индекс скорости
  • Самое большое содержание
  • Время загрузки страницы (визуально полное)

Он также предоставляет видео загрузки веб-страницы с оптимизацией и без нее. Наконец, он анализирует каждое изображение, чтобы оценить экономию полезной нагрузки. В этом случае «самый большой контент» на странице — это изображение. Благодаря оптимизации полезная нагрузка изображения снижается на 94%. Это значительно улучшает LCP.

Как ImageEngine улучшает LCP

ImageEngine – это служба сети доставки содержимого изображений (CDN), упрощающая оптимизацию изображений. По сути, для каждого изображения на странице CDN изображения будет:

  1. Определить модель устройства, запрашивающего веб-страницу;
  2. Оптимизируйте изображение с точки зрения размера, сжатия, формата изображения;
  3. Доставка через пограничный сервер CDN, географически ближайший к пользователю.

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

Рекомендации: предварительное подключение

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

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

Рекомендации: сведите к минимуму блокировку JavaScript и CSS

Когда JavaScript или CSS «блокируются», это означает, что браузеру необходимо проанализировать и выполнить CSS и JavaScript, чтобы отобразить окончательное состояние страницы в области просмотра.

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

Если вы хотите улучшить LCP, есть некоторые приемы, которые стоит изучить более подробно.

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

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

Важный CSS — CSS, необходимый браузеру для настройки структуры и важных стилей той части страницы, которая отображается в верхней части страницы, — должен быть встроенным. Этот встроенный CSS может также относиться к фоновым изображениям, которые, конечно же, также должны обслуживаться CDN изображений.

Не используйте JavaScript для (ленивой) загрузки изображений

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

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

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

[– Это спонсируемая публикация от имени ImageEngine –]

Сотрудники WebdesignerDepot

Сотрудники WDD гордятся тем, что могут выпускать для вас этот ежедневный блог о веб-дизайне и разработке. Если есть что-то, о чем, по вашему мнению, нам следует поговорить, дайте нам знать @DesignerDepot. Другие статьи сотрудников WebdesignerDepot

Хотите улучшить свой самый крупный контент в WordPress?

Самая большая отрисовка контента (LCP) показывает, сколько времени требуется для загрузки основного содержания страницы. Вам нужно просмотреть отчет «Самый большой содержательный элемент рисования» в Lighthouse. Оптимизация этого конкретного элемента поможет, но есть много других факторов, которые определяют ваш показатель LCP.

Самый большой элемент рисования может быть одним из следующих:

  • Изображение
  • Фоновое изображение
  • Видео или анимация

В зависимости от того, какой это элемент, вы можете выполнить определенные оптимизации, чтобы ускорить загрузку вашего элемента LCP (в частности, уменьшить TTFB, исключить ресурсы, блокирующие рендеринг, и сократить время загрузки ресурсов). Оптимизация CSS, изображений, шрифтов и JavaScript также улучшает LCP.

Все эти советы по улучшению отрисовки самого крупного контента относятся только к WordPress.

Самая большая отрисовка содержимого (LCP)Оценка
0–2,5 с Хорошо
2,5–4 с Среднее
Более 4 с Медленно

1. Оптимизируйте самый большой элемент Paint с содержанием

Если самым большим элементом рисования с содержанием является изображение:

  • Сжатие и предварительная загрузка.
  • Используйте правильные размеры.
  • Укажите размеры изображения.
  • Преобразовать в WebP.
  • Отправлять его из CDN.
  • Исключите его из отложенной загрузки.

Если самым большим элементом рисования с содержанием является фоновое изображение:

Если вашим самым большим элементом рисования является видео или анимация:

  • Сжимайте видео перед загрузкой.
  • Избегайте самостоятельного размещения видео и вместо этого загружайте его на YouTube.
  • Видео и анимация в главном разделе неизбежно замедляют работу LCP.

Если ваш самый большой элемент рисования с контентом является блочным элементом:

  • Используйте блоки правильно и упростите дизайн.
  • Определите, какие текстовые узлы принадлежат вашему элементу LCP.
  • Блочные элементы часто имеют более низкий LCP, чем видео/анимации.

2. Предварительно загрузите свое самое большое содержательное изображение Paint

Если вашим элементом LCP является изображение, Google, вероятно, порекомендует предварительно загрузить его.

Это можно сделать вручную или во многих плагинах скорости, таких как WP Rocket или Perfmatters. Это даст браузеру указание загрузить изображение как можно скорее, а также является рекомендацией.

3. Уменьшите время TTFB до менее 600 мс

Google указывает медленное время отклика сервера как основной способ улучшить LCP.

TTFB 600 мс и более будет помечен в Lighthouse. Обычно это происходит на дешевом виртуальном хостинге (бренды GoDaddy, Bluehost, EIG). Backlinko также обнаружил, что у SiteGround медленный TTFB.

Присоединяйтесь к группе WordPress Hosting в Facebook, чтобы получать беспристрастные отзывы. Мы все знаем, как много предвзятых партнеров (включая меня, но я, по крайней мере, пытаюсь направить вас в правильном направлении).

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

Устранение ресурсов, блокирующих отрисовку, — еще одна рекомендация по улучшению LCP в WordPress.

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

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

5. Размещайте ресурсы из CDN

Обслуживание изображений и других ресурсов из сети CDN может улучшить отрисовку самого большого контента и общее время загрузки.

Два популярных варианта — Cloudflare и BunnyCDN. Если вы используете Cloudflare, подумайте об использовании их автоматической оптимизации платформы для обслуживания вашего сайта WordPress из пограничной сети Cloudflare. Некоторые плагины, такие как Flying Images, сжимают изображения и загружают их из CDN Staticly.

Источник: группа WP Speed ​​Matters в Facebook

Источник: группа WP Speed ​​Matters в Facebook

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

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

Ваши шрифты, самое большое содержательное изображение Paint и, возможно, файлы CSS и JavaScript могут быть предварительно загружены, чтобы они загружались немедленно. Вы можете сделать это вручную или в WP Rocket и других плагинах.

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

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

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

  • Использовать правильный размер изображений — обрезать/изменить размер изображений до их правильных размеров.
  • Укажите размеры изображения — используйте атрибут ширины/высоты в HTML-коде изображения.
  • Сжатие изображений – популярны ShortPixel, TinyPNG, Photoshop и GIMP.
  • Отложенная загрузка изображений — встроенная функция WordPress 5.5 (исключая изображения в верхней части экрана).
  • Используйте WebP — используйте подключаемый модуль, например ShortPixel, для преобразования изображений в WebP или онлайн-конвертер WebP, если вы хотите преобразовать только несколько важных изображений.
  • Использовать адаптивные изображения – используйте плагин для показа изображений меньшего размера на мобильных устройствах.

8. Оптимизируйте CSS и JavaScript

Web Vitals уделяет особое внимание оптимизации CSS и JavaScript, и самая большая содержательная краска ничем не отличается.

Удалите неиспользуемые CSS и JavaScript. Это можно сделать с помощью таких плагинов, как Asset CleanUp или Perfmatters. Плагины, компоновщики страниц и другие вещи могут загружаться на весь ваш сайт, поэтому вы можете отключить их, если они не используются в определенных местах. Другие инструменты, такие как RapidLoad (плагин премиум-класса от Autoptimize) и онлайн-инструменты, такие как PurifyCSS, также могут удалять неиспользуемый CSS.

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

Минимизировать, комбинировать, откладывать, встраивать — можно выполнять в большинстве подключаемых модулей кэширования, а также в Cloudflare, Autoptimize и Async JavaScript. Как я упоминал ранее, я рекомендую Autoptimize и Async JavaScript, так как они лучше справляются с обработкой CSS и JavaScript, чем другие методы.

Сторонний JavaScript. JavaScript из стороннего кода может привести к более высокой отрисовке контента, особенно если он загружается в верхней части страницы. Просмотрите отчет об уменьшении стороннего кода в Lighthouse и оптимизируйте его. Многие вещи могут быть размещены локально (Google Fonts, Analytics, Tag Manager и Gravatars) с использованием таких плагинов, как OMGF, Flying Analytics и WP User Avatar. Вы также можете использовать подсказки браузера, такие как предварительная загрузка, предварительная выборка и предварительное подключение, как указано в этом руководстве.

Удаление неиспользуемых элементов CSS/JS Elementor в Perfmatters

9. Ускорить загрузку шрифтов

Шрифты часто вносят наибольший вклад как в наибольшую содержательную отрисовку, так и в кумулятивное изменение макета.

Вы можете узнать, размещены ли ваши шрифты локально, просмотрев отчет PageSpeed ​​Insights или GTmetrix Waterfall. Если они размещены локально, они будут обслуживаться с вашего доменного имени.

10. Воспользуйтесь преимуществами своего плагина кэширования

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

Некоторые подключаемые модули кэширования, такие как LiteSpeed ​​Cache и SG Optimizer, используют кэширование на стороне сервера, которое обычно быстрее (при кэшировании) быстрее, чем подключаемые модули кэширования на основе файлов. Однако такие плагины, как WP Rocket, имеют гораздо больше функций оптимизации скорости, чем большинство других плагинов кеша (отложить и отложить JavaScript, предварительную загрузку, предварительное подключение, предварительную выборку, мобильный кеш, оптимизированную доставку CSS и т. д.).

Плагины кеша, о которых я только что упомянул, — хороший выбор, и у меня есть руководства как для WP Rocket, так и для SG Optimizer. Просто убедитесь, что вы проверили все настройки и воспользовались преимуществами его функций.

11. Предварительная выборка и предварительное подключение сторонних доменов

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

Это можно сделать вручную в таких плагинах, как WP Rocket или Perfmatters. WP Rocket автоматически предварительно подключает URL-адреса CDN и сторонние шрифты, но вам все равно нужно будет добавить предварительно загруженные домены.

Повторно протестируйте самую большую отрисовку с содержанием

Запустите свой сайт с помощью Lighthouse или GTmetrix и повторно протестируйте самую большую содержательную краску. Надеемся, что его советы, изложенные в этом руководстве, помогли вам получить скорость менее 2,5 с, как того хочет Google.

Как улучшить самую большую содержательную отрисовку в WordPress?

Найдите в Lighthouse самый большой элемент рисования с содержанием, который может быть изображением, фоновым изображением, видео или блочным элементом. Оптимизируйте его, например, вы можете предварительно загрузить свой образ LCP. Уменьшение TTFB и устранение ресурсов, блокирующих отрисовку, также улучшит LCP.

Как мне улучшить самую большую содержательную отрисовку с помощью WP Rocket?

WP Rocket может улучшить отрисовку самого крупного контента, предварительно загрузив изображение LCP, отложив загрузку JavaScript, оптимизировав доставку CSS и минимизировав/сочетая CSS и JavaScript. Он также может исключать основные изображения из отложенной загрузки и использовать подсказки ресурсов браузера для раннего подключения к сторонним доменам.

Как мне предварительно загрузить самое большое содержательное изображение Paint?

Найдите самое большое первое содержательное изображение в отчете Lighthouse и предварительно загрузите его вручную с помощью кода или подключаемых модулей скорости, таких как WP Rocket, Perfmatters или Pre* Party Resource Hints.

Надеюсь, это помогло! Напишите мне в комментариях, если у вас есть вопросы.

См. также: Руководство по скорости WordPress

О Томе Дюпюи

Том Дюпюи пишет руководства по скорости работы WordPress и SEO в своей квартире в Денвере, штат Колорадо. В свободное время он играет в Rocket League и смотрит документальные фильмы об убийствах. Прочтите его биографию, чтобы узнать о нем 50 случайных и тревожных фактов.

Привет, я Том. Я пишу о скорости WordPress, хостинге, который не является мусором, и немного SEO. Загляните в мою биографию, в которой есть 50 случайных и тревожных вещей обо мне - с фотографиями кошек и путешествий!

Расширение возможностей WooCommerce Checkout & Payments Принимайте криптовалютные платежи с помощью плагина CoinGate

СОДЕРЖАНИЕ

Хостинг SiteGround — скидка 69 %

Подпишитесь на нас

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

В этой статье мы обсудим, что такое LCP и как их измерить. Затем мы рассмотрим несколько предложений по ускорению загрузки. Начнем!

Что такое самая большая отрисовка контента (LCP)?

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

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

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

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

Что такое хороший рейтинг LCP?

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

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

Если ваш LCP находится в диапазоне от 2,5 до 4,0, вы получите оранжевый балл, поскольку ваш балл «требует улучшения».

Предположим, что LCP больше 4 секунд. В этом случае оценка становится «плохой», и вы должны исправить ее как можно быстрее.

Продолжение статьи ниже

Почему LCP важен?

Теперь, когда мы знаем, что такое Largest Contentful Paint и что он делает, мы можем понять, почему этот показатель так важен для SEO. Скорость сайта широко признана в SEO-индустрии как критерий ранжирования, но для этого есть множество причин, и, как следствие, множество причин, по которым LCP будет влиять на SEO.

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

  • Эта статистика была подготовлена ​​и рекомендована самой компанией Google.

Тот факт, что Google рекомендует использовать этот индикатор, уже демонстрирует его значимость. Начиная с мая этого года LCP станет фактором по умолчанию для измерения аудита веб-эффективности.

  • Скорость загрузки вашего веб-сайта влияет на ваш рейтинг.

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

  • Самая спорная краска влияет на взаимодействие с пользователем.

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

Как сообщается о наибольшей отрисовке содержимого (LCP)?

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

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

Какие типы контента подходят для LCP?

Эта мера активируется не для всех видов производимого контента. На момент написания доступны следующие элементы:

  • img> элементы
    • Теги
  • elements> внутри
  • Изображение тега в виде постера (не весь видеофайл)
  • С помощью метода CSS url() можно установить фоновое изображение.
  • Текстовые узлы (которые обычно являются основным текстовым содержимым) и другие текстовые компоненты встроенного уровня находятся в элементах блочного уровня.

Как измерить самую большую содержательную отрисовку?

Google PageSpeed ​​Insights

Использование инструмента PageSpeed ​​Insights от Google — это самый простой способ определить самую большую отрисовку контента на вашем веб-сайте. Он проведет лабораторную оценку вашего веб-сайта и вернет подлинные пользовательские данные, которые уже были собраны Google. Эти результаты делятся на две категории: полевые данные и лабораторные данные.

Продолжение статьи ниже

Поскольку лабораторный тест Google использует довольно медленное сетевое соединение, ваши показатели обычно будут медленнее в лаборатории, чем у реальных пользователей. Например, LCP поля для вас на Youtube составляет 3,1 с, однако лабораторный тест дает значение 7,8 с.

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

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

В разделе "Диагностика" вы также можете найти элемент, создавший самую большую отрисовку содержимого.

Инструменты разработчика Chrome

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

В разделе "Диагностика" вы также можете найти элемент, создавший самую большую отрисовку содержимого.

Проверьте временные интервалы профилирования производительности. Чтобы увидеть интересные подробности внизу, нажмите на маркер LCP.

Отчет об удобстве использования Chrome (CrUX)

Отчет об удобстве использования Chrome (CrUX) содержит статистику с миллионов крупных веб-сайтов о реальном опыте пользователей.

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

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

Продолжение статьи ниже

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

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

Как оптимизировать для максимально насыщенной отрисовки

Уменьшить время медленной загрузки ресурсов

  • Изображения, фоновые изображения и ползунки видео должны быть оптимизированы.

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

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

Форматы изображений JPEG и JPG (Joint Photographic Experts Group, произносится как jay-peg) одинаковы. Здесь мы будем использовать формат «JPG». Расширение файлов JPG — .jpg или .jpg. Для изображений с тысячами или миллионами цветов, таких как фотографии, JPG обычно является лучшим вариантом. Обычно это файлы самого большого размера, а JPG отлично справляется со сжатием.

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

PNG (Portable Network Graphics, произносится как ping или pee-en-gee) — лучший формат для штриховых рисунков и других изображений с ограниченной цветовой палитрой.

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

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

Формат, который вы используете, имеет огромное значение.

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

Файлы JPEG и PNG больше, чем изображения WebP. По данным Google, преобразование изображения в WebP может привести к уменьшению размера на 25–34%. Чтобы добиться этого сокращения и увеличения времени загрузки веб-страниц, этот формат сочетает в себе сжатие без потерь и с потерями (метод сжатия данных, при котором размер файла уменьшается за счет удаления из файла выборочного материала).

Однако WebP (наряду с другими форматами файлов, такими как JPEG XL) поддерживается не всеми браузерами.

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

Мы рассмотрим здесь некоторые из них, но быстрый поиск в Google найдет гораздо больше.

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

Imagemin for WebP – это программа, которая конвертирует изображения в формат WebP. Если вы используете инструменты сборки или сценарии сборки, этот плагин npm будет лучшим вариантом. Вы можете снова выбрать виды сжатия, резкость, настройки качества и множество других параметров.

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

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

CDN отлично подходят для оптимизации изображений. Amazon CloudFront — это популярная CDN для веб-сайтов Amazon Web Services (AWS). Платформа Duda использует AWS для показа своих фотографий, что уменьшает их размер и ускоряет время загрузки.

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

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

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

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

Удалите JavaScript и CSS, блокирующие визуализацию

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

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

  1. Скопируйте исходный код и вставьте его в поле или загрузите файл исходного кода.
    1. Чтобы минимизировать или сжать код, нажмите кнопку "Сократить CSS".
    2. Скопируйте вывод минимизированного кода или сохраните файл минимизированного кода.
    • Отложить некритичный CSS

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

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

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

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

    Выберите веб-сервер с низким временем отклика

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

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

    • Используйте более эффективный сервер (больше оперативной памяти и ЦП)
    • Обновите гаджет сообщества на сервере

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

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

    Подведение итогов!

    LCP – это показатель, отражающий общее "здоровье" производительности вашего веб-сайта. С другой стороны, неспособность отслеживать LCP и устранять проблемы является серьезной ошибкой, которая повлияет не только на удобство использования вашего сайта, но и на вашу способность привлекать клиентов.

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

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

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

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

    Что означает самая большая содержательная краска?

    Самая большая отрисовка контента или LCP – это один из показателей Core Web Vitals, который измеряет, сколько времени требуется для отображения на экране самого большого элемента контента. Благодаря последним обновлениям LCP также включен в обновление Google Page Experience, что делает его еще более важным, если вы хотите улучшить рейтинг своего веб-сайта и улучшить взаимодействие с пользователем на своем веб-сайте.

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

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

    Важно отметить, что самый большой элемент рисования контента может быть разным в мобильной и настольной версиях вашего сайта. Например, в представлении вашего веб-сайта на рабочем столе может быть изображение в виде LCP, а в представлении для мобильных устройств — нет, потому что все сворачивается. Мобильный вид вашего веб-сайта может иметь h1 в качестве LCP. H1 в мобильном представлении будет загружаться быстрее, чем изображение в настольном представлении. В Core Web Vitals предпочтение отдается мобильному представлению, поэтому это важно учитывать при разработке страниц.

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

    Как самая большая содержательная отрисовка влияет на скорость страницы?

    Максимальная отрисовка контента может повлиять на скорость страницы вашего веб-сайта и вызвать у пользователей неудобства на вашем сайте. На его долю приходится 25% оценки Page Speed ​​Insights. Устранив самые серьезные проблемы с элементами рисования, вы сможете повысить рейтинг своего веб-сайта и скорость страницы.

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

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

    Что приводит к плохой отрисовке с наибольшим содержанием?

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

    • В идеале вы должны стремиться к LCP 2,5 секунды или меньше, что считается хорошим показателем LCP.
    • Если ваш максимальный показатель отрисовки контента составляет от 2,5 до 4,0 секунд, вам необходимо улучшить LCP на своем веб-сайте.
    • Показатель LCP в 4,0 секунды или выше является плохим и может привести к серьезным проблемам с элементами рисования на вашем веб-сайте.

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

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

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

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

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

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

    Как исправить самые серьезные проблемы с элементами рисования?

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

    У нашей темы Shoptimizer низкий показатель LCP — 1,8 секунды!

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

    Крупнейшим элементом рисования с содержанием является изображение.

    Далее рассмотрим несколько различных способов устранения самых серьезных проблем с элементами рисования:

    Сократить время отклика сервера

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

    Для немедленного улучшения попробуйте перейти на более быстрый хост. Мы рекомендуем ознакомиться с предложениями Nexcess и Cloudways.

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

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

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

    Если элементом LCP является изображение, необходимо убедиться, что оно достаточно оптимизировано для быстрой загрузки без каких-либо проблем с LCP. Например, вы можете сжимать изображения, чтобы ускорить их загрузку для всех типов посетителей и их интернет-соединений. Это означает, что переход от файла изображения размером 300 КБ к файлу изображения размером 150 КБ может снизить оценку LCP на вашей веб-странице. Существует два типа сжатия: один для файлов JPEG и GIF, а другой для файлов изображений RAW и PNG.Изображения файлов JPEG и GIF относятся к типам изображений с потерями. Это означает, что при сжатии из данных изображения удаляются части, снижающие качество изображения. Хотя это делает изображение меньшего размера, чем раньше, это не очень хорошо для сохранения качества изображения. Для файлов изображений RAW и PNG можно использовать сжатие без потерь. Этот тип сжатия поддерживает почти такое же качество изображения, поскольку не удаляет данные изображения. Это лучше всего подходит для создания высококачественных изображений, которые лучше всего выглядят на большинстве устройств.

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

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

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

    Оптимизация элементов CSS и Javascript

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

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

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

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

    Предварительно загружать высокоприоритетные ресурсы

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

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

    Использование сторонних инструментов и служб может отрицательно сказаться на скорости загрузки страниц и, в конечном итоге, на показателях LCP. Используя атрибут rel=preconnect, вы можете ускорить время загрузки, предварительно установив важные сторонние соединения. Таким образом, когда посетители откроют ваш веб-сайт, содержимое уже будет загружено и готово к работе.

    Дополнительный бонус: что еще можно сделать, чтобы избежать серьезных проблем с элементами рисования?

    • Используйте сжатие на уровне сервера. Дальнейшее уменьшение размера вашего сайта может помочь улучшить время отклика и скорость загрузки вашего сайта. Для этого можно использовать серверный алгоритм сжатия, например Gzip.
    • Кэширование страниц. Использование плагина кэширования может помочь вам ускорить LCP и повысить скорость страницы. Это упрощает доставку контента быстро и без серьезных проблем с элементами рисования.
    • Визуализация на стороне сервера. Использование рендеринга на стороне сервера — отличный способ улучшить LCP, обеспечив загрузку контента сначала на сервер, а не только на клиент.
    • Предварительный рендеринг. Предварительный рендеринг менее сложен, чем рендеринг на стороне сервера. Он использует браузер без пользовательского интерфейса, используемого для создания статических файлов HTML. Затем эти файлы можно использовать вместе с пакетами JavaScript, чтобы улучшить время отклика сервера и сократить время загрузки страницы на вашем веб-сайте.

    Заключение

    LCP – это самый важный показатель, используемый для измерения скорости страницы и времени отклика на вашем веб-сайте.

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

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

    Кроме того, обязательно ознакомьтесь с нашим учебным пособием «Как избежать больших сдвигов макета» и «Как решить проблему с предупреждением «Избегайте чрезмерного размера DOM», чтобы узнать больше о том, как вы можете улучшить свой показатель Core Web Vitals.

    Вы можете получить нашу тему Shoptimizer WooCommerce с низкими баллами LCP с самого начала.

    Ученый-компьютерщик, писатель B2B SaaS и соучредитель BloggInc. В свободное время она играет в GTA V, бездельничает на ферме или пытается обыграть мужа в бадминтоне в помещении.

    Тема Shoptimizer для WooCommerce

    Shoptimizer – это БЫСТРАЯ тема для WooCommerce, в которой есть множество функций, призванных помочь вам превратить больше пользователей в клиентов.

    Последние руководства по электронной коммерции Просмотреть все руководства

    Превратите свой магазин WooCommerce из медленного неэффективного беспорядка в молниеносную ракету 🙂

    Классы доставки WooCommerce позволяют назначать условия доставки для определенных продуктов.

    Как установить и настроить плагин WooCommerce в первый раз на вашем сайте.

    Мы рассмотрим все, от установки WooCommerce до оптимизации существующих магазинов.

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

    Что такое электронный маркетинг и как настроить электронный маркетинг для WooCommerce?

    Читайте также: