Building a Fast Next.js Portfolio That Actually Converts
A practical checklist for a portfolio that loads fast, ranks well, and turns visitors into booked calls — drawn from building darl.dev.
A portfolio has one job: convince the right person to reach out. That means it has to load fast, look credible, and make the next step obvious. Here's the approach I used building this very site with Next.js and Tailwind.
Render static, hydrate sparingly
Keep pages as Server Components and prerender them at build time. Only the genuinely interactive pieces — a copy button, an animated hero, a theme toggle — need to ship JavaScript to the browser. Less client JS means faster Time to Interactive.
Protect your Largest Contentful Paint
- Use next/font so your typeface doesn't cause layout shift.
- Serve hero imagery in modern formats and size it for the viewport.
- Keep above-the-fold content in the server-rendered HTML so it paints before hydration.
Make the metadata work for you
Set a strong title and description, add Open Graph and Twitter cards for clean link previews, and ship JSON-LD structured data so search engines understand who you are. A sitemap and robots file round it out.
Design for one clear action
Every section should funnel toward a single call to action. On this site that's booking a strategy call. Social proof, project work, and services all build toward that one button.
Fast, credible, and focused beats flashy every time. Build the boring fundamentals well and the conversions follow.
Found this useful? Let's talk about your project.
Get in touch