I have a next.js project (version 11.1.2) and I'd like to optimize the page speed. I'm using google PageSpeed Insight for measurement. Currently, the score is around:
- 40-50 for mobile (!!)
- 80-90 for desktop.
Some background:
For the pages I need to optimize I'm using static site generation with incremental static generation. The most important pages are built at build time and the "less" important ones as needed. The pages are based on data - I'm using Postgres hosted on Heroku.
What I've done so far:
In Google PageSpeed Insight I can see that the LCP is really slow (6-7s). I think this is the problem. I've already done the following:
I've optimized the images. There is only 1 image (img) per page, which is a preloaded PNG (above the fold). I didn't use the native next/image-component, because of the different sizes of the images. For other images I'm using the next/image-component.
In Google PageSpeed Insight I see the message "Remove unused JS" (in 2 next.js files: "/chunks/..." and in the generated page). So I:
- checked everything with next/bundle-analyzer. On the client-side, there was a library, which was quite big. So I tried another, more lightweight one. Unfortunately, it didn't improve anything speed-wise.
- I'm using next/dynamic-imports - I'm not sure if this is really clever. Since I'm using static site generation: is there the possibility that the additional requests slow down everything?
Now, I'm not sure if I'm doing everything right? Is there something else I could improve? Any suggestions are appreciated! Thank you!
EDIT Here's my code related to the preloading of the image above the fold:
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
</>
)}I'm using the SingleItem-component in pages/item.js (which is SSG/ ISG). I'm not sure if it's possible to use the Head-Tags in components?
And here is the ItemImage component:
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%}
ItemImagecomponent?