Самая большая содержательная краска (LCP) на маяке - это тег p. (Используя Гэтсби)

Я не знаю, почему мой LCP будет тегом p, и я не знаю, что бы я сделал, чтобы уменьшить его размер. Иногда доходит до 2,6 с и дает желтый рейтинг (вместо зеленого).

введите описание изображения здесь

Это тег p. Все эти классы являются классами начальной загрузки.

<p className="text-center mb-md-5 mt-0 mb-5">{aboutText}</p>

Это переменная aboutText

const aboutText = `Suddenly  Magazine highlights the uniqueness of Saskatchewan,  and its sudden rise in popularity and growth mentioned in publications such as USA Today and the New York Times.

Advertorials and Articles focus on its rare & particular tourism, its passionate sports, its character, and the prosperous opportunity for businesses and artists influenced by a Saskatchewan setting.

It is centred in Saskatoon, but contributors range from Lac La Ronge in the North, to provincial boundaries east and west, to the Outlaw Caves near the US border.`

Домен https://suddenlysask.com.


reactjs gatsby lighthouse pagespeed-insights pagespeed
person Sam    schedule 10.08.2020    source источник
comment
Я просто понимаю, что думаю, это зависит от того, когда я напишу первую полноценную краску. Кажется, что LCP всегда на 0,6 выше, чем FCP.   -  person Sam    schedule 10.08.2020
comment
Для тех, кто спотыкается на этом вопросе и задается вопросом, как в целом улучшить свою оценку маяка, я опубликовал ответ на эту тему по другому вопросу с множеством общих советов.   -  person Sam    schedule 17.01.2021

Ответы (3)


arrow_upward
2
arrow_downward

Люди, кажется, совершенно неправильно понимают цель метрики Крупнейшая Contentful Paint. Он предназначен для того, чтобы показать вам, когда будет готова большая часть содержимого в верхней части страницы.

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

Это основная метрика при определении того, когда контент «в верхней части страницы» раскрашен в достаточной степени, чтобы конечный пользователь увидел страницу как завершенную (это воспринимается как завершенность, все еще могут загружаться материалы, загружаемые ниже по странице / в фоновом режиме).

Предложения разбить абзац, обернуть его в div, сделать его выше и т. Д. И т. Д. бесполезны, они просто перемещают LCP на что-то другое (возможно), чтобы ваша оценка выглядела лучше, но на самом деле не устранение проблемы.

Что вы хотите сделать, так это оптимизировать исходный контент на странице.

Для этого вы хотите использовать только HTML-код «над сгибом» вместе с CSS и JS, необходимыми для содержимого над сгибом.

Затем вы обслуживаете все остальное.

Эта статья является хорошим введением в критический JS и CSS https://www.smashingmagazine.com/2015/08/understanding-critical-css/

Однако вкратце встраивание критических CSS и JS означает, что CSS и JS, необходимые для отображения исходного содержимого на странице, должны быть встроены в HTML. Теперь я предполагаю, что с помощью чего-то вроде Gatsby вы бы встроили критический JS, который отображает содержимое над сгибом, над CSS над сгибом и т. Д., Но принцип тот же.

Ключевым моментом является то, что все вышеупомянутое содержимое сгиба должно обслуживаться (за исключением не векторных изображений) в HTML, чтобы не было времени ожидания для файлов CSS, JS и т. Д.

Так что для ясности вместо: -

  • Запрошен HTML (200 мс туда и обратно на сервер)
  • HTML загружен и проанализирован, найдены ссылки на CSS и JS, необходимые для рендеринга исходного содержимого страницы.
  • CSS и JS запрошены. (200 мс туда и обратно на сервер)
  • CSS и JS загружены
  • Достаточно для рендеринга страницы.

Вместо этого у вас есть

  • Запрошен HTML (200 мс туда и обратно на сервер)
  • HTML загружен, все необходимые CSS и JS встроены в HTML
  • Достаточно для рендеринга страницы

Может показаться, что это не много, но 200 мс могут иметь огромное значение для воспринимаемой скорости.

Также это упрощенный пример, часто странице требуется 20 или более запросов для отображения содержимого, расположенного выше сгиба. Из-за ограничений на 8 запросов за раз (обычно) это означает, что может быть до 3 циклов приема-передачи по 200 мс в ожидании ответов сервера.

Посмотрев на свой сайт, вы получите ложные показания для критических цепочек запросов, поскольку на начальной странице нет HTML-кода, так как все это отображается с помощью JS. Возможно, именно поэтому вы не думаете, что есть проблема.

Если вы сделаете это, вы получите низкое время FCP и LCP, если ваши изображения оптимизированы.

person Graham Ritchie    schedule 10.08.2020
comment
Я действительно не понимаю, что вы пытаетесь мне сказать. Должен ли я сделать это приложение не одностраничным? Я не думаю, что я достаточно хорошо разбираюсь в этом материале, как вы, поэтому вам, возможно, придется упростить это. Все, что я делаю, это импортирую свои файлы css, используя что-то вроде import ./styles.css или scss - person Sam; 11.08.2020
comment
Вы читали статью, на которую я ссылаюсь, поскольку это простейшее объяснение того, что такое критический CSS? Если вы чего-то не понимаете в связанной статье, я с радостью объясню, но если вы не понимаете ничего из этого, вы можете прочитать, как браузеры отображают страницы и какие встроенные стили и встроенными элементами скрипта являются (<style> и <script>), а также то, что находится над содержимым сгиба. Это основы веба, поэтому, если вы не следуете им, я сначала укажу вам на некоторые основные статьи, так как вам нужно понять основы перед оптимизацией. - person Graham Ritchie; 11.08.2020
comment
Вы также должны понимать, что я понятия не имею, что бы я сделал, чтобы уменьшить его размер. означает, что вы вообще этого не понимаете, поэтому, возможно, быстро прочитайте web.dev / lighthouse-large-contentful-paint, а затем web.dev/lcp/ и посмотрите, какая часть из этого имеет для вас смысл, еще раз задавайте вопросы, если некоторые из них не имеют смысла. Последнее, что нужно учитывать - получить от 80 до 90 на PSI примерно в 3 раза легче, чем от 90 до 95, эти последние несколько пунктов для 99/100 требуют серьезной работы и понимания. - person Graham Ritchie; 11.08.2020
comment
Мне сказали, что Гэтсби делает все это автоматически. Почему вы говорите, что у меня запрошен HTML, (200 мс туда и обратно на сервер) загружен HTML, все необходимые CSS и JS встроены в HTML. Достаточно для рендеринга страницы. - person Sam; 13.08.2020
comment
Итак, я провел аудит Lighthouse на локальной версии своего веб-сайта, используя gatsby build && gatsby serve, и обнаружил, что локально мой LCP на самом деле не превышает 1,7. Только на сервере время LCP может быть выше. Reduce initial server response time - это часто получаемое мной уведомление, над которым я работаю. В настоящее время у меня есть ответственный вопрос, открытый для него. - person Sam; 13.08.2020
comment
хорошо, посмотрю, но я не использую React, поэтому мои знания здесь ограничены, я боюсь. - person Graham Ritchie; 14.08.2020

arrow_upward
2
arrow_downward

Так почему ваша LCP - это тег p?

Это только на мобильном телефоне тег p, и вот посмотрите на мобильный размер.

введите описание изображения здесь

Ясно видно, что тег p занимает здесь наибольшее место.

Вы можете попробовать увеличить изображение на мобильных устройствах, чтобы Lighthouse считал изображение LCP.

Другое решение - разделить тег p на 2 тега p меньшего размера.

Другим решением может быть (это не рекомендуется), чтобы немного вырезать ваш тег p из области просмотра, потому что ...

Размер элемента, указанного для самой большой Contentful Paint, обычно равен размеру, который виден пользователю в области просмотра. Если элемент выходит за пределы области просмотра, или если какой-либо элемент обрезан или имеет невидимое переполнение, эти части не учитываются в размере элемента.

Я предполагаю, что ваш плохой результат исходит из этой строки здесь:

<link data-react-helmet="true" rel="preload" href="https://fonts.googleapis.com/css?family=Montserrat|Helvetica+Neue|Helvetica|Arial&amp;display=swap">

Почему это занимает до 2,6 секунды?

Вот что я думаю:

Загрузка шрифта Google может занять свое время, и не гарантируется, что он всегда загружается в одно и то же время, поэтому, когда шрифт загружается, он меняет ваши шрифты, а это означает, что теги p меняются местами. Это означает, что тег p с новым шрифтом рассматривается как новый LCP.

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

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

person Ifaruki    schedule 10.08.2020
comment
Итак, я провел аудит Lighthouse на локальной версии своего веб-сайта, используя gatsby build && gatsby serve, и обнаружил, что локально мой LCP на самом деле не превышает 1,7. Только на сервере время LCP может быть выше. Также есть способ просто загрузить шрифты и загрузить их из локального файла? - person Sam; 13.08.2020
comment
@Sam хорошо, даже если вы загрузите шрифты и поместите их на свой сервер, вашим клиентам все равно нужно будет загрузить их, насколько я знаю. это может быть сервер. LCP означает самую большую содержательную отрисовку, и если сервер отвечает медленно, почему такая высокая задержка или что-то еще, это время тоже увеличивается - person Ifaruki; 14.08.2020

arrow_upward
0
arrow_downward

Некоторые пользователи Gatsby в последнее время жалуются на резкое падение и уменьшение оценки Lighthouse, и все согласны с тем же: оценка Lighthouse сильно снизилась из-за большого времени отклика LCP (Largest Contentful Paint).

Это результат изменений в новой версии Lighthouse (v6), которая в Фактически, LCP представляет собой новую концепцию и метрику. Как видите, журнал изменений может быть написан, но зависит от пользователя, а на сайте изменения поступают в разные даты (я предполагаю, что это зависит от серверов Google и времени, в которое это изменение реплицируется через них).

Согласно документации:

Самая большая Contentful Paint (LCP) - это измерение воспринимаемого опыта загрузки. Он отмечает момент загрузки страницы, когда основной или самый большой контент загружен и виден пользователю. LCP - важное дополнение к First Contentful Paint (FCP), которое фиксирует только самое начало процесса загрузки. LCP дает разработчикам сигнал о том, насколько быстро пользователь может увидеть содержимое страницы. Оценка LCP менее 2,5 секунд считается «хорошей».

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

Вес FCP снижен с 23% до 15%. Измерение только при закрашивании первого пикселя (FCP) не дало нам полной картины. Сочетание этого с измерением того, когда пользователи могут видеть то, что им, скорее всего, интересно (LCP), лучше отражает опыт загрузки.

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

В вашем случае я бы посоветовал:

  • Удалите свой <p> и снова проверьте счет, чтобы увидеть изменения (на всякий случай).
  • Оберните свой <p> в <div>.
  • Разделите ваш <p> на 2 или 3 маленьких части, чтобы сделать их доступными для LCP, а также для FCP.

Если ничего из вышеперечисленного не сработает, я бы попробовал играть на высоте <p>, чтобы увидеть, улучшит ли это результат.

Я предполагаю, что Гэтсби (а также Google) работают над настройкой этой новой функции и исправлением этой проблемы с плохой оценкой.

person Ferran Buireu    schedule 10.08.2020
comment
Итак, я провел аудит Lighthouse на локальной версии своего веб-сайта, используя gatsby build && gatsby serve, и обнаружил, что локально мой LCP на самом деле не превышает 1,7. Только на сервере время LCP может быть выше. Я не делал этого локально, потому что total blocking time и time to interactive всегда терпят неудачу локально. - person Sam; 13.08.2020