optimize LCP elements

[parasquid]

see https://nextjs.org/docs/pages/building-your-application/optimizing/images#priority

for each page, check the top of the fold (the elements immediately showing when the page is loaded, without scrolling) and optimize the images there.

For example, they should not be lazy loaded and the priority attribute should be set.

[parasquid]

We should also use a placeholder image like https://github.com/vercel/next.js/blob/canary/examples/image-component/app/shimmer/page.tsx