Question 1

페이지 속도는 왜 중요한가요?

Accepted Answer

페이지 속도는 사용자 경험, SEO 순위, 전환율에 직접적인 영향을 미칩니다. Google은 Core Web Vitals를 검색 순위 신호로 사용하며, 1초 지연 시 전환율이 최대 20% 감소할 수 있습니다.

Question 2

Core Web Vitals란 무엇인가요?

Accepted Answer

Core Web Vitals는 Google이 정의한 웹 성능 지표로 LCP(최대 콘텐츠 렌더), FID(첫 입력 지연), CLS(누적 레이아웃 이동) 세 가지로 구성됩니다.

Question 3

LCP를 어떻게 최적화하나요?

Accepted Answer

LCP(Largest Contentful Paint)를 개선하려면 히어로 이미지를 최적화하고, 중요 리소스를 preload하며, 서버 응답 시간을 줄이고, 렌더 차단 리소스를 제거해야 합니다.

Question 4

렌더 차단 리소스란?

Accepted Answer

렌더 차단 리소스는 브라우저가 페이지를 렌더링하기 전에 먼저 로드해야 하는 CSS나 JS 파일입니다. defer나 async 속성을 사용하거나 CSS를 인라인으로 처리해 렌더링을 차단하지 않도록 합니다.

Question 5

이미지 lazy load는 어떻게 구현하나요?

Accepted Answer

<img> 태그에 loading="lazy" 속성을 추가하면 브라우저가 화면 밖 이미지의 로딩을 지연시킵니다. 모든 현대 브라우저에서 지원합니다.

Question 6

font-display:swap은 무엇인가요?

Accepted Answer

웹 폰트가 로드될 때까지 시스템 폰트를 표시하는 CSS 속성입니다. 폰트가 로드되면 교체되며, CLS에 영향을 미칠 수 있으므로 size-adjust와 함께 사용하면 좋습니다.

Question 7

defer와 async의 차이는?

Accepted Answer

async는 HTML 파싱과 병렬로 스크립트를 다운로드하고 다운로드 완료 시 즉시 실행합니다. defer는 HTML 파싱이 완료된 후 DOMContentLoaded 전에 순서대로 실행됩니다.

Question 8

PageSpeed Insights를 어떻게 사용하나요?

Accepted Answer

https://pagespeed.web.dev에 URL을 입력하면 실제 사용자 데이터와 Lab 데이터를 기반으로 Core Web Vitals 점수와 구체적인 개선 방안을 제공합니다.

웹사이트 속도 추정기