对于那些在这个问题上磕磕绊绊想知道如何提高他们的灯塔分数的人,我在另一个问题上发布了关于这个主题的答案,其中包含许多一般提示。
我正在运行 PageSpeed 洞察,我最大的问题是最大的内容绘制,大约 8-10 秒。下面他们列出了我最大的内容绘画元素
Largest Contentful Paint element 1 element found
This is the largest contentful element painted within the viewport. Learn More
Element
This is the a paragraph that appears above here
<section class="mainBgImage gbi--716926567-eDXcajFRMpQ2F1s7wNgLk1" style="background-position:center top;background-repeat:no-repeat;background-size:cover;position:relative;opacity:0.99" role="img">
这个元素是一个在背景中跨越我整个网站的图像。它最初是一个 1.2 MB png,我使用...GatsbyImageSharpFluid_withWebp_noBase64
maxWidth 为 1950 加载。
这是我如何渲染它的代码
import BackgroundImage from 'gatsby-background-image';
...
<BackgroundImage
Tag="section"
role="img"
className='mainBgImage'
fadeIn={false}
// style={{objectFit: 'contain', width: '100%' }}
style={{
opacity: 0.03,
backgroundPosition: "center top",
}}
fluid={wheatImgProps}
>
{children}
</BackgroundImage>
这是静态的graphql查询
const data = useStaticQuery(graphql
`query LayoutQuery {
wheatImg: file(
extension: {regex: "/(jpg)|(jpeg)|(png)/"},
name: {eq: "wheat-background"}
) {
childImageSharp {
fluid(maxWidth: 1950) {
...GatsbyImageSharpFluid_withWebp_noBase64
}
}
}
}
`
)