Deploying and Optimizing Your PortfolioLesson 5.3

How to optimize portfolio performance with Lighthouse

Lighthouse audit, performance score, Core Web Vitals, LCP, CLS, FID, image optimization, font loading, render blocking, defer and async scripts

Lighthouse: The Standard for Web Performance

Lighthouse is built into Chrome DevTools. A portfolio developer scoring below 90 on performance is demonstrating a gap in their own skills. Run it and fix it before sharing your URL.

Run a Lighthouse Audit

# In Chrome DevTools:
# 1. Open DevTools (F12)
# 2. Click the "Lighthouse" tab
# 3. Select "Mobile" device
# 4. Check Performance, Accessibility, SEO
# 5. Click "Analyze page load"

Fixing the Most Common Issues

<!-- 1. Lazy load images below the fold -->
<img src="project.webp" loading="lazy" alt="Project screenshot" />

<!-- 2. Preload your main font -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

<!-- 3. Defer non-critical scripts -->
<script src="js/main.js" defer></script>

# Convert images to WebP (80-90% smaller than PNG)
convert project.png -quality 85 project.webp

# Or with ffmpeg
ffmpeg -i project.png -c:v libwebp -quality 85 project.webp

The three highest-impact fixes for a static portfolio: convert all images to WebP, add loading="lazy" to below-fold images, and add defer to your JavaScript. These alone typically bring a score from 65 to 95+.