Largest contentful paint как уменьшить
В 2021 году Google не просто измеряет скорость, а отдельно оценивает этапы загрузки. Для измерения он использует набор показателей — Google Core Vitals. Он стал фактором ранжирования Google с середины июня 2021 года.
В Google Core Vitals входят три основных параметра:
Скорость появления контента
LCP, Largest Contentful Paint — время, за которое браузер отрисовывает самый крупный видимый объект в области просмотра.
Отзывчивость
FID, First Input Delay — время между первым взаимодействием пользователя со страницей и ответом браузера.
Визуальная стабильность
CLS, Cumulative Layout Shift — оценка сдвигов макета во время загрузки страницы.
Google рекомендует использовать пороговые значения этих трех параметров для оценки удобства пользователей. Если страницы получают оценки выше пороговых значений LCP, FID и CLS, то они проходят оценку Core Web Vitals.
Как проверить скорость и этапы загрузки страницы
Для каждого пункта есть пояснения и советы, что можно улучшить, с примерным подсчетом экономии скорости при выполнении.
Фрагмент проверки
Как оптимизировать показатели Core Web Vitals
Разберем каждый параметр по отдельности.
LCP: как ускорить отрисовку контента
Показатель LCP определяет, когда закончилась загрузка основного содержимого страницы, ее самого крупного элемента. Чем ниже LCP, тем лучше, тем быстрее пользователи смогут изучать контент.
Самым большим элементом могут быть разные части страницы, появляющиеся по мере загрузки. В этом примере таким элементом сначала был заголовок, а потом стала картинка.
Этапы отрисовки
Нужно стремиться к тому, чтобы отрисовка самого большого элемента на странице не занимала больше 2,5 секунд от начала загрузки. Это считается оптимальным показателем сайта, на котором удобно работать.
На LCP влияют четыре фактора, их можно оптимизировать:
ускорить время ответа сервера;
решить блокировку рендеринга JavaScript и CSS;
ускорить загрузку ресурсов;
оптимизировать рендеринг на стороне клиента.
Как поработать над каждым из пунктов, подробно разобрали в статье про LCP.
FID: как ускорить время реакции страницы
Показатель оценивает, насколько страница задержалась с ответом на первое действие пользователя. К примеру, на странице появилось изображение, на которое пользователь кликнул, чтобы открыть картинку целиком. Картинка должна открыться сразу после клика. FID измеряет, насколько она задержалась.
Чем меньше времени тратится, тем лучше. Оптимальный показатель FID — не дольше 100 миллисекунд.
Для ускорения реакций страницы есть несколько решений:
сократить время выполнения JavaScript;
разбить длинные задачи на части;
отложить неиспользуемый JavaScript;
следить за размером подгружаемых библиотек JavaScript;
оптимизировать выполнение сторонних скриптов;
Как выполнить каждый из пунктов, написали в подробной статье про FID.
CLS: как убрать сдвиги макета страницы
Контент на странице может сдвигаться, если какие-то элементы загружаются в асинхронно: это бывает, если веб-мастер не отвел достаточно места под загружаемый элемент вверху страницы. В этом случае его загрузка сдвинет весь контент вниз.
Из-за сместившихся кнопок пользователь промахнулся
Сдвиги могут быть нормальными, если они ожидаемы для пользователя и появляются в ответ на его действие. К примеру, если он кликнул на блок в списке и развернулась расшифровка.
CLS измеряет совокупный сдвиг макета из-за неожиданных сдвигов, которые появляются из-за тормозящей загрузки элементов.
Для вычисления нужны два компонента:
общая область на экране, которую занимает элемент до и после сдвига;
расстояние, на которое он сдвинулся.
Оптимальный показатель CLS —не больше 0,1 на 75% сессий.
В статье про CLS подробнее разбираем, как это работает и что делать для оптимизации.
Что еще влияет на загрузку страницы: оптимизируем CSS
Стили страницы влияют на скорость отрисовки самого большого видимого элемента и визуальные сдвиги макета.
Например, блокировка рендеринга при обработке CSS тормозит загрузку остальных ресурсов на странице. Чтобы такого не происходило, можно ускорить процесс и разделить CSS на критические и некритические для выполнения.
Для сравнения на верхней строчке загрузка страницы с блокирующими рендеринг CSS, на нижней с разделением CSS:
Сравнение загрузок страницы
Кроме критических и некритических CSS можно поработать со стилями изображений, рекламой, скриптами, фреймами и шрифтами.
Все эти возможности разобрали в отдельном материале.
Как уменьшить вес страниц сайта и ускорить загрузку
Другие возможности повлиять на скорость.
Как оптимизировать код верхней части страницы
Есть еще способ сделать загрузку быстрее — поработать с кодом верхней части страницы, которую пользователь видит первым делом, как заходит на сайт. Если верхняя часть страницы загружается быстро, пользователь как можно раньше увидит загружающийся контент. А остальное можно подгрузить попозже.
Есть несколько методов:
удалить лишние символы и скрипты из верхней части кода;
настроить асинхронную загрузку с jQuery;
ускорить получение первых байтов (TTFB);
объединить и сократить JavaScript и CSS;
настроить загрузку из кэша на стороне пользователя;
Как внедрить gzip, brotli, использовать кэширование, минификацию и другие способы сжатия
Картинки, видео и разные интерактивные элементы много весят и тормозят сайт. Можно сжать тяжелые элементы, для это есть алгоритмы, самые популярные сейчас — это gzip и brotli. Brotli сжимает сильнее, чем gzip, у него больше уровней. Но на высоких уровнях его скорость меньше.
Способы ускорить загрузку:
- уменьшить размер HTML;
- использовать сжатие gzip или brotli;
- использовать минификацию, то есть сократить HTML, CSS и JS;
- использовать кэш браузера для ускорения;
- сжать фотографии, иллюстрации и другую графику: подобрать разрешение, уменьшить количество цветов, прописать параметры в CSS и сжать сами файлы.
К примеру, при уменьшении количества цветов качество этой картинки почти не страдает, зато сильно уменьшается вес. Слева направо: 32 бита (16M цветов), 7 бит (128 цветов), 5 бит (32 цвета).
Три варианта сжатия
Способы нагружают сервер из-за операций архивирования, но в целом с ними получается быстрее из-за уменьшения размера загружаемых данных.
Что используют самые быстрые страницы интернета: исследование 5,2 млн страниц
Команда блога Backlinko во главе с Брайаном Дином провели исследование страниц из выдачи Google и проверили, какие способы ускорения используют самые быстрые страницы. В выборке было 5,2 млн страниц из десктопной и мобильной выдачи, так что результат стоит посмотреть.
- Общая скорость загрузки
- Как CDN влияет на скорость загрузки
- Какие фреймворки самые быстрые
- Как сжатие файлов влияет на скорость
- Какое сжатие изображений эффективнее ускоряет загрузку
- Сайты на каких CMS грузятся быстрее
Несколько интересных тезисов:
Средняя скорость загрузки первого байта (TTFB) — 1,286 секунды на десктопе и 2,594 секунды на смартфоне. Среднее время полной загрузки страницы — 10,3 секунды на десктопе и 27,3 секунды на мобильном.
Как ни странно, лучшие варианты — либо минимально сжать файлы перед отправкой с сервера, либо максимально. У таких страниц более высокая производительность по сравнению со средним уровнем сжатия.
Для загрузки на десктопе на скорость сильнее влияет использование CDN, на мобильных — количество запросов HTML.
Если сравнивать разные способы оптимизировать картинки, использование адаптивных изображенийвыходитна первое место.
Как оптимизировать и сжать картинки
Изображения много весят и дольше всего загружаются, используем все возможности для облегчения и ускорения файлов.
Как сжимать картинки и заполнять SEO-атрибуты
Изображения много весят и сильно влияют на загрузку сайта. Чтобы они не сильно замедляли загрузку и приносили пользу в SEO, нужно учитывать эти факторы:
- количество картинок на странице, размеры, уникальность, тематика;
- правильная оптимизация;
- правильное заполнение SEO-атрибутов изображений.
Нет данных, что количество картинок на странице влияет на попадание в топ. Но есть рекомендация использовать несколько вариантов одной картинки в разных форматах для превью на разных устройствах.
Качество картинок важно, оно должно быть не хуже, чем у конкурентов. Минимум 1080 px по высоте для полного изображения и минимум 640 px в ширину для превью.
Не стоит использовать тег picture для настройки разных форматов картинок для разных устройств. Это увеличит количество узлов в DOM-дереве.
Эти и другие моменты о сжатии картинок, оптимальном формате, размере, содержании, о требованиях к заполнению метатегов и о других важных аспектах есть в большой подробной статье.
Большая часть советов основана на вебинаре специалиста технического SEO и реверс инжиниринга Деми Мурыча (Demi Murych). Речь не только о сжатии и уменьшении веса, но и о требованиях по размерам, качеству, уникальности и актуальные советы по заполнению метатегов.
Как настроить отложенную загрузку картинок — lazy loading изображений
Отдельный материал с подробным описанием настройки ленивой загрузки изображений, еще ее называют отложенной. При такой реализации пользователю не придется ждать, пока загрузится весь контент, потому что картинки будут подгружаться по мере просмотра страницы.
Есть несколько вариантов настройки:
- Пока пользователь скролит: когда он дойдет до места, где должна быть картинка, она загрузится.
- Когда пользователь кликнет на элемент: картинка загрузится, если он перейдет по ссылке или щелкнет на превью.
- В фоновом режиме: контент будет загружаться постепенно, например, когда пользователь открыл документ и оставил его. Обычно применяют для больших чертежей и схем.
Картинки загружаются по мере просмотра:
Отображение картинок с отложенной загрузкой
Выбор варианта зависит от поведения пользователей на сайте.
В статье разбираем, так ли нужна ленивая загрузка, и как ее настроить правильно.
Нужно ли использовать формат изображений WebP
WebP — это формат графических изображений, его разработали в Google в 2010 году. Получилась альтернатива PNG и JPEG, но с меньшим размером при таком же качестве изображения. При этом в WebP можно сохранить прозрачность фона или анимацию.
Сравнение свойств популярных форматов изображений
Формат выгоднее с точки зрения ускорения загрузки сайта, но не все браузеры его поддерживают.
В статье мы собрали все самое важное о формате WebP: исследования качества и веса, достоинства и недостатки формата, поддержку браузерами, способы конвертирования и другие темы.
Эти материалы позволят разобраться с оптимизацией страниц, чтобы ускорить загрузку и привести показатели Core Web Vitals в норму. Как вы ускоряете сайт, какие способы используете? Поделитесь в комментариях!
В прошлом году Google начал масштабный пересмотр факторов ранжирования в поисковике, чтобы улучшить качество поисковой выдачи. И в ноябре команда Google анонсировала Core Web Vitals — новые факторы оценки качества ресурсов, которые смогут влиять на индексацию и вступят в силу в мае 2021 года. Давайте разбираться.
Существуют сотни факторов ранжирования, однако Core Web Vitals будет анализировать ещё больше информации и иметь непосредственное влияние на дальнейшую индексацию. Нужно отметить, что скорость загрузки напрямую не влияет на индексацию, однако имеет значительное влияние на поведение пользователя, которое является важным сигналом для поисковых алгоритмов Google.
Чем Core Web Vitals отличается от прочих факторов ранжирования?
Положительная сторона Core Web Vitals — в прозрачности: это понятные, публично доступные критерии, которые можно отслеживать и улучшать с помощью специального набора инструментов. Кроме того, с момента анонсирования и до официального запуска есть много времени, чтобы уже начать работать над Core Web Vitals.
Андрей Липатцев, Web Partnerships Google
Исследования показали, что 47% пользователей ожидают загрузки страницы до 2 секунд. Согласно отчету Google, если это время увеличивается с 1 до 3 секунд, количество отказов возрастает на 32% . А при увеличении с 1 до 6 секунд — на целых 106% .
Если ресурс будет отвечать пороговым значениям Core Web Vitals, покидать сайт будут на целых 24% пользователей меньше.
Core Web Vitals
Текущий набор показателей фокусируется на трех аспектах взаимодействия с пользователем:
- Largest Contentful Paint (LCP) — определяет скорость загрузки страницы и ее крупных визуальных элементов. Хороший показатель – до 2,5 с.
- First Input Delay (FID) — измеряет интерактивность сайта, то есть насколько быстро он становится доступным к взаимодействию после загрузки. Желательным будет показатель до 100 мс.
- Cumulative Layout Shift (CLS) — показывает скорость визуальной стабилизации, то есть насколько быстро всё становится на свои места. Идеальным будет показатель меньше 0,1.
LCP (загрузка)
Для разработчиков всегда было непросто измерить, насколько быстро контент веб-страницы загружается и становится видимым для пользователей.
Старые метрики, такие как load или DOMContentLoaded, не подходят, так как они всегда соответствуют тому, что пользователь видит на экране. А более новые показатели производительности, такие как First Contentful Paint (FCP), отражают только самое начало процесса загрузки.
В ходе исследований обнаружилось, что более точный способ измерить загрузку основного содержимого страницы, – это посмотреть, когда был отрисован самый большой элемент.
Так появилась метрика Largest Contentful Paint (LCP), которая измеряет время рендеринга самого большого элемента на странице.
Что считается большим элементом?
- тег img
- элементы image внутри тега svg
- постер в теге video
- фоновое изображение, загруженное с помощью url() (не считая CSS градиента) , содержащие текстовые узлы или другие дочерние элементы.
Как это работает?
Веб-страница загружается поэтапно, и в результате самый большой элемент на ней может измениться.
Важно отметить, что элемент может считаться самым большим содержимым только после того, как он будет отрисован и виден для пользователя.
Браузер перестает сообщать о новых записях, как только пользователь начнет взаимодействовать со страницей, поскольку взаимодействие может визуально изменить страницу (прокрутка, модальное окно и т.д.).
Рис.1. Изменение самого большого элемента по мере загрузки содержимого
Как определяется размер самого большого элемента?
Размер элемента определяется в области видимости пользователя: если элемент выходит за её пределы (обрезан или имеет overflow: hidden), то эти части не учитываются.
Если у изображения видимый и исходный размеры отличаются, то будет учитываться меньший из них. Например, если изображение сжали до меньшего размера, чем его исходный, то передается видимый размер, а если растянули — исходный.
Для текстовых элементов учитывается только размер их текстовых узлов.
Для всех элементов любые margin, padding или border не рассматриваются.
FID (интерактивность)
Метрика First Input Delay (FID) помогает измерить первое впечатление пользователя об интерактивности и быстродействии вашего сайта.
FID измеряет время с момента, когда пользователь впервые взаимодействует со страницей, до того, как браузер действительно может начать обработку событий в ответ на это взаимодействие.
Задержка ввода возникает из-за того, что основной поток браузера занят чем-то другим (синтаксическим анализом или выполнением большого бандла), поэтому он (пока) не может ответить пользователю.
FID можно измерить только в реальных условиях.
Почему рассматривается именно первый ввод?
- Первое впечатление пользователя формирует общее впечатление о качестве и надежности сайта.
- По статистике, самая распространенная проблема с интерактивностью возникает во время загрузки страницы. Улучшение первого взаимодействия окажет наибольшее влияние на общую интерактивность.
CLS (визуальная стабильность)
Cumulative Layout Shift — важный, ориентированный на пользователя показатель для измерения стабильности верстки и элементов, не препятствующих взаимодействию с контентом.
Например, вы переходите на сайт, почитать статью. Пока сайт прогружался, на странице появилось ещё несколько элементов и положение скролла неожиданно изменилось. Неприятно.
Рис.2. Пример Cumulative Layout Shift
Первая ассоциация при виде этого примера — реклама. Думаю, что каждый хотя бы раз сталкивался с таким неожиданным появлением элемента.
Это может происходить из-за асинхронной загрузки ресурсов или динамического добавления DOM-элементов на странице. Причиной может быть изображение или видео с неизвестными размерами, сторонняя реклама или виджет, которые динамически изменяют размер.
CLS измеряет общую сумму всех показателей визуальной стабильности верстки в течение сессии страницы.
Показатель визуальной стабильности определяет Layout Instability API, который отправляет layout-shift каждый раз, когда существующий элемент меняет свое начальное положение между двумя кадрами.
Обратите внимание, что визуальная стабильность не учитывается, когда новый элемент добавляется в DOM или существующий элемент меняет размер.
Чтобы вычислить коэффициент визуальной стабильности, браузер смотрит на размер области просмотра и перемещение нестабильных элементов между двумя визуальными кадрами. Коэффициент вычисляется двумя показателями: коэффициентом воздействия и расстояния.
Рис.3. Коэффициент воздействия
На изображении выше есть элемент, который занимает половину области просмотра в одном кадре. Затем в следующем кадре элемент смещается вниз на 25% от высоты экрана. Красный пунктирный прямоугольник указывает на объединение видимой области элемента в обоих кадрах, которая в данном случае составляет 75% от экрана.
Рис.4. Доля расстояния
Доля расстояния — это наибольшее расстояние, на которое любой нестабильный элемент переместился в кадре (по горизонтали или вертикали), деленное на размер экрана.
В приведенном примере наибольшим размером экрана является высота, а нестабильный элемент перемещается на 25%.
Коэффициент визуальной стабильности = 0.75 * 0.25 = 0.1875
Как улучшить показатели Core Web Vitals?
Если ваше приложение не дотягивает до идеальных показателей, то нужно заняться вопросом повышения скорости. Итак, что можно сделать:
- Сжимать, оптимизировать (бандл, картинки и т.д.).
- Включить кеширование – это позволит ускорить доступ к страницам, которые пользователь посещал ранее.
- Использовать потенциал технологии AMP.
- Уменьшить редиректы или использовать SPA.
- Использовать CDN – это позволит распределить контент между несколькими серверами, снижая количество маршрутизаторов между конечными файлами и пользователем.
- И т.д.
Библиотеки и инструменты
Самый простой способ измерить все Core Web Vitals — использовать js-библиотеку web-vitals, которая измеряет каждую метрику в соответствии с Инструментами Google.
Или можно использовать расширение Web Vitals для Chrome.
Всех приветствую! Присаживайтесь поудобнее, налейте вкусного чаю и давайте обсудим довольно популярную и животрепещущую тему: оптимизацию производительности сайта.
Одним из инструментов для анализа качества и usability страницы с составлением отчёта является PageSpeed Insights (далее просто PageSpeed).
Какие вопросы я затрону в статье:
- что такое PageSpeed;
- как измеряется и оценивается производительность;
- лирическое отступление: critical render path;
- способы оптимизации PageSpeed;
- для чего это нужно?
- оценить производительность;
- оценить доступность для людей с ограниченными возможностями;
- определить, насколько сайт оптимизирован для SEO;
- получить рекомендации по повышению этих показателей.
При анализе мы получаем два результата: для десктопной и мобильной версий, где значения от 0 до 49 являются низкими, от 50 до 86 — средними, и от 87 до 100 — высокими.
На текущий момент в основном используются: имитация мобильного устройства Nexus 5 на Android, сеть 3G со скоростью 8 мегабит/с., задержка 150 миллисекунд, рендерится на европейских серверах и применяется троттлинг процессора.
Показатели с каждым запуском анализа могут колебаться из-за A/B-тестов, изменений маршрутизации интернет-трафика, дополнительных активных расширений браузера, которые добавляют или изменяют сетевые запросы, и антивирусов.
Если говорить о критериях оценки, то основные представлены ниже:
First Contentful Paint — первичная отрисовка контента; показатель, определяющий интервал между началом загрузки страницы и появлением первого видимого блока, текста или изображения. Иными словами, время от ответа сервера до отрисовки, белый экран. Ответ сервера при этом не входит в этот показатель.
Speed Index — индекс скорости загрузки, который показывает, как быстро загружается содержимое.
Largest Contentful Paint — время отрисовки крупного содержимого, находящегося на первом экране. Под крупным содержимым мы понимаем картинки, видео или текст.
Time to Interactive — время, в течении которого страница становится полностью готова к взаимодействию с пользователем.
Total Blocking Time — сумма всех периодов от первой отрисовки содержимого, когда скорость выполнения задач превышала 50 мс. Измеряется в миллисекундах.
Cumulative Layout Shift — процентная величина, на которую смещаются видимые элементы области просмотра при загрузке.
Прежде чем описывать способы улучшения этих показателей, важно вспомнить, что такое Critical Render Path. Схематично шаги по отрисовке сайта выглядят следующим образом:
- запрос на сервер;
- получение HTML-документа;
- построение DOM-дерева;
- получение и отработка JS-кода;
- построение render-дерева;
- отрисовка страницы
Как можно улучшить метрики?
- используется мультиплексирование;
- служебные заголовки передаются в сжатом виде;
- повышается безопасность.
Оптимизация изображений
Используйте правильные размеры изображений. На странице не должно быть изображений, размер которых больше, чем можно отобразить на экране пользователя. С помощью «отзывчивых» изображений можно создать несколько версий каждой картинки, а затем через, к примеру, @media-запросы указать нужную для отображения. Также можно воспользоваться ресайзерами: thumbor, npm sharp, imagemagick или любым другим на ваш вкус.
Вне первого экрана важно использовать для всех изображений «ленивую загрузку», она позволяет подгружать картинки по мере необходимости.
Использование критического CSS
Прежде чем браузер отрисует содержимое страницы, он должен получить и обработать всю информацию о макете и внешних стилях для неё. Внешний CSS — это код, загружаемый через внешнюю таблицу стилей. В теории, он может считаться блокирующим, потому что, как сказано выше, браузер не сможет отрисовать страницу, пока этот код не будет обработан. Критический CSS отвечает за стили первого экрана сайта, такой код необходимо заинлайнить внутри <hеad> прямо в HTML-документе, это снижает нагрузку на сервер.
Уменьшайте bundle.js
Минифицируйте JS и CSS, это ускорит анализ скриптов и сократит объём полезной сетевой нагрузки.
Откажитесь от тяжёлых библиотек и асинхронной/отложенной загрузки скриптов
Для сокращения расхода трафика необходимо поддерживать код в актуальном состоянии, своевременно удалять неиспользуемый код. Чтобы не блокировать основной поток, по возможности загружайте сторонние скрипты асинхронно (атрибут async или defer в тегах script , или приоритизация загрузки основного содержимого, к примеру, рекламу грузим после), и при их выборе отдавайте предпочтение более легковесным библиотекам. Если в подгружаемой библиотеке используется менее 10-ти методов, можно рассмотреть вариант самостоятельной реализации этих методов в проекте, но такой подход должен быть хорошо обдуман.
Уменьшайте Critical Render Path
Включает в себя совокупность предыдущих пунктов. Сюда можно добавить «ленивую загрузку» DOM-элементов.
Использование SSR
Server Side Rendering — рендеринг страницы на сервере. В этом случае поисковые роботы получают готовый код сайта, что важно в условиях новых правил ранжирования.
Это основные моменты, которые работают на практике и которые мы применяем у себя в ДомКлик при разработке сервисов.
Для чего нам нужно улучшать метрики?
При грамотном использовании этих рекомендаций мы решаем основополагающие задачи: улучшение позиций, увеличение конверсии и снижение нагрузки на сервер. И, как следствие, пользователи довольны, а компания получает прибыль.
Очень ёмко и кратко смысл оптимизации описывает цитата из твиттера Википедии:
Но вам требуется продвижение сайта или создание сайта-лидера, идеального для SEO? Тогда вы можете оставить заявку на продвижение или заявку на создание сайта. Если вы собираетесь продвигать сайт самостоятельно — продолжайте чтение!
Вы в курсе, что с 2021 года Google будет использовать новые показатели для оценки качества сайтов. Largest Contentful Paint — один из таких. А вы знаете, как его измерить и улучшить? Если нет — тогда наш сегодняшний материал придется вам как раз кстати!
Мы подготовили статью, полностью посвященную Largest Contentful Paint и всем тонкостям улучшения этого показателя. Переходите по ссылку и читайте, чтобы одним из первых узнать важную актуальную информацию и улучшить свой сайт.
Как оптимизировать LCP-показатель: эффективные способы
LCP показатель ( Largest Contentful Paint ) — время загрузки самого большого элемента на странице вашего сайта, которое первым делом появляется на экране в браузере. Вот что это такое — LCP . И, если элемент на странице будет частично скрыт за видимой областью, он не будет приниматься в расчет.
LCP: как измерить
Самый простой метод — использовать соответствующее API, которое работает по следующему принципу:
- В процессе открытия сайта его контент может меняться, поэтому каждый раз при появлении нового большого элемента на странице браузер отправляет PerformanceEntry, который имеет тип “largest-contentful-paint”.
- Как только пользователь начинает как-то взаимодействовать со страницей, работа метрики прекращается. И нужное нам значение — время самого последнего отправленного события.
Для того, чтобы измерить Largest Contentful Paint, можно также использовать:
Также можно проверить скорость загрузки сайта на одном из любых бесплатных сервисов.
Нормальный показатель LCP
Будет просто замечательно, если вы сможете ускорить загрузку сайта до такой степени, чтобы самый большой элемент на странице открывался не дольше 2,5 секунд от момента открытия сайта на 75% сессий. Только в таком случае сайтом будет удобно пользоваться. И это независимо от того, “на чем” сделан сайт — на Bitrix или WordPress.
LCP: как улучшить показатели
Разберемся, как оптимизировать показатель LCP . Во-первых, нужно запомнить, что на этот показатель влияет 4 фактора:
- Время ответа сервера.
- Время загрузки сайта.
- Рендеринг на стороне пользователя.
- JS и CSS с блокировкой рендеринга.
А теперь более детально разберем все эти показатели и подумаем, как их улучшить.
Время ответа сервера
Нам нужно улучшить время загрузки первого байта — TTFB. Для этого можно:
- Изучить советы по производительности сервера и проверить, все ли рекомендации вы соблюли для того, чтобы ускорить загрузку сайта .
- Применить Content Delivery Network (CDN), который хранит контент и быстро возвращает его пользователю из разных точек планеты.
- Кэшировать страницы. Для этого можно использовать все возможности инструментов brotli, gzip и т.п.
Также можно попробовать сервисы-воркеры , которые могут сами управлять кэшем. Вот как можно ускорить время ответа сервера быстро и без особых трат нервов.
Время загрузки сайта
Если этот показатель довольно большой, то на LCP он скажется негативно — это 100%. Чтобы уменьшить его, необходимо:
- Оптимизировать все картинки на сайте. Лучше всего преобразовать их в формат WebP от Google, попробовать активировать постепенную загрузку или сжать изображения.
- Загружать все самое важное вначале. Сюда входят критически важные ресурсы по типу шрифтов, текстов и картинок, которые посетитель сайта должен обязательно увидеть первыми.
- Применять сервис-воркеры. Мы уже упоминали, что brotli, gzip и подобные инструменты способны положительно сказаться на скорости загрузки сайта.
Также о том, как ускорить свой сайт, вы можете почитать по ссылке .
Рендеринг на стороне пользователя
Оптимизация рендеринга на стороне клиента — еще одна прекрасная возможность улучшить показатель LCP. Но сложность метода заключается в том, что все происходит на стороне ПК пользователя, а не вашего сервера, поэтому выбор в плане инструментов для такой оптимизации у вас небольшой:
- сжать или сократить JS;
- найти все неиспользуемые скрипты и отложить их или полностью удалить;
- убрать неиспользуемые полифиллы, которые применялись ранее для работы старых браузеров.
Предварительный рендеринг — еще один шанс улучшить ситуацию. При таком подходе он выполняется в headless браузера, генерирующем статичный HTML-код, а уже потом подставляет ответ сервера. Реализовав подобное, реальный сервер не будет перегружаться, что положительно скажется на показателе LCP.
JS и CSS с блокировкой рендеринга
HTML-разметка преобразовывается браузером в DOM-дерево, после чего контент начинает отображаться. И он не будет работать, если найдет ресурсы, которые блокируют рендеринги (внешние таблицы стилей и сценариев). Поэтому, нужно найти весь неиспользуемый JS и CSS и отложить его. Для этого можно воспользоваться инструментом Chrome DevTools .
Разумеется, критический CSS необходимо оставить включенным, если он необходим в верхней части страницы. Для JavaScript нужно использовать асинхронную загрузку. А для достижения максимального эффекта — нужно минимизировать весь код JavaScript и CSS на сайте.
Читайте также: