Images, fonts, and scripts
Assets affect loading more than their file size suggests. Images can move layout, fonts can delay text, and third-party scripts can steal main-thread time.
Use next/image when its optimisation model fits
Image handles sizing and optimisation concerns that are easy to get wrong by hand. Always give the browser enough sizing information to reserve space and avoid layout shift.
For remote images, keep the allowed hosts and path patterns as narrow as practical.
Treat the hero image differently from the tenth image
The image that becomes Largest Contentful Paint may need earlier discovery and loading. Images below the fold usually should not compete with it.
Do not mark every image as high priority. Priority stops being useful when everything has it.
Fonts are part of rendering performance
next/font can self-host font files and reduce the need for separate third-party font requests. Keep the number of families, weights, and styles deliberate.
A design rarely needs every weight a font offers.
Third-party JavaScript deserves suspicion
Analytics, embeds, chat widgets, and marketing scripts can affect responsiveness long after your own bundle is optimised. Load them according to when they are actually needed.
Measure their effect in production instead of assuming a small snippet has a small runtime cost.
Can you explain “Images, fonts, and scripts” without reaching for the API reference?
Describe the main trade-off, one failure mode, and the decision you would make in a real project.