Design & development · 2 min read
How to Build a Developer Portfolio That Scores 100 on PageSpeed
A slow portfolio is a bad first impression for anyone who builds for the web. Here's what actually moves the score, and a single-page Astro theme that gets you there out of the box.
· by Shail
Your portfolio is often the first thing a hiring manager or client sees of your work. If you build for the web, a slow, janky site quietly undermines everything on it. The good news: a fast portfolio isn’t hard. It mostly comes down to what you don’t ship.
What PageSpeed actually measures
Google PageSpeed Insights runs Lighthouse on a simulated mid-range phone with a slow connection. The Performance score is built mainly from:
- Largest Contentful Paint (LCP): how long until the biggest thing on screen, usually your headline or photo, appears.
- Total Blocking Time (TBT): how long JavaScript stops the page from responding.
- Cumulative Layout Shift (CLS): how much things jump around while loading.
Mobile is the strict test. A site that scores 100 on desktop can easily score 60 on mobile.
1. Ship almost no JavaScript
Most portfolios don’t need a framework running in the browser. A static site generator like Astro renders everything to plain HTML at build time, and only sends JavaScript for the few things that need it, such as a theme toggle. Fewer kilobytes of script means less blocking time.
2. One font, self-hosted and preloaded
Every web font is a request on the critical path. Use one variable font file instead of several weights, host it yourself, and preload it. Pair it with a fallback font whose size is matched to it, so text doesn’t jump when the real font arrives. Astro’s built-in Fonts API does all of this for you.
3. Right-sized images
A 2400-pixel screenshot on a 390-pixel phone wastes a lot of bandwidth. Generate modern formats (AVIF and WebP) at several widths and let the browser pick, with width and height set so space is reserved and nothing shifts. Astro’s <Picture> component handles it.
4. Motion without scripts
Scroll reveals and animated underlines are what make a portfolio feel alive, but animation libraries are heavy. Modern CSS can do it: scroll-driven animations, transitions and SVG stroke drawing. Turn them off for people who prefer reduced motion.
5. No third-party embeds at load time
Analytics tags, chat widgets, embedded tweets and video players are the most common reason a fast site turns slow. If you need them, load them only when the visitor interacts.
6. Check it on the live site
Test the deployed site, not your laptop: hosts like Cloudflare Pages add compression and caching that local servers don’t. Browser extensions and antivirus tools can also inject scripts into local tests and drag scores down.
The shortcut: Altair
Altair is our single-page Astro portfolio theme for developers and designers, built on every point above. The live demo scores 99 Performance and 100 Accessibility, Best Practices and SEO on mobile PageSpeed.
- A hero with your availability, live local time and a hand-drawn headline underline
- Selected work, about with a toolbox, services, experience, testimonials and contact
- A built-in blog with RSS and code highlighting for light and dark
- Light and dark modes, and one accent colour that restyles everything
- One font file and under 2 KB of JavaScript
- Content in Markdown and YAML, checked when you build
Read the documentation to see how it works, or try the live demo.