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

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

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

Содержание страницы: "Оптимизация показателя LCP. Как ускорение загрузки картинок влияет на качество сайта":

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

Он оценивает качество сайта для посетителей по трем параметрам, а именно:

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

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

Что такое LCP?

Как уже говорилось выше, Largest Contentful Paint или LCP — это скорость загрузки самого большого элемента. Таким может быть любой графический элемент, чьи размеры больше чем у остальных.

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

Читайте интересную статью: 

Оптимизация скорости загрузки сайта: инструкция по оптимизации скорости загрузки страниц 

Также важно обратить внимание на последовательность загрузки элементов. В процессе прогрузки нового элемента браузер ищет самый большой и отправляет запрос PerformanceEntry c типом largest-content full-paint.

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

Как измерить LCP?

Желательно измерять данный показатель при помощи внутренних инструментов Google. Сделать это можно в Search Console. Показатель LCP можно найти в отчете «Core Web Vitals».

Также проверить Largest Contentful Paint можно при помощи PageSpeed Insights. Помимо показателя LCP, данный инструмент оценивает скорость загрузки страницы, а также дает полезные рекомендации по устранению ошибок, которые негативно влияют на время прогрузки.

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

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

Читайте интересную статью: 

Основные критерии и оценка юзабилити для вашего сайта 

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

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

Как улучшить LCP?

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

На показатель LCP могут воздействовать следующие аспекты:

  • общая скорость загрузки страницы;
  • элементы блокировки рендеринга;
  • скорость ответа сервера;
  • рендеринг пользователя.

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

Общее время загрузки страницы

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

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

Способов решения данной проблемы достаточно много.

Однако мы рассмотрим только основные методы, которые имеют максимальную эффективность:

  • CSS-файлы — в начало. CSS-файлы лучше всего подключать вверху страницы. Таким образом загрузка будет происходить поэтапно, отрисовывая сначала статические элементы. Большинство браузеров оптимизированы таким образом, что они прогружают элементы, которые могут изменить свой внешний вид, отдельно от остальных. Поэтому CSS-файлы необходимо поставить в начало, чтобы ускорить работу браузера.
  • JavaScript-файлы — в конец. Этот способ повысить скорость загрузки объясняется так же, как и предыдущий. Если скрипты находятся в начале страницы, то браузер не сможет одновременно подключать статические элементы. А учитывая вес JavaScript-файлов, этот процесс может затянуться на долго. Поэтому загрузку всех скриптов на странице необходимо оставлять напоследок, после загрузки CSS.
  • Сокращение кода. Большое количество незначительных элементов в коде страницы является одной из самых распространенных причин слишком длинной загрузки. Поэтому все неважные пробелы, переносы, комментарии и прочие ненужные элементы необходимо удалить. С этой задаче отлично справляются специальные сервисы по оптимизации CSS-файлов.
  • Поддомены. Спецификации HTTP/1.1 не позволяет браузерам параллельно загружать более двух элементов с одного хоста. Из-за этого время на отрисовку графического контента и прочих тяжелых элементов страницы может значительно увеличиться. Чтобы этого избежать, можно использовать отдельные поддомены. На них необходимо загрузить всю тяжелую графику. Таким образом браузер будет воспринимать поддомены, как отдельный сервер, что увеличит количество параллельных загрузок и ускорит общую загрузку сайта.
  • Кэширование. Многие браузеры имеют кэш — отдельное хранилище элементов страницы, которые сохраняются на устройстве пользователя. То есть браузеру не придется подгружать некоторые элементы с сервера, что может значительно увеличить скорость загрузки. Пользователю потребуется только один раз посетить страницу, чтобы в кэш сохранились все тяжелые элементы страницы. Для этого необходимо выставить HTTP-заголовок Expires и соответствующим образом изменить файл .htaccess в корневой папке сайта. При этом важно отметить, что это может нарушить отрисовку обновленных элементов страницы. Поэтому если вы добавляете на нее новый элемент, то нужно изменить его название.

Читайте интересную статью: 

Чем отличается UI и UX: особенности интерфейсов

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

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

Ресурсы блокировки рендеринга

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

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

Критическим для рендеринга элементами могут быть:

  • таблицы стилей CSS;
  • шрифты из CDN или локального сервера;
  • JavaScript-файлы в начале страницы.

При этом далеко не все такие элементы действительно важны для рендеринга. Некоторые из них можно сделать не критическими. Остальные же можно просто облегчить.

Это можно сделать сразу несколькими способами, каждый из которых мы разберем отдельно.

  • Условные CSS-файлы. Для браузеров все файлы CSS блокируют рендеринг по умолчанию. Но эту проблему можно исправить при помощи атрибута media в теге <link>, что позволит отрисовывать эти элементы в качестве условных файлов CSS, то есть те, которые применяются только в определенных условиях. Таким образом вы можете настроить условия отрисовки этих элементов. Таким образом если на устройстве пользователя условие ложное, то и блокировать рендеринг элемент не будет.
  • Локальные пользовательские шрифты. Извлечение шрифтов из CDN и других сетей доставки, может значительно снизить скорость загрузки страницы. Особенно если шрифтов много. Чтобы избавиться от этой проблемы, можно использовать локальную отрисовку шрифтов. Для этого можно воспользоваться Web Fonts Helper. Отдельно можно еще прописать атрибут font-display: swap, который позволит системе сначала отрисовать системный шрифт, а после загрузки пользовательского его заменить. Это нужно для того, что страница не пустовала, пока загружаются локальные шрифты.
  • Загрузка CSS через тег <link>. По умолчанию, CSS-файлы добавляются на страницу через правило @import. Это более правильный метод, однако он может негативно влиять на скорость отрисовки графических элементов. То есть это правило позволяет браузеру импортировать CSS-файлы из других таблиц. Однако в данном случае эти файлы блокируют рендеринг. Поэтому для этой задачи лучше использовать тег <link>.

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

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

Скорость ответа сервера

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

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

Хотя сама метрика TTFB не является прямым фактором ранжирования, она косвенно может повлиять на поведенческие факторы.

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

Проще всего это сделать в Chrome или Mozilla. Для этого необходимо вызывать код страницы кнопкой F12, открыть вкладку «Network» и выставить фильтр «Doc».

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

Читайте интересную статью: 

Как создать успешный сайт. Какие дополнительные функции должны присутствовать для удобства и продвижения 

Причин, по которым передача данных с сервера затягивается, несколько. Рассмотрим самые распространенные:

  • Серверу не хватает мощности. Хостинг не всегда предоставляет достаточно ресурсов для отрисовки тяжелых сайтов с большим количеством элементов. Проблема может заключаться в слабом процессоре, оперативной памяти или в том и другом. Для решения этой проблемы придется выбрать более дорогой тариф провайдера или же сменить хостинг.
  • Медленная работа с базой данных. Для корректной передачи данных сервер перед отправкой в информации в браузер, проверяет ее через базу данных. Этот процесс может занимать много времени. Решить эту проблему поможет вышеупомянутое кэширование.
  • Отключенный акселератор. Если сайт разработан на PHP, то проблема в низкой скорости ответа сервера может заключаться в отключенном акселераторе кода, который кэширует определенные участки страницы для оптимизации. В новых версиях PHP, начиная с 5.5, акселератор доступен сразу и находится в php.ini. В более ранних версиях придется использовать отдельный модуль PECL.

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

Рендеринг пользователя

Некоторые сайты используют альтернативный метод рендеринга, а именно Client-side rendering (CSR). В данном случае обработка данных происходит не на сервере, а на устройстве пользователя, то есть через браузер при помощи скриптов.

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

Чтобы избежать такой ситуации, можно воспользоваться стандартными методами повышения скорости загрузки страниц, а именно:

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

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

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

Подводим итоги

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

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

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

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