#3-Правка текста главы

'#6. Тексты : texts';

'Library_ChapterController_actionUpdateHtml';

'#layouts_templates_updateHtml';

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

<p style="text-align: right;">автор: <a title="Go to Author Page" href="https://www.searchenginejournal.com/author/roger-montti/">Roger Montti</a></p>
<p><strong>Largest Contentful Paint (LCP)</strong> &ndash; это метрика пользовательского опыта Google, которая стала фактором ранжирования в 2021 году.</p>
<p>Эта глава объясняет, что такое LCP и как достичь лучших показателей.</p>
<h2>Что такое Largest Contentful Paint?</h2>
<p>LCP &ndash; это измерение времени, необходимого для загрузки основного контента страницы и готовности его к взаимодействию.</p>
<p>Измеряется самое крупное изображение или блок контента в пределах области видимости пользователя. Все, что выходит за пределы экрана, не учитывается.</p>
<p>Обычные элементы, которые измеряются &ndash; это изображения, обложки видео, фоновые изображения и текстовые элементы уровня блока, такие как теги абзаца.</p>
<h3>Почему измеряется LCP?</h3>
<p>LCP был выбран в качестве ключевой метрики для рейтинга Core Web Vitals, потому что он точно измеряет, насколько быстро можно использовать веб-страницу.</p>
<p>Кроме того, его легко измерить и оптимизировать.</p>
<h3>Элементы уровня блока, используемые для расчета балла LCP</h3>
<p>Элементы уровня блока, используемые для расчета балла Largest Contentful Paint, могут быть элементами &lt;main&gt; и &lt;section&gt;, а также заголовками, блоками div, элементами формы.</p>
<p>Можно использовать любой элемент HTML уровня блока, содержащий текстовые элементы, при условии, что он является самым крупным. Не все элементы используются. Например, элементы SVG и VIDEO в настоящее время не используются для расчета балла Largest Contentful Paint.</p>
<p>LCP легко понять, потому что вам просто нужно посмотреть на свою веб-страницу и определить, какой самый крупный текстовый блок или изображение, а затем оптимизировать его, уменьшив размер или удалив все, что может помешать быстрой загрузке.</p>
<p>Поскольку Google включает большинство сайтов в индекс с учетом мобильных устройств, лучше всего сначала оптимизировать мобильный вид, а затем настольный.</p>
<h3>Задержка загрузки крупных элементов может не помочь</h3>
<p>Иногда веб-страница будет отображаться частями. Большому изображению может потребоваться больше времени для загрузки, чем самому крупному текстовому элементу уровня блока.</p>
<p>В этом случае регистрируется PerformanceEntry для самого крупного текстового элемента уровня блока.</p>
<p>Но когда загружается крупное изображение вверху экрана, если этот элемент занимает больше места на экране пользователя (его области видимости), то будет сообщено еще одно PerformanceEntry для этого изображения.</p>
<h2>Изображения могут быть сложными для показателей LCP</h2>
<p>Веб-издатели часто загружают изображения в их первоначальном размере, а затем используют HTML или CSS для изменения размера изображения с целью отображения его в более маленьком размере.</p>
<p>Первоначальный размер &ndash; это то, что Google называет "внутренним" размером изображения. Если издатель загружает изображение шириной 2048 пикселей и высотой 1152 пикселя, то эти 2048 x 1152 высота и ширина считаются "внутренним" размером. Теперь, если издатель изменяет размер изображения 2048 x 1152 пикселей до 640 x 360 пикселей, изображение размером 640&times;360 называется видимым размером.</p>
<p>Для расчета размера изображения Google использует тот размер, который меньше между внутренним и видимым размером изображений.</p>
<h3>Примечание о размерах изображений</h3>
<p>Возможно достичь высокого показателя Largest Contentful Paint с изображением большого внутреннего размера, измененного с использованием HTML или CSS для уменьшения размера.</p>
<p>Однако лучшей практикой является согласование внутреннего размера изображения с видимым размером.</p>
<p>Изображение будет загружаться быстрее, и ваш показатель Largest Contentful Paint повысится.</p>
<h3>Как LCP обрабатывает изображения, загружаемые с другого домена</h3>
<p>Изображения, загруженные с другого домена, например, с CDN, обычно не учитываются при расчете Largest Contentful Paint. Издатели, которые хотят включить эти ресурсы в расчет, должны установить так называемый заголовок Timing-Allow-Origin.</p>
<p>Добавление этого заголовка на ваш сайт может быть сложным, потому что если вы используете подстановочный символ (*) в конфигурации, то это может открыть ваш сайт для хакерских атак. Чтобы сделать это правильно, вам придется добавить домен, который специфичен для краулера Google, чтобы добавить его в белый список и позволить ему видеть информацию о времени от вашего CDN.</p>
<p>Таким образом, на данный момент ресурсы (такие, как изображения), загружаемые с другого домена (например, с CDN), не будут учитываться в расчете LCP.</p>
<h3>Остерегайтесь особенностей расчета</h3>
<p>Все элементы, находящиеся на экране пользователя (в области видимости), используются для расчета LCP. Это означает, что изображения, отрисованные за пределами экрана и затем перемещенные в макет после их рендеринга, могут не учитываться в показателе Largest Contentful Paint.</p>
<p>С другой стороны, элементы, которые изначально находятся в области видимости пользователя и затем сдвигаются за пределы экрана, могут быть учтены при расчете LCP.</p>
<h2>Как получить оценку LCP</h2>
<p>Существует два вида инструментов для оценки. Первый называется Инструменты полевого тестирования, а второй &ndash; Инструменты лаборатории.</p>
<p>Инструменты полевого тестирования представляют собой фактические измерения сайта.</p>
<p>Инструменты лаборатории предоставляют виртуальную оценку на основе симулированного краула с использованием алгоритмов, приближенных к условиям Интернета, с которыми может столкнуться типичный пользователь на мобильном телефоне.</p>
<h2>Как оптимизировать Largest Contentful Paint</h2>
<p>Существует три основных области оптимизации (плюс еще одна для JavaScript-фреймворков):</p>
<ol>
<li>Медленные серверы.</li>
<li>Блокировка рендеринга JavaScript и CSS.</li>
<li>Замедленная загрузка ресурсов.</li>
</ol>
<p>Медленный сервер может быть проблемой при уровне DDOS-атак и трафика скрейперов на общем или VPS-хосте. Вы можете устранить проблему, установив плагин WordPress, такой, как WordFence, чтобы выяснить, не подвергаетесь ли высокой атаке, и затем заблокировать ее.</p>
<p>Другие проблемы могут быть связаны с неправильной настройкой выделенного сервера или VPS. Типичной проблемой может быть количество выделенной памяти для PHP.</p>
<p>Еще одной проблемой может быть устаревшее программное обеспечение, такое как старая версия PHP или устаревшее программное обеспечение CMS.</p>
<p>В худшем случае &ndash; общий сервер с несколькими пользователями, замедляющими ваш бокс. В этом случае переход к более качественному хостингу &ndash; ответ.</p>
<p>Обычно применение исправлений, таких как добавление кеширования, оптимизация изображений, устранение блокировки рендеринга CSS и JavaScript, а также предварительная загрузка определенных ресурсов, может помочь.</p>
<p>Google дает хороший совет по работе с CSS, который не является необходимым для рендеринга того, что видит пользователь:</p>
<blockquote>
<p>"Удалите полностью неиспользуемый CSS или переместите его в другую таблицу стилей, если он используется на отдельной странице вашего сайта.</p>
<p>Для любого CSS, необходимого для начального рендеринга, используйте loadCSS для асинхронной загрузки файлов, что позволяет использовать rel=&rdquo;preload&rdquo; и onload.</p>
<p><code>&lt;link rel=&rdquo;preload&rdquo; href=&rdquo;stylesheet.css&rdquo; as=&rdquo;style&rdquo; onload=&rdquo;this.rel=&rsquo;stylesheet'&rdquo;&gt;&rdquo;</code></p>
</blockquote>
<h2>Инструменты для оценки LCP на местности</h2>
<p>Google перечисляет три инструмента для оценки на местности:</p>
<ol>
<li>PageSpeed Insights.</li>
<li>Консоль поиска (отчет Core Web Vitals).</li>
<li>Chrome User Experience Report.</li>
</ol>
<p>Последний из них &ndash; Chrome User Experience Report &ndash; требует учетной записи Google и проекта в Google Cloud. Первые два более просты в использовании.</p>
<p>Лабораторные инструменты для оценки LCP<br>Измерения в лаборатории &ndash; это симулированные оценки.</p>
<p>Google рекомендует следующие инструменты:</p>
<ol>
<li><a href="https://developers.google.com/web/tools/chrome-devtools/" rel="noreferrer">Chrome DevTools</a>.</li>
<li><a href="https://developers.google.com/web/tools/lighthouse/" rel="noreferrer">Lighthouse</a>.</li>
<li><a href="https://webpagetest.org/" rel="noreferrer">WebPageTest.org</a>.</li>
</ol>
<p>Первые два инструмента предоставляются Google. Третий инструмент предоставляется третьей стороной.</p>

Краткое название: Что такое Largest Contentful Paint

Полное название Что такое Largest Contentful Paint: Простое объяснение

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

Название

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

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

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

Описание

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

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

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