灯塔上最大的合格涂料(LCP)是p标签.(使用盖茨比) [英] Largest contententful paint (LCP) on lighthouse is a p tag. (Using gatsby)
问题描述
我不知道为什么我的LCP会是p标签，而且我不知道如何减小它的尺寸.有时它会上升到2.6秒，并给出黄色的评分(而不是绿色).
I don't know why my LCP would be a p tag, and I have no idea what I would do to reduce the size of it. Sometimes it gets up to 2.6s and gives a yellow rating(instead of green).
这是p标签.所有这些类都是引导程序类.
This is the p tag. All of those classes are bootstrap classes.
<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.`
推荐答案
人们似乎完全误解了最大内容绘画"指标的目的.它旨在向您显示以上折叠内容中的大多数何时准备就绪.
People seems to completely misunderstand the purpose of the Largest Contentful Paint metric. It is designed to show you when the majority of the above the fold content is ready.
什么是内容最多的内容并不像何时发生那样重要.什么项目仅在确定可能会使您的页面速度变慢的情况下有用.
What item is the Largest Contentful Paint is not as important as when it occurs. What item is only useful in determining what could be slowing your page down.
这是确定何时足够多"的内容被充分绘制以使最终用户将页面视为完整"的主要指标.(这被认为是完整性，在页面/后台的下方仍然可以加载一些东西.)
It is the main metric in determining when 'above the fold' content is painted sufficiently that an end user would see the page as "complete" (this is perceived completeness, there can still be stuff loading lower down the page / in the background).
拆分段落，将其包裹在div中，使其更高等的建议.等等.毫无用处，它们只是将LCP转移到其他内容上(可能)，使您的分数看起来更好但实际上并不能解决问题.
The suggestions of splitting the paragraph, wrapping it in a div, making it taller etc. etc. serve no purpose, they just shift the LCP onto something else (possibly) making your score look better but not actually fixing the problem.
您想要做的是优化页面上的初始内容.
What you want to do is optimise the initial content on the page.
为此，您只希望提供折叠上方" HTML以及折叠内容上方所需的CSS和JS.
For this you want to serve just the 'above the fold' HTML along with the CSS and JS required for above the fold content.
然后，您将为您提供其他服务.
Then you serve everything else.
本文是对关键JS和CSS的很好的介绍 https://www.smashingmagazine.com/2015/08/understanding-critical-css/
This article is a good introduction to critical JS and CSS https://www.smashingmagazine.com/2015/08/understanding-critical-css/
简而言之，内联关键CSS和JS意味着在页面上呈现初始内容所需的CSS和JS应该在HTML内联.现在，我猜想使用Gatsby之类的东西，您可以内嵌关键JS，从而在折叠内容之上，在CSS之上呈现折叠等.但是原理是相同的.
However in a nutshell inlining critical CSS and JS means that the CSS and JS required to render the initial content on the page should be inline within the HTML. Now I am guessing with something like Gatsby you would inline the critical JS that renders the above the fold content, above the fold CSS etc. but the principle is the same.
关键是上述折叠内容应全部在HTML中提供(非矢量图像除外)，这样就没有往返时间等待CSS文件，JS文件等.
The key is that the above the fold content should all be served (except for non vector images) within the HTML so that there is no round-trip time waiting for CSS files, JS files etc.
因此为了清楚起见，而不是:-
- 请求HTML，(服务器往返200毫秒)
- 已加载和解析HTML，找到了呈现初始页面内容所需的CSS和JS链接
- 已请求CSS和JS.(往返服务器200毫秒)
- 已加载CSS和JS
- 足以呈现页面.
相反，您有
- 请求HTML，(服务器往返200毫秒)
- 已加载HTML，所有必需的CSS和JS内嵌在HTML中
- 足以呈现页面
这可能看起来并不多，但是200ms可以对感知的速度产生巨大的影响.
This may not seem like a lot but that 200ms can make a huge difference to perceived speed.
这也是一个简化的示例，通常一个页面需要20个或更多请求才能呈现以上折叠内容.由于一次(通常)一次8个请求的限制，这意味着最多有3次200ms的往返等待服务器响应.
Also this is a simplified example, often a page requires 20 requests or more to render the above the fold content. Due to the limitations of 8 requests at a time (normally) this means there could be up to 3 round-trips of 200ms waiting for server responses.
在您的站点上，您会发现有关关键请求链"的错误信息.因为初始页中没有HTML，因为HTML都是通过JS呈现的.这可能就是为什么您认为没有问题的原因.
Looking at your site you will be getting a false reading for "critical request chains" as there is no HTML served in the initial page as it is all rendered via JS. This could be why you do not think there is a problem.
如果执行上述操作，则假设图像已优化，您将获得较低的FCP和LCP时间.
If you do the above your will get low FCP and LCP times assuming your images are optimised.
这篇关于灯塔上最大的合格涂料(LCP)是p标签.(使用盖茨比)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
