#12-Правка черновика

'#99. Черновики : draft';

'Tools_DraftController_actionUpdateHtml';

'#layouts_templates_updateHtml';

Правка кода HTML в тексте

В этом посте:
<ul>
<li>Что такое ленивая загрузка?</li>
<li>Почему ленивая загрузка важна в SEO.</li>
<li>Как работает ленивая загрузка: техническая основа.</li>
<li>Ленивая загрузка при рендеринге на стороне клиента и на стороне сервера.</li>
<li>Проблемы SEO, которые вызывает ленивая загрузка.</li>
<li>Как сделать контент с отложенной загрузкой пригодным для сканирования и индексации.</li>
<li>Лучшие практики по реализации ленивой загрузки без ущерба для SEO.</li>
<li>Начните мониторинг ваших лениво загруженных активов.</li>
</ul>
Вы нажимаете на страницу товара и ждете несколько секунд, чтобы увидеть загрузку первого изображения.&nbsp;
Но почему изображение не загрузилось?
Потому что его загрузка отложена.&nbsp;
Ленивая загрузка откладывает такой контент, как изображения, видео и компоненты JavaScript, до тех пор, пока они не понадобятся.&nbsp;
В этом посте мы объясним, как отложенная загрузка влияет на производительность и SEO веб-сайта, технические способы ее реализации и как избежать распространенных ошибок, которые могут навредить вашим рейтингам.&nbsp;
<h2>Что такое ленивая загрузка?</h2>
Ленивая загрузка &ndash; это метод оптимизации производительности, при котором некритичные ресурсы, такие как изображения, фреймы, видео или компоненты JavaScript, загружаются только при необходимости. Это означает, что ресурс загружается только при прокрутке страницы до того места, где он становится видимым.
Ленивая загрузка может помочь оптимизировать использование полосы пропускания и ускорить загрузку страницы. Вместо того, чтобы загружать всё сразу при посещении страницы посетителем, ленивая загрузка откладывает загрузку всего, что не требуется в данный момент. Это повышает скорость загрузки и обеспечивает более плавный пользовательский опыт.
Предположим, вы работаете в воображаемом интернет-магазине Jenhoue Home, который продаёт минималистичную мебель и аксессуары для дома. На главной странице размещены крупные изображения товаров высокого разрешения, включая элегантные диваны, деревянные стулья и керамические кашпо, расположенные на длинной прокручиваемой странице.
Без отложенной загрузки браузер пытается сразу загрузить все изображения товаров на странице, даже те, которые ещё не видны на экране. Это может задержать первоначальную загрузку страницы, особенно в медленных сетях или на мобильных устройствах. Такая медленная загрузка страницы может привести к тому, что пользователи будут отказываться от просмотра, полагая, что ваш сайт работает неправильно.
Но при ленивой загрузке первыми загружаются только те изображения, которые видны сразу вверху страницы. Остальные, например, красивый журнальный столик из орехового дерева в самом низу, не загружаются, пока вы не прокрутите страницу достаточно далеко, чтобы до них добраться.
Таким образом, ваша веб-страница не будет зависать, и пользователь сможет просматривать ее быстрее, не дожидаясь, пока все загрузится в фоновом режиме.&nbsp;
<h2>Почему ленивая загрузка важна в SEO</h2>
Google ясно дал понять: скорость загрузки страниц и удобство использования напрямую влияют на рейтинг. И отложенная загрузка помогает улучшить и то, и другое при правильном использовании.&nbsp;
Давайте разберемся как.&nbsp;
<h3>Улучшает основные веб-показатели&nbsp;</h3>
<a title="Основные веб-показатели (Core Web Vitals)" href="https://shopnseo.ru/texts/spravochnik-po-seo-onlayn-torgovle-i-internetu/cwb-core-web-vitals/">Основные веб-показатели (Core Web Vitals)</a> &ndash; это ключевые показатели производительности, которые Google использует для оценки пользовательского опыта. Ленивая загрузка напрямую влияет на два из них: отрисовку самого большого контента (LCP - Largest Contentful Paint) и взаимодействие со следующей отрисовкой (INP - Interaction to Next Paint).
<ul>
<li>LCP измеряет время загрузки самого крупного видимого элемента контента (часто изображения). Ленивая загрузка обеспечивает загрузку только содержимого, расположенного над сгибом (сразу видимого при открытии веб-страницы), что повышает воспринимаемую скорость загрузки.</li>
<li>INP измеряет скорость реакции страницы на пользовательский ввод. Ленивая загрузка снижает нагрузку на основной поток браузера, откладывая выполнение компонентов с большим объёмом JavaScript для обеспечения плавного взаимодействия.</li>
</ul>
Предположим, на странице со списком товаров Jenhoue Home изначально видны главный баннер и несколько миниатюр товаров в верхнем ряду. Благодаря отложенной загрузке остальных элементов, Jenhoue Home сокращает время загрузки с 4,2 до менее чем 2,5 секунд и соответствует &laquo;хорошему&raquo; эталонному показателю Google.
А если магазин откладывает загрузку интерактивных функций, таких как встроенные обзоры или видеодемонстрации, до тех пор, пока вы не прокрутите страницу до них, это также освобождает ресурсы при загрузке страницы. В результате, когда пользователь нажимает кнопку &laquo;Добавить в корзину&raquo;, страница реагирует быстрее и воспринимается более оперативно.
<h3>Снижает нагрузку на сервер и время до достижения цели (TTFB - Time to First Byte) &nbsp;</h3>
Нагрузка на сервер &ndash; это объём работы, который сервер должен выполнить для обработки и доставки контента пользователям. Чем больше контента на странице (изображений, скриптов, видео), тем интенсивнее приходится серверу.
А время до первого байта (TTFB) &ndash; это время, которое требуется вашему браузеру, чтобы получить первый байт данных с сервера после выполнения HTTP-запроса (запроса, отправляемого браузером серверу с просьбой предоставить контент).&nbsp;
Примечание: Длительное время ожидания = медленный сайт = плохой пользовательский опыт&nbsp;
Но как ленивая загрузка может нам в этом помочь?
Ленивая загрузка ограничивает объём запрашиваемого контента заранее. Это означает, что браузер не запрашивает загрузку всего содержимого страницы сразу после её открытия. Любые изображения, видео или элементы JavaScript, расположенные ниже по странице, запрашиваются только позже, при прокрутке страницы к ним.
Например, вместо возврата 15 изображений товаров на странице категории запрашивается загрузка только шести изображений сверху. Это позволяет серверу Jenhoue Home быстрее реагировать и быстрее доставлять первый байт данных.
<h3>Улучшает возможность сканирования и индексации</h3>
Удобство сканирования определяет, насколько легко поисковые роботы, такие как Googlebot, могут получить доступ к контенту на вашей странице и прочитать его.&nbsp;
Дальше происходит &nbsp;индексация.
Если бот успешно сканирует ваш контент и считает его ценным, он добавляет его в индекс Google, чтобы он мог появиться в результатах поиска.
Ленивая загрузка помогает ботам сосредоточиться только на значимом контенте, не отвлекаясь на изображения, находящиеся в нижней части экрана (которые не видны сразу при открытии веб-страницы).&nbsp;
Однако плохая реализация может иметь неприятные последствия.&nbsp;
Это означает, что если контент загружается только при прокрутке, он может никогда не быть просканирован или проиндексирован, поскольку Googlebot не имитирует прокрутку. Таким образом, ваши товары, изображения или отзывы могут быть невидимы для поисковых систем.
Чтобы решить эту проблему, добавьте loading="lazy" атрибут в свой HTML.&nbsp;
<h3>Улучшает пользовательский опыт и снижает показатель отказов</h3>
Пользовательский опыт и скорость загрузки страниц идут рука об руку.&nbsp;
Если страница загружается медленно, вы можете закрыть ее, даже не увидев содержимое веб-страницы.&nbsp;
Ленивая загрузка решает эту проблему, сосредоточивая ресурсы на загрузке первого увиденного вами контента, что позволяет вам сразу начать работу с веб-сайтом, а не закрывать его.
Возьмем, к примеру, блог Jenhoue Home.&nbsp;
Каждая публикация содержит около 10&ndash;15 изображений и встроенных видео, демонстрирующих советы по минималистичному дизайну. Без отложенной загрузки браузер загружает все эти ресурсы заранее, что может задержать доступность страницы.
При ленивой загрузке сначала загружаются только главное изображение и другие материалы, расположенные в верхней части страницы. По мере прокрутки статьи остальные визуальные материалы загружаются автоматически.&nbsp;
Результат?&nbsp;
Страница загружается быстро, и вы дольше остаетесь на ней, не покидая ее.&nbsp;
<h2>Как работает ленивая загрузка: техническая основа</h2>
Существует несколько способов реализации ленивой загрузки: от простых HTML-атрибутов до более сложных методов JavaScript. Некоторые из них удобны для новичков, другие же больше ориентированы на разработчиков.&nbsp;
Давайте посмотрим, как работает каждый из них.
<h3>Нативная ленивая загрузка HTML&nbsp;</h3>
Современные браузеры, такие как Firefox и Chrome, автоматически назначают изображениям разные приоритеты загрузки в зависимости от их положения на странице. Таким образом, изображения или другие ресурсы, находящиеся за пределами начальной области просмотра (ниже сгиба), получают более низкий приоритет.&nbsp;
Это означает, что они по-прежнему загружаются, но после того, как более важный контент будет загружен первым.
Но предположим, вы хотите, чтобы изображения загружались только перед тем, как появиться на экране. Для этого достаточно добавить loading="lazy"к тегу изображения.
Вот как это выглядит:
<code>&lt;img src="sofa.jpg" loading="lazy" alt="Beige Scandinavian Sofa" /&gt;</code>
Это сообщает браузеру, что не следует загружать изображение до тех пор, пока оно не появится в области просмотра.
<h3>API IntersectionObserver&nbsp;</h3>
API определяет, попадает ли элемент в область просмотра или покидает её. Это один из самых эффективных способов отложенной загрузки ресурсов, таких как фоновые изображения или видео IntersectionObserver, без использования прослушивателей событий прокрутки JavaScript или сторонних библиотек.
В отличие от старых методов, которые ждут, пока пользователь прокрутит страницу, IntersectionObserver отслеживает определенные элементы и инициирует обратный вызов в тот момент, когда они появляются в поле зрения.&nbsp;
А что самое лучшее?
Поддерживается всеми основными браузерами.
Итак, давайте посмотрим, как это можно реализовать:
Отметьте в HTML-коде элементы, которые вы хотите загрузить лениво (например, фоновый баннер). Для этого добавьте отложенный класс, например:
<code>&lt;div class="hero-banner deferred"&gt;</code> <code>&lt;h2&gt;Fall Collection 2025&lt;/h2&gt;</code> <code>&lt;/div&gt;</code>
Затем в JavaScript используйте его document.querySelectorAll('.deferred')для выбора этих элементов и наблюдения за ними с помощью IntersectionObserverAPI.
Когда элемент приближается к области просмотра, скрипт заменяет заполнители (например, серый фон или data-srcатрибуты) фактическим содержимым.
Это уменьшает вес начальной страницы, при этом гарантируя, что вся информация загрузится непосредственно перед тем, как ее увидит пользователь.
Например, если Jenhoue Home откладывает показ фоновых изображений для баннеров сезонных продуктов, IntersectionObserverон может определить, когда эти разделы будут просмотрены, а затем загрузить реальные изображения.&nbsp;
Результат?&nbsp;
Более быстрая начальная загрузка и плавный, безопасный для SEO рендеринг.
<h3>Сторонние фреймворки и плагины</h3>
Многие популярные CMS и JavaScript-фреймворки предлагают встроенную или плагинную поддержку отложенной загрузки. Однако способы её реализации могут существенно различаться в зависимости от платформы.
Для SEO-специалистов и разработчиков это означает две вещи:
<ul>
<li>Ленивая загрузка может быть уже активна на вашем сайте без пользовательского кода.</li>
<li>Вам все еще нужно понять, где и как это применяется, и проверить, работает ли это так, как ожидается, как для пользователей, так и для Googlebot.</li>
</ul>
<h2>Ленивая загрузка при рендеринге на стороне клиента и на стороне сервера&nbsp;</h2>
То, как ваш веб-сайт доставляет контент &ndash; в браузере (на стороне клиента) или с сервера (на стороне сервера), &ndash; напрямую влияет на то, как поисковые системы видят и индексируют ваши страницы.
<h3>Рендеринг на стороне клиента&nbsp;</h3>
Всякий раз, когда вы запрашиваете контент при клиентской обработке (CSR), контент не поступает с сервера в полностью сформированном виде.&nbsp; Вместо этого браузер создаёт страницу после загрузки и выполнения JavaScript. Это перекладывает нагрузку по рендерингу на браузер, что может замедлить начальную загрузку.
Представьте, что страницы продуктов Jenhoue Home созданы полностью с использованием JavaScript.&nbsp;
Теперь, когда вы (или Googlebot) переходите по URL-адресу товара, сервер отправляет минималистичный HTML-код. Информация о товаре, включая изображения, цену, наличие и отзывы покупателей, извлекается и отображается на стороне клиента с помощью JavaScript.
Теперь, если Jenhoue также отложенно загружает эти элементы с помощью JavaScript, они не будут отображаться сразу при загрузке страницы.&nbsp;
Это становится рискованным для SEO, поскольку у Googlebot ограниченное время для выполнения JavaScript и &laquo;просмотра&raquo; контента. А если отложенно загружаемые ресурсы, такие как карусели изображений, отрисовываются слишком долго, они могут вообще не быть проиндексированы.
<h3>Рендеринг на стороне сервера&nbsp;</h3>
Рендеринг на стороне сервера (SSR) отправляет полностью сформированную HTML-страницу непосредственно с сервера в браузер. Весь ключевой контент &ndash; текст, изображения, метаданные &ndash; уже загружен, даже если некоторые ресурсы (например, изображения) загружаются отложенно для повышения производительности.
Робот Googlebot видит контент сразу, ему не нужно ждать JavaScript. Даже изображения с отложенной загрузкой включаются в HTML-код, поэтому их можно корректно сканировать и индексировать.
Теперь представьте, что Jenhoue Home создан на основе темы Shopify с использованием рендеринга на стороне сервера.
А если вы посетите страницу продукта, HTML-код включает в себя всё необходимое: главное изображение, информацию о продукте и отзывы. Поэтому, даже если некоторые изображения загружаются отложенно для ускорения, Googlebot всё равно сможет увидеть ссылки и корректно проиндексировать контент. Это поможет странице корректно проиндексироваться.
<h2>Проблемы SEO, которые вызывает ленивая загрузка&nbsp;</h2>
Ленивая загрузка повышает производительность, но при неправильной реализации она может непреднамеренно заблокировать поисковым системам доступ к вашему контенту.
Но это только одна проблема.
Ваши SEO-специалисты могут столкнуться с множеством других скрытых проблем. Давайте разберёмся, с какими именно.&nbsp;
<h3>Контент не загружается в окне рендеринга Google</h3>
Ленивая загрузка может помешать поисковым системам увидеть важные разделы вашей страницы. Это происходит, когда контент, например изображения или видео, загружается только после прокрутки страницы или взаимодействия с ней пользователем и не отображается в версии страницы, которую отображает робот Google.
Когда робот Googlebot сканирует ваш сайт, он не только сканирует сырой HTML-код. Он также отображает страницу так, как это делает браузер, чтобы увидеть, что видят пользователи. Но эта визуализация не длится вечно.
Google выделяет короткое окно рендеринга (обычно несколько секунд) для загрузки и обработки контента. Если элементы с отложенной загрузкой не появятся в течение этого времени, они могут быть полностью пропущены.
Допустим, Jenhoue Home выполняет отложенную загрузку изображений товаров с помощью JavaScript, который ждет, пока пользователь прокрутит страницу до середины.&nbsp;
Поскольку Googlebot не прокручивает страницу и останавливает её отображение через несколько секунд, эти изображения не загружаются вовремя и не отображаются в версии страницы Google. Это означает, что они не индексируются, и страница может не ранжироваться по результатам поиска изображений или запросов, связанных с товарами.&nbsp;
<h3>Контент заблокирован JavaScript</h3>
Многие скрипты ленивой загрузки используют JavaScript для ожидания события прокрутки перед загрузкой контента на страницу.&nbsp;
Но Googlebot не прокручивает страницу как человек.
Вместо этого он увеличивает высоту страницы, используя имитированную область просмотра.&nbsp;
Это означает, что скрипты, запускаемые прокруткой, никогда не запускаются, а контент остается скрытым от поискового робота Google.
А если Googlebot его не видит, он не сможет его сканировать.
Если он не может его просканировать, он его не индексирует.
Если он не проиндексирован, он не будет ранжироваться, даже если он виден вашим пользователям.
Но вам не нужно гадать, какая часть вашего контента заблокирована JavaScript (и заблокирована ли вообще). Вы можете проверить это с помощью <a title="Google Search Console (GSC)" href="https://shopnseo.ru/texts/spravochnik-po-seo-onlayn-torgovle-i-internetu/google-search-console/">Google Search Console (GSC)</a>.&nbsp;
Вот как:
<ul>
<li>Перейдите в GSC &gt; &laquo;Инструмент проверки URL&raquo;.</li>
<li>Введите URL страницы.</li>
<li>Нажмите &laquo;Проверить URL-адрес в реальном времени&raquo;.</li>
<li>Нажмите &laquo;Просмотреть протестированную страницу&raquo;.</li>
<li>Если JavaScript поддерживает какую-либо функциональность вашей страницы, найдите отсутствующие &lt;script&gt;теги в разделе &laquo;HTML&raquo;. Gsc протестировал скрипт страницы, масштабированный.</li>
</ul>
Если &lt;script&gt;теги существуют, это означает, что ваши элементы JavaScript видны Googlebot, но если их нет, то Googlebot не может получить доступ ни к одной функциональности JavaScript.&nbsp;
<h3>Содержимое верхней части страницы не загружается</h3>
Ленивая загрузка отлично подходит для отсрочки показа объектов, не отображаемых в нижней части страницы.&nbsp;
Однако если вы используете CMS, например, WordPress, которая автоматически загружает все изображения и видео в режиме &laquo;ленивой загрузки&raquo;, то любой важный контент, расположенный выше сгиба, например, главные изображения или баннеры, также может загружаться в режиме &laquo;ленивой загрузки&raquo;. Это может раздражать ваших посетителей.
Почему?
Потому что при ленивой загрузке контента он часто заменяется заполнителем, например размытым изображением, до тех пор, пока не загрузится реальный ресурс.&nbsp;
Поэтому, если это происходит с главным изображением или любым другим сразу заметным контентом на вашей странице, это отпугнет ваших посетителей.
В конце концов, кто хочет видеть предварительный размытый контент?&nbsp;
Вот почему, если верхнее изображение или баннер загружаются &laquo;лениво&raquo;, это приводит к плохому восприятию пользователем.&nbsp;
Хуже того, если контент не загружается из-за ошибки скрипта, он может вообще не отображаться для Googlebot и не будет проиндексирован.
Представьте, что на главной странице Jenhoue Home размещено большое главное изображение, представляющее сезонную коллекцию. Если изображение загружается в режиме отложенной загрузки или не загружается в медленных сетях, пользователи будут видеть пустой раздел в течение нескольких секунд или не увидят его вовсе.
Это больно:
<ul>
<li>UX, поскольку страница выглядит сломанной или пустой</li>
<li>LCP, как показывает Google, отсутствующее изображение героя является основным контентом и помечается как слишком медленное</li>
<li>SEO, поскольку изображение не загружается во время рендеринга, и Googlebot может полностью его пропустить</li>
</ul>
<h3>Внутренние ссылки или элементы, зависящие от схемы, становятся недоступными&nbsp;</h3>
Иногда разработчики используют ленивую загрузку для повышения производительности всего, включая внутренние ссылки, разделы навигации или блоки, содержащие структурированные данные (например, информацию о продукте или отзывы покупателей).&nbsp;
Если эти ссылки или элементы схемы внедряются только после запуска JavaScript или появляются после действия пользователя (например, прокрутки), Googlebot может их не увидеть, и они будут исключены из сканирования или индексации.
Это происходит, когда:
<ul>
<li>Вы добавляете внутренние ссылки динамически через JavaScript после загрузки страницы.</li>
<li>Разметка вашей схемы загружается с помощью клиентских скриптов, а не в HTML.</li>
<li>Ваши важные разделы ссылок, такие как &laquo;Похожие товары&raquo;, зависят от триггеров прокрутки или клика.</li>
</ul>
Робот Googlebot может сканировать страницу, но полностью пропускать эти ссылки или разметку, если:
<ul>
<li>JavaScript не выполняется вовремя.</li>
<li>Содержимое не отображается в окне рендеринга Google.</li>
</ul>
Предположим, на главной странице Jenhoue под каждым товаром есть карусель &laquo;Вам также может понравиться&raquo;. Этот раздел содержит внутренние ссылки на страницы связанных товаров и встроенную схему отзывов для этих товаров.
Но он загружается с помощью JavaScript только после того, как пользователь прокрутит страницу. А поскольку Googlebot не прокручивает страницу, он не видит ссылки или структурированные данные. В результате эти структурированные данные не сканируются и не индексируются.&nbsp;
<h2>Как сделать контент с отложенной загрузкой пригодным для сканирования и индексации</h2>
Когда робот Googlebot впервые посещает страницу, он быстро сканирует необработанный HTML-код в поисках ссылок и основного контента. Однако он не обрабатывает JavaScript сразу. Это происходит во время второй волны индексации, когда робот Googlebot пытается полностью отобразить страницу, как браузер.
Во время рендеринга он запускает JavaScript, загружает лениво загруженный контент и создает визуальный макет, определяющий, что увидит пользователь.
Однако Google выделяет лишь ограниченное количество времени и ресурсов на отображение каждой страницы.&nbsp;
Таким образом, если ваш контент загружается слишком долго из-за больших скриптов или ожидания срабатывания событий прокрутки, он может не отображаться в окне рендеринга Googlebot.
Давайте посмотрим, как избежать этих проблем.&nbsp;
<h3>Обеспечить отображение важного контента в отрисованном HTML-коде</h3>
Если что-то важно для рейтинга, например, главные изображения, внутренние ссылки или структурированные данные, это должно отображаться в обработанной версии страницы, которую видит Googlebot.
Но что представляет собой визуализированная версия?
Когда Googlebot сканирует страницу, он делает две вещи:
<ol>
<li>Сначала он загружает сырой HTML &ndash; простой код без запуска каких-либо скриптов.</li>
<li>Затем, на втором этапе, он визуализирует страницу, то есть загружает JavaScript, применяет стили и создает полностью интерактивную страницу, как это делает браузер.</li>
</ol>
Чтобы убедиться, что важные компоненты вашего контента отображаются в этой визуализированной версии:
<ul>
<li>Избегайте отложенной загрузки содержимого выше сгиба, включая главные изображения и внутренние ссылки.</li>
<li>Не внедряйте внутренние ссылки и схемы через JavaScript.</li>
<li>Используйте инструмент проверки URL в Google Search Console, чтобы проверить, какой контент присутствует в отображаемом HTML-коде.</li>
</ul>
<h3>Используйте резервные варианты &lt;noscript&gt; для основного контента</h3>
Для контента, который загружается полностью с помощью JavaScript и который Google должен видеть, вы можете предоставить резервную копию с помощью &lt;noscript&gt;тега.
Этот тег гарантирует, что даже если Googlebot не сможет сканировать JavaScript, поисковые системы (и пользователи с отключенным JS) все равно смогут получить доступ к вашему контенту.
Вот пример того, как можно добавить тег &lt;noscript&gt;:
<code>&lt;noscript&gt;</code> <code>&nbsp; &lt;img src="collection.jpg" alt="Jenhoue Home Summer Collection" /&gt;</code> <code>&lt;/noscript&gt;</code>
Примечание: используйте теги &lt;noscript&gt; экономно и только для не избыточного индексируемого контента.
<h2>Проверьте, что на самом деле видит Googlebot</h2>
Теперь, когда вы применили все меры безопасности, убедитесь, что ваш отложенно загружаемый контент виден поисковым системам.&nbsp;
Для этого вы можете использовать такие инструменты, как Google Search Console, Lighthouse (в Chrome DevTools) или Puppeteer (ориентированный на разработчиков).
Вот как проверить, что видит Googlebot, с помощью GSC:
<ul>
<li>Перейдите в &laquo;Консоль поиска Google&raquo; &gt; &laquo;Инструмент проверки URL&raquo;.</li>
<li>Введите URL-адрес, который вы хотите проверить.</li>
<li>Нажмите &laquo;Просмотреть просканированную страницу&raquo;.&nbsp;</li>
<li>Проверка URL-адресов Gsc Просмотр просканированной страницы в масштабе.</li>
<li>Появляется боковое окно с заголовком &laquo;Проверенная страница&raquo;.</li>
<li>В разделе &laquo;Проверенная страница&raquo; перейдите в раздел &laquo;Снимок экрана&raquo; &gt; &laquo;URL TEST LIVE&raquo;.&nbsp;</li>
</ul>
А теперь сравните это с тем, что видит пользователь.
Помимо этого, вы даже можете увидеть влияние ленивой загрузки на вашу веб-страницу с помощью Lighthouse.&nbsp;
Для этого:
<ol>
<li>Перейдите в PageSpeed Insights.</li>
<li>Введите URL вашей страницы.</li>
<li>Прокрутите вниз до пункта &laquo;Отрисовка самого большого содержимого (LCP)&raquo;.</li>
<li>Обратите внимание на время LCP перед добавлением ленивой загрузки.</li>
<li>Добавить ленивую загрузку к изображениям, расположенным ниже сгиба.</li>
<li>Повторите тест, чтобы увидеть, улучшилось ли состояние ЛКП.</li>
</ol>
Теперь вы можете увидеть, попадает ли ваш LCP в категорию &laquo;хорошо&raquo;, &laquo;нуждается в улучшении&raquo; или &laquo;плохо&raquo;.&nbsp;
Примечание: Всегда тестируйте отложенную загрузку как на настольных компьютерах, так и на мобильных устройствах, поскольку LCP и другие показатели оказывают разное влияние в зависимости от типа устройства.
<h2>Лучшие практики по реализации ленивой загрузки без ущерба для SEO&nbsp;</h2>
Вот несколько советов, которые помогут вам отложенно загружать контент, не нанося вреда SEO:&nbsp;
<h3>Не загружайте контент в верхней части страницы с помощью ленивой загрузки</h3>
Первое и самое важное правило SEO-оптимизированной ленивой загрузки заключается в следующем: никогда не откладывайте то, что действительно важно.
Контент в верхней части страницы включает в себя главные изображения, основные заголовки H1, кнопки призыва к действию и вступительные абзацы. Всё это нужно сразу видеть и вашим посетителям, и Googlebot.
Почему?
Потому что это напрямую влияет на LCP. Хорошего LCP можно добиться только тогда, когда критически важный контент загружается в течение первых 2,5 секунд. Поэтому, если критически важный контент не виден при первой загрузке, у вас может быть плохой LCP.
<h3>Избегайте ленивой загрузки с прокруткой</h3>
Старые скрипты отложенной загрузки используют scrollсобытия для загрузки контента, когда пользователь достигает определённой части страницы. Но Googlebot не прокручивает страницу. Он имитирует длинную область просмотра, что означает, что события прокрутки никогда не срабатывают, и ваш контент может вообще не загрузиться.
Так что же вам следует делать вместо этого?
Используйте IntersectionObserverAPI, поскольку он обнаруживает изменения видимости в области просмотра и упрощает для Google сканирование всех элементов вашей веб-страницы. &nbsp;
Допустим, Jenhoue Home лениво загружает карусель товаров &laquo;Вам также может понравиться&raquo; под каждой страницей товара.
Если карусель создана с использованием JavaScript, основанного на прокрутке, она загружается только после того, как пользователь прокрутит страницу достаточно далеко. Однако, если переключиться на IntersectionObserver, карусель загрузится сразу же, как только её увидят пользователи, даже при имитации рендеринга роботом Googlebot.
Таким образом, Google сканирует ссылки и индексирует связанные с ними продукты, и все это без необходимости участия человека в прокрутке.
Это делает его более дружелюбным для SEO.
<h3>Добавляйте содержательный альтернативный текст к отложенно загружаемым изображениям</h3>
Хотя отложенная загрузка повышает производительность, откладывая загрузку изображений, которые не нужны в данный момент, она не сообщает поисковым системам, что представляет собой изображение.
Поэтому, даже если вы загружаете изображение &laquo;лениво&raquo;, добавляйте подробный альтернативный текст к каждому такому изображению.
Потому что он предоставляет Google текстовую подсказку о содержании изображения, помогая вашему изображению отображаться в поиске изображений Google.&nbsp;
Таким образом, даже если изображение загружается с опозданием из-за ленивой загрузки, Googlebot всё равно видит альтернативный текст в HTML-коде. Изображение всё равно может влиять на рейтинг изображения и общую релевантность страницы.
<h3>Используйте атрибут srcset&nbsp;</h3>
Атрибут srcsetпозволяет определить несколько версий изображения для разных браузеров и разрешений.
<code>&lt;img alt="banner.png" src="/wp-content/themes/tdm-editorial/img/icons/mtc-om-mobile.png?width=636" style="max-width:100%;height:auto;display:inline;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-style:solid;border-color:#ffffff;box-shadow:none;opacity:1;width:100%" width="318" height="159" srcset="/wp-content/themes/tdm-editorial/img/icons/mtc-om-mobile.png?width=318 1x, wp-content/themes/tdm-editorial/img/icons/mtc-om-mobile.png?width=477 1.5x, wp-content/themes/tdm-editorial/img/icons/mtc-om-mobile.png?width=636 2x, wp-content/themes/tdm-editorial/img/icons/mtc-om-mobile.png?width=954 3x"&gt;</code>
Это гарантирует, что браузер будет показывать правильное изображение с учетом ширины и разрешения экрана.
Допустим, если Jenhoue Home использует ленивую загрузку для задержки изображений товаров, но при этом продолжает показывать полноразмерные версии для десктопов мобильным пользователям, страница будет работать медленно. Google может отметить это как низкую оценку LCP, особенно при индексации на мобильных устройствах.
Вот почему вам следует добавить этот srcsetатрибут в свой HTML.&nbsp;
При объединении с отложенной загрузкой посетители не будут зацикливаться на тяжелых ресурсах рабочего стола, а основные веб-показатели, такие как LCP, улучшатся.
<h3>Мониторинг логов сервера</h3>
Логи сервера &ndash; это скрытые записи каждого запроса к вашему сайту, включая посещения ботов, таких как Googlebot. Они показывают, какие именно страницы, изображения, скрипты или файлы были запрошены, когда и кем.
Если вы используете отложенную загрузку ключевых ресурсов, таких как изображения товаров или структурированные данные, логи вашего сервера могут показать, действительно ли Googlebot их увидел и запросил. Поэтому, если отложенно загруженное изображение или карусель не появляются в журналах, это, вероятно, означает, что они не были загружены вовремя или вообще не были загружены во время рендеринга Googlebot.
Чтобы проверить это, вы можете экспортировать журналы сервера и проанализировать их с помощью таких инструментов, как Screaming Frog Log File Analyser, JetOctopus или Botify.&nbsp;
<h3>Начните мониторинг ваших лениво загруженных активов</h3>
Поскольку отложенная загрузка изначально поддерживается большинством браузеров, проверьте несколько наиболее важных страниц с помощью инструмента проверки URL в Google Search Console. Убедитесь, что отложенно загруженный контент, изображения или внутренние ссылки отображаются в отрендеренном HTML-коде. Если они отсутствуют, добавьте атрибут, loading=&rdquo;lazy&rdquo;чтобы отложенно загружать все некритичные ресурсы, отображаемые ниже сгиба.

Краткое название: Объяснение ленивой загрузки

Полное название Объяснение ленивой загрузки: ускорьте свой сайт и UX-процесс

Черновик Редактировать название и описание

Название

Стандартный редактор Смотреть

Полное название и описание

Полное название (Заголовок)

Описание

Как правило описание должно иметь около 150 знаков. Оно используется для заполнения мета-тега Description веб-страницы.
Сейчас используется - 0 символов

Описание скопировано!

Описание вставлено!