Deployment & Optimization

Lesson 22

Before pushing a project live, run a pre-deployment pass with Claude Code. This is different from a code review — it’s focused on what matters to real users and search engines, not code quality.

What to ask Claude Code before deploying

These four prompts cover the most impactful pre-deployment work:

1. Images and lazy loading

이미지에 lazy loading과 적절한 alt 텍스트 추가해줘.
width와 height 속성도 같이 추가해서 CLS를 방지해줘.

loading="lazy" tells the browser to skip offscreen images until they’re needed. Missing width/height on images is the most common cause of layout shift (CLS), which tanks Core Web Vitals scores.

2. SEO meta tags

SEO 메타태그 (title, description, og:image) 추가해줘.
title은 50-60자, description은 150-160자로.

Open Graph tags (og:title, og:description, og:image) control how your site looks when shared on Slack, LinkedIn, or iMessage. Without them, social previews show nothing or pull random text.

3. Core Web Vitals audit

이 페이지의 Core Web Vitals에 영향을 주는 부분을 찾아줘.
LCP, CLS, INP 각각 어떤 요소가 영향을 주는지 알려줘.

4. Resource loading optimization

CSS와 JS 파일을 defer/async로 로드하도록 최적화해줘.
render-blocking 리소스를 제거해줘.

Vercel deployment

The simplest deployment flow: push your code to GitHub, connect the repo to Vercel, and it deploys automatically on every push. No build step needed for static HTML/CSS/JS projects. Ask Claude Code to write a vercel.json if you need custom routing or headers.

robots.txt and sitemap basics

For a portfolio site, ask Claude Code to generate both:

이 포트폴리오 사이트용 robots.txt와 sitemap.xml 만들어줘.
페이지: /, /work, /about, /contact.

A sitemap.xml tells search engines which pages exist. A robots.txt tells crawlers what to ignore. Both are one-time tasks that Claude Code handles in seconds.

The final launch checklist

The most useful prompt before going live:

이 포트폴리오 사이트를 launch하기 전에 체크해야 할 항목을 알려줘.
퍼포먼스, SEO, 접근성, 코드 품질 기준으로.

Use the output as an actual checklist — not just reading material. The demo is an interactive version of that checklist, with progress tracking and localStorage persistence so you can work through it across sessions.