我有一个next.js项目(版本11.1.2)，我想优化页面速度。我使用谷歌pagespeedinsight进行测量。目前，分数在:
- 移动40-50 (!!)
- 桌面80-90
一些背景:
对于我需要优化的页面，我使用静态站点生成增量静态生成。最重要的页面是在构建时构建的，而最重要的页面是在构建时构建的。根据需要提供重要的信息。页面是基于数据-我使用的Postgres托管在Heroku。
我已经做了什么:
在Google pagesspeed Insight中，我可以看到LCP真的很慢(6-7秒)。我想这就是问题所在。我已经完成了以下操作:
-
我已经优化了图像。每页只有一张图片(img)，这是一个预加载的PNG(在折叠上方)。我没有使用原生的next/image-组件，因为图像的大小不同。对于其他图像，我使用next/image-组件。
-
在Google pagspeed Insight中，我看到消息"删除未使用的JS"(在两个next.js文件中:"/chunks/…"并在生成的页面中)。所以我:
- 使用next/bundle-analyzer检查所有内容。在客户端，有一个相当大的库。所以我试了另一个更轻的。不幸的是，它没有提高任何速度。
- 我正在使用next/dynamic-imports -我不确定这是否真的很聪明。因为我使用静态站点生成:是否有可能，额外的请求减慢一切?
现在，我不确定我做的每件事是否正确?还有什么我可以改进的吗?任何建议都很感激!谢谢你！
编辑下面是我的代码与预加载的图像在折叠:
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中使用singleitem -组件(这是SSG/ISG)。我不确定是否可以在组件中使用头标签?
下面是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%}也许，只是一个建议。尝试为图像实现延迟加载，因为这些图像可能是加载最密集的。