I recently shipped datecalc.xyz — a date calculator tool built with Next.js 14, TypeScript, Tailwind CSS, and date-fns. The site does what it says: calculate differences between dates, add/subtract durations, find day-of-week, and more.
The goal was simple, but the constraint was strict: score as high as possible on PageSpeed Insights before writing a single line of marketing copy.
Here's what actually moved the needle.
The render-blocking font trap
My first build loaded Google Fonts the naive way — a in _document.tsx. PageSpeed flagged it immediately as render-blocking. The fix: switch to next/font/google with display: 'swap' and preload: true. Next.js inlines the @font-face declaration at build time and handles preloading automatically. Gone from the waterfall.
