88 PSI에서 100 PSI로: 프론트엔드 최적화를 위한 클로드 코드

한 개발자가 Claude Code를 디버깅 및 구현 파트너로 활용하여 자신의 사이트 PageSpeed Insights 모바일 점수를 88에서 100으로 끌어올렸습니다 (템플릿 게시물은 74에서 100으로 상승). r/ClaudeAI에 게시된 글은 단순한 원샷 수정이 아닌, 일련의 집중적인 개입을 통한 실질적인 워크플로우를 자세히 설명합니다.

주요 최적화 성과

• 반응형 이미지 + srcset: Claude는 모바일 히어로 이미지가 필요 이상으로 크다는 것을 식별한 후, 반응형 이미지 변형을 생성하고 srcset 속성을 추가했습니다.
• LCP 사전 로드: <link rel="preload" as="image" imagesrcset="...">를 사용하여 LCP 이미지에 반응형 사전 로드를 추가했습니다.
• 강제 리플로우 수정: 스크롤 시 레이아웃을 강제로 유발하던 헤더 스크롤 리스너를 IntersectionObserver로 대체했습니다.
• 글꼴 감사: 실제 사용되는 글꼴 가중치를 식별하고 사용하지 않는 글꼴을 제거했습니다.
• 빌드 시 이미지 크기 지정: 빌드 시점에 마크다운 이미지에 width, height 속성을 추가하여 레이아웃 시프트를 없앴습니다.
• 게시물 페이지에서 글꼴 사전 로드 제거: 직관적이지 않지만 효과적이었습니다. 사전 로드된 글꼴은 제한된 모바일 대역폭에서 히어로 이미지와 대역폭을 경쟁했습니다. font-display: swap을 사용하므로 사전 로드를 제거하면 LCP 이미지가 더 빨리 로드됩니다.

효과적인 프롬프트 패턴

개발자는 Claude Code가 구체적인 진단 스레드에서 가장 잘 작동한다는 것을 발견했습니다. 모호한 프롬프트 대신 PSI 결과를 제공하고 가장 안전한 작은 패치를 요청하세요. 예시 패턴: PageSpeed Insights 결과를 입력하고, 관련 컴포넌트를 검사하도록 Claude에게 요청한 후, 광범위한 리팩터링 대신 최소한의 수정을 요청하세요.

여전히 필요한 인간의 판단

일부 최적화는 시각적으로 너무 과격하다고 느껴졌습니다. 작성자는 100점을 유지하면서 로고 품질을 다시 높였습니다. 폴드 아래 이미지와 스타일링 트레이드오프는 인간의 결정이 필요했습니다. Claude Code는 반복 작업을 가속화했지만, 개발자는 여전히 성능, 접근성, 디자인 품질 간의 균형을 맞춰야 했습니다.

전체 글

작성자는 goodrich.digital에서 CWV 변경 사항과 전후 수치를 포함한 더 긴 기술 버전을 게시했습니다.