Next.js:优化LCP时间/速度
Next.js:优化LCP时间/速度
提问于 2021-09-06 08:49:46
我有一个next.js项目(11.1.2版本)，我想优化页面速度。我正在使用谷歌PageSpeed洞察力进行测量。目前，得分在以下几个方面：
- 40-50用于移动(！)
- 80-90用于桌面。
一些背景：
对于我需要优化的页面，我使用静态站点生成和增量静态生成。最重要的页面是在构建时构建的，而“不太重要”的页面则是在需要时生成的。这些页面基于数据--我使用的是Heroku托管的Postgres。
到目前为止我所做的：
在Google PageSpeed洞察中，我可以看到LCP非常慢(6-7s)。我想这就是问题所在。我已经做了以下工作：
- 我对图像进行了优化。每页只有一个图像(img)，这是一个预加载的PNG (折叠上方)。由于图像大小不同，我没有使用原生next/image组件。对于其他图像，我使用的是next/image-component.
- 在Google PageSpeed Insight中我看到消息“删除未使用的JS”(在2个next.js文件中：“/next.js/.”)以及在生成的页面中)。所以我：
- 使用next/bundle分析器检查所有内容。在客户端，有一个图书馆，相当大。所以我尝试了另一个，更轻巧的。不幸的是，它没有使用next/dynamic-imports改进任何speed-wise.
- I'm --我不确定这是否真的很聪明。由于我使用的是静态站点生成:是否有可能额外的请求减慢了一切？
我不确定我做得对不对？还有什么我可以改进的吗？如有任何建议，敬请谅解！谢谢!
编辑这里是与折叠上方图像的预压相关的代码：
export function SingleItem({ item }){
// some logic
return(
<>
<Head>
<link
rel="preload"
as="image"
href={`/assets/pics/${item.name}.png`} />
</Head>
<div className={styles.image}>
<ItemImage
src={`/assets/pics/${item.name)}.png`}
fallbackSrc="/assets/pic-coming-soon.jpg"
alt="{`${item.name}`}" />
</div>
//more code
</>
)}
我在pages/item.js (即SSG/ ISG)中使用SingleItem组件。我不确定是否可以在组件中使用头标签？
下面是ItemImage组件：
const ItemImage = (props) => {
const { src, fallbackSrc, ...rest } = props;
const [imgSrc, setImgSrc] = useState(src);
const isSmallScreen = useMediaQuery("(max-width:780px)");
return (
<img
{...rest}
src={imgSrc}
onError={() => {
setImgSrc(fallbackSrc);
}}
className={`${isSmallScreen ? styles.smallImg : styles.bigImg}`}
/>
);
};
//css:
//.bigImg {width: 100%; height: 100%}
//.smallImg {width: 70%; height: 70%}
回答 1
Stack Overflow用户
发布于 2021-09-06 08:56:15
也许只是个建议。尝试为映像实现延迟加载，因为这可能是加载最密集的映像。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69071759
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号