Building a fast static portfolio website

A static portfolio can serve pages without rendering every section in JavaScript. That makes the initial document easy for visitors, assistive technology, and search crawlers to read. Static delivery alone does not guarantee speed: fonts, images, third-party widgets, and large scripts still affect what a visitor experiences.

Put important content in the HTML

Write the page title, introduction, project summaries, and contact details directly into the document. Use JavaScript to improve interactions such as filtering projects, not to create the only copy of important content. This progressive-enhancement approach means the primary information remains available even when a script fails.

Keep the first screen focused

Lead with the person's name, role, a concise description, and the next useful actions. Avoid a tall decorative hero that pushes the work and contact information far below the fold. Make the heading scale predictably and check it at mobile widths.

Use assets deliberately

Choose an image format and dimensions that fit the display size. Include width and height attributes for images to reduce layout shifts. Do not lazy-load an image that is immediately visible; defer images further down the page. Prefer system or self-hosted fonts if remote font loading delays the first render, and use font-display settings that preserve readable fallback text.

Load optional scripts only when useful

Analytics, chat widgets, and other third-party code can add network requests and main-thread work. Delay nonessential scripts until after the page has loaded or until a visitor opens the feature. Keep the no-script page useful and ensure that the widget does not block reading or navigation.

Measure, then improve

Use Lighthouse during development to find opportunities, then review field data in Search Console and Chrome UX Report when available. Core Web Vitals include Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift. A lab score is a point-in-time test; it is not a promise about every device or network.

References: Web Vitals, Lighthouse, and MDN image element guidance.