Какво е LCP - Largest Contentful Paint

LCP (Largest Contentful Paint) е част от Core Web Vitals - набор от специфични метрики, свързани със скоростта и визуалната стабилност на уеб страниците. Google ги счита за изключително съществени за цялостното потребителско изживяване на даден уеб сайт и от май 2021 г са важен ранкинг фактор.

Core Web Vitals  съдържа три важни метрики: Largest Contentful Paint (LCP), First Input Delay (FID) и Cumulative Layout Shift (CLS), които ще разгледаме в поредица от публикации. В тази статия подробно ще разгледаме LCP.

Ще научите какво е LCP, как се измерва и как да го подобрите, за да стане вашият бизнес сайт по-бърз.

Largest Contentful Paint (LCP) е изключително важна, ориентирана към потребителите метрика, измерваща кога най-големия елемент на страницата става видим за потребителя. Тя представлява точката на зареждане, при която основното съдържание на текущата страница на сайта се е заредило.

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

Старите метрики като “load” или “DOMContentLoaded” не са релевантни, тъй като не съответстват на това, което потребителя вижда на екрана си, а по-новите, ориентирани към потребителите метрики за ефективност като First Contentful Paint (FCP) са в сила за началото на страницата и отчитат скоростта само на видимите на екрана елементи.

Ако дадена страница показва начален екран с индикатор за зареждане на страницата (splash screen), този момент не е много полезен за потребителското преживяване.

В миналото се препоръчваха метрики за производителност като First Meaningful Paint (FMP) и Speed ​​Index (SI) (и двете налични в Lighthouse), които да измерват “преживяването при зареждане” (loading experience), веднага след като първия пиксел на сайта бива обработен (рендиран).

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

Колкото по-просто за обяснение - толкова по-добре. Въз основа на проучванията, направени в Google, те са установили, че най-прецизния начин за измерване зареждането на основното съдържание на дадена страница е момента на рендиране на най-големият ѝ елемент.


Какво е LCP?

Метриката Largest Contentful Paint (LCP), отчита времето за рендиране (обработване) на най-голямото изображение или текстов блок, намиращи се във видимата част на екрана (viewport), спрямо първото зареждане на страницата.

Какво е LCP?


Съществува ли добър LCP резултат?

За да осигурят добро потребителско изживяване, собствениците на сайтове трябва да се стремят да имат LCP до 2,5 секунди или по-малко.

За да сте сигурни, че сте постигнали тази цел, добър праг за измерване е 75-ия процентил (това означава, че 75% от всички имат тази или по-добра стойност) от зареждането, сегментиран на мобилни и десктоп устройства.


Кои елементи да вземете предвид?

Видовете елементи, които са от значение за измерване на LCP:

  • <img> елементи
  • <image> елементи в <svg> елемент
  • <video> елементи (използва се изображението на плаката - заглавната картинка)
  • Елемент с фоново изображение, заредено чрез функцията url ().
  • Елементи на ниво блок, съдържащи текстови възли (text nodes) или други вградени текстови елементи.

Имайте предвид, че ограничаването на елементите само до този набор е умишлено, заради улесняване на нещата в началото. Още елементи (напр. <svg>, <video>) могат да бъдат добавени в бъдеще, тъй като допълнителни изследвания се извършват в момента.


Как се определя размерът на елемента?

Размерът на елемента, използван за измерването LCP е онзи размер, който е видим за потребителя във видимата част на екрана.

Ако елементът се простира извън видимата част, или ако някой от елементите е отрязан, тези части не се отчитат за част от размера на елемента.

За image елементите, които са преоразмерени спрямо оригиналния им размер (intrinsic size), размерът, който ще се отчете е или видимия размер (visible size), или оригиналния размер  - според това, кой от двата е по-малък.

Например, за изображенията, намалени до размер по-малък от вътрешния им размер, ще се отчете само размера, в който са показани на екрана, докато изображенията, които са разширени до по-голям размер, ще отчетат само своите вътрешни размери.

Относно текстовите елементи, зачита се само размерът на техните текстови възли (най-малкият правоъгълник, който обхваща всички текстови възли).

Общото за всички елементи е, че приложените чрез CSS margins, paddings или borders, не се отчитат.


Кога всъщност се отчита LCP?

Уеб страниците често се зареждат поетапно и в резултат на това е възможно най-големият елемент на страницата да се промени по време на зареждане.

За да се справи с тази промяна, браузърът изпраща PerformanceEntry от типа “largest contentful paint”, и след като рендира първия фрейм, идентифицира най-големия елемент на страницата.

След като рендира и последващия фрейм, и установи смяна (засече нов “най-голям елемент”) на най-големия елемент, браузърът отново ще изпрати PerformanceEntry.

Например, на страница с текст и голям уеб банер, браузърът първоначално може да рендира само текста - като изпрати LCP елемент (entry), чийто атрибут ще посочи <p> или <h1>. По-късно, след като и банера се зареди, бива изпратен втори LCP елемент (entry), а атрибутът му ще сочи тага <img>.

Важно е да се отбележи, че елемент ще се счита за LCP елемент, единствено след като е рендиран и е видим за потребителя. Изображения, които все още не са се заредили, не се считат за “рендирани”. Същото важи и за блоковете с текст използващи уеб шрифтове по време на блокирането от отдалечено зареждане на шрифтове (font block period).

В такива случаи по-малък елемент може да бъде отчетен като най-големия елемент, но щом по-големият елемент приключи рендирането си, той ще бъде отчетен чрез нов “PerformanceEntry” елемент.

В допълнение на по-бавно зареждащите се изображения и шрифтове, страницата може да добави нови елементи в DOM (Document Object Model), щом новото съдържание стане достъпно. Доколкото някой от тези нови елементи е по-голям от предишния “най-голям елемент”, ще се отчете и нов “PerformanceEntry”.

Ако елемент, който до момента е най-големият такъв, бъде премахнат от видимата част на екрана (или премахнат от DOM), той ще остане най-големия елемент, все до изобразяването (рендирането) на по-голям елемент.

Докато потребителят взаимодейства със страницата (чрез докосване, скролване или натискане на клавиш), браузърът ще спре да отчита нови елементи, тъй като взаимодействието на потребителя със страницата често променя изгледа (layout) на страницата (особено изразено при скролването).


Време за зареждане спрямо време за рендиране

От съображение за сигурност, времето (timestamp) за рендиране на изображенията, не е налично за онези изображения, зареждани от друг сървър (cross-origin), които нямат хедър Timing-Allow-Origin. За тях е налично само времето им за зареждане.

Примерът по-долу показва как да се обработват елементи, чието време за рендиране не е известно/налично. Желателно е обаче, когато е възможно, хедъра Timing-Allow-Origin да бъде настроен, заради точност на метриките.


Как се обработват промените в оформлението и размерът?

За да се запази производителността висока и да се намали времето за изчисляване и изпращане на нови елементи (entries), промените в размера или позицията на даден елемент няма да генерират нови потенциални LCP елементи. Вземат се предвид само първоначалните размер и позиция на елемента във видимата част на екрана.

Това означава, че изображенията, които първоначално са изобразени извън екрана, след като се появяват на екрана, може да не бъдат отчетени. Също така, елементите, които първоначално са били изобразени на екрана, а впоследствие са изтласкани извън видимата част на екрана, ще отчетат първоначалния си размер (in-viewport size).

Въпреки това (както бе споменато по-горе) елементът няма да се вземе предвид, доколкото бъде премахнат от DOM или ако свързаният с него ресурс се промени.


Примери за LCP

Ето два примера за това какво се случва с LCP на популярни уеб сайтове по време на зареждане на страницата:

И в двата таймлайна по-горе, виждаме, че със зареждане на съдържанието, най-големият елемент се променя. В първия пример - в DOM дървото се добавя ново съдържание и това определя кой ще е най-големия елемент. Във втория пример променя се лейаута, и съдържанието, което преди е било най-голямо, изчезва от видимата част на екрана.

Често се мисли, че късно-зареждащото се съдържание (late-loading content) е по-голямо от онова, което вече е видимо на страницата. Обаче, това не е точно така. В следващите два примера ще видим, че най-големия елемент се появява преди пълното зареждане на страницата.

В първия пример, логото на Instagram се зарежда сравнително рано, обаче остава най-големият елемент, дори и след изобразяване на останало съдържание.

В примера със SERP-а на Google, най-големият елемент е текстов параграф, който се изобразява преди да се заредят изображенията или логата.Тъй като всички отделни изображения са по-малки от този параграф, той остава най-големият елемент през целия процес на зареждане.

*В първия фрейм на Instagram таймлайна може да забележите, че логото на Инстаграм (лого изобразяващо фотоапарат) не е обградено в зелено. Това е така, защото то е <svg> елемент, а <svg> елементите понастоящем не се считат за LCP “кандидати”. Това е така, защото SVG е векторно изобрагение, което няма фиксиран размер. Първият “кандидат” за LCP е текстът появил се във втория фрейм.


Как да измерите LCP на вашия сайт?

LCP може да се измерва в лаборатория или чрез събиране на полеви данни и е достъпен в следните инструменти:

Инструменти за измерване на полеви данни

При този вид измерване данните се събрани от браузърите на посетителите на вашия сайт. Това измерване е много по-точно, но изисква сайтът да бъде силно посещаван, за да може бързо да се съберат повече и по-точни данни. Ето няколко инструмента за полеви данни:

Лабораторни инструменти

При този вид измерване, сайтът се тества от едно единствено място - от уеб сървъра на инструмента, който обикновено е извън България или се тества от вашия браузър.

Един от инструментите, който ползваме в Ganbox от доста време за създаване на отчети за сайтове на клиенти, е Core Web Vitals на Google Search Console.


Измерване на LCP в JavaScript

Заб. Тази точка би била полезна за уеб програмисти, ако не се занимавате с програмиране в JavaScript може да я пропуснете и да преминете към точката "Как да подобрим LCP на сайта?" долу, за да разберете как да подобрите скростта на сайта си.

За да измерите LCP в JavaScript, използвайте Largest Contentful Paint API. Следващият пример показва как да създадете PerformanceObserver, който търси largest-contentful-paint елементите и ги регистрира в конзолата.

В горния пример, всеки регистриран largest-contentful-paint елемент, представлява потенциален “кандидат” за LCP. По принцип, стойността startTime на последния добавен елемент е LCP стойността (value), но това не винаги е така. Не всички largest-contentful-paint елементи са валидни за измерване на LCP.

Следващият раздел изброява разликите между това, какво отчита API-то и как се изчисляват метриките.

Разлики между метрики и данни от API

  • API ще изпрати largest-contentful-paint елемент за страници, които се зареждат във фонов режим, но тези страници трябва да бъдат пренебрегвани при изчисляване на LCP.
  • API ще продължи да изпраща largest-contentful-paint елементи, дори конкретна страница да се намира във фонов режим (backgrounded), но тези елементи трябва да бъдат пренебрегвани при изчисляване на LCP (вземат се предвид само елементите намиращи се на страница, която е била на преден план през цялото време).
  • API не отчита largest-contentful-paint елементи, когато страницата се възстановява от back/forward кеша, обаче в тези ситуации LCP трябва да се измерва, тъй като потребителите ги възприемат като отделни посещения/сесии на страницата.
  • API не отчита елементите в iFrames, но за да се измери правилно LCP, те трябва да се вземат предвид.

Вместо да запомнят всички тези фини разлики, разработчиците могат да използват JavaScript библиотеката на web-vitals за измерване на LCP:

За измерване на LCP в JavaScript, вижте програмния код (source code) на функцията getLCP ().


Какво ако най-големият елемент не е най-важният?

В някои случаи най-важният елемент (или елементи) на страницата не е най-големия елемент. При този случай, разработчиците биха могли да обърнат повече внимание  на измерването на времето за рендиране на тези елементи. Това е възможно с помощта на Element Timing API, както е описано в статията за персонализираните метрики.


Как да подобрим LCP на сайта?

LCP се влияе предимно от четири фактора:

  • Бавно време за реакция на сървъра (зависи от хостинга)
  • Блокиращи рендирането JavaScript и CSS (зависи от архитектурата на софтуера на сайта)
  • Време за зареждане на ресурса (може да зависи от много неща: големина на ресурса, натоварване на сървъра, натоварване на мрежата и др.)
  • Рендиране от страна на клиента (client-side rendering) (зависи от изчислителната мощ на устройството, на което е браузъра).

Съвети за подобряване на LCP - Largest Contentful Paint

  • Намалете общия размер на страницата, чрез преоразмеряване (resize) и компресиране на изображения и използване на формати от следващо поколение като WebP, JPEG 2000, или JPEG XR. Уверете се, че имате вариант на изображението в обикновен JPG или PNG заради старите браузъри, които няма да могат да заредят новите формати;
  • Премахнете или намалете най-големите елементи на страницата. Някои елементи може да не се зареждат изобщо при отваряне на сайта от мобилно устройство;
  • Премахнете или ограничете зареждането на ресурси от трета страна (реклами, броячи като Google Analytics, чат бот, Facebook елементи, външни шрифтове и др.);
  • Преминете към по-висок хостинг план (например VPS);
  • Въведете lazyload зареждане за рекламите и снимките. Изображенията извън видимата част на екрана, може да бъдат с отложено зареждане и да се заредят едва след като се скролне до тях;
  • Открийте блокиращи рендирането JavaScript и CSS и ги поправете;
  • Премхнете ненужните плъгини или софтуерни библиотеки, които не се използват;
  • Минифицирайте  скриптовете, стиловете и дори HTML кода на страниците (Minify JavaScript, CSS, HTML);
  • Използвайте CDN за изображенията. Това няма голям смисъл, ако сайтът е само за България, освен ако ползваният CDN няма центрове разположени физически в български градове.

Ако сте уеб разработчик, за да проучите в подробности техниките за подобряване на LCP, прочетете статията Оптимизиране на LCP (на английски език).

Ето и едно видео на български за LCP от колегите от уеб студио Creativiso

Допълнителни ресурси относно индивидуалните техники за изпълнение, които ще подобрят LCP:

Вижте още публикацията на Ganbox: Какво е CLS - Cumulative Layout Shift

Ако имате нужда от оптимизиране на скоростта на сайт, може да се свържете с нас от страница Контакти.

Заб. Използвани са материали от сайта web.dev

Прочетена:7647
1 - лоша2 - слаба3 - средна4 - добра5 - отлична (2 гласа, оценка: 5,00 от 5. Моля изберете оценка!)
Loading...
Георги Стефанов
Магистър по информатика, който се занимава с компютри от 1988 г., професионално с програмиране от 1998 г., а с уеб технологии от 2002 г. Има богат опит при оптимизиране на бизнес сайтове. Повече от 15 години развива успешно свои уеб проекти и работи с български и международни компании за постоянно подобряване на техните сайтове и увеличаване на онлайн продажбите. 

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

споделиха
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram