성능 최적화
더 빠르고 안정적인 사용자 경험
웹 성능 개선, 서버를 키우기 전에 병목 찾기
브라우저, 네트워크, 애플리케이션과 데이터베이스의 대기 시간을 나누어 성능을 개선합니다.
CDN 캐시, 빨라지는 페이지와 저장하면 안 되는 응답
정적 파일, 공개 HTML과 개인별 응답을 나누고 갱신과 무효화까지 설계하는 캐시 가이드입니다.
부하 테스트, 접속자 수보다 시나리오가 중요합니다
현실적인 요청 비율과 중단 기준을 정해 서비스 용량과 병목을 검증합니다.
이미지 많은 홈페이지, 화질과 속도를 함께 지키기
화면 크기에 맞는 이미지, 반응형 제공과 로딩 우선순위를 정해 풍부한 이미지를 빠르게 전달합니다.
Core Web Vitals, 세 지표의 합격선은 숫자로 정해져 있습니다
LCP·INP·CLS의 공식 합격 기준과 75번째 백분위수 측정 방식을 정리합니다.
LCP 개선, 가장 큰 요소를 먼저 특정합니다
LCP 요소를 찾아 발견·로드·렌더 구간으로 나누어 지연을 줄입니다.
INP 개선, 입력이 막히는 지점을 찾습니다
입력 지연·처리 시간·다음 렌더로 나누어 응답성이 나빠지는 구간을 찾습니다.
레이아웃 이동 줄이기, 자리를 미리 잡아 둡니다
이미지·광고·늦게 오는 글꼴이 만드는 이동을 공간 예약으로 막습니다.
캐시 헤더, max-age와 재검증을 나눠 씁니다
신선도 기간과 재검증 방식을 구분해 응답별 캐시 정책을 정합니다.
Cache-Control 지시어, 공개와 비공개 응답의 경계
public·private·no-store의 차이를 로그인 응답 기준으로 구분합니다.
반응형 이미지, srcset과 sizes를 같이 적습니다
화면 폭과 밀도에 맞는 후보를 제시해 과도한 다운로드를 막습니다.
이미지 변환, 원본 하나로 여러 크기를 만들기
요청 시 변환으로 크기·형식을 맞추고 캐시 적중을 유지하는 방법입니다.
압축 설정, 텍스트 응답부터 줄입니다
압축 대상 형식과 협상 헤더를 확인해 전송량을 줄이고 중복 압축을 피합니다.
상태 코드, 성능 문제로 읽는 304와 503
재검증 성공과 과부하 응답을 구분해 성능 문제의 원인을 좁힙니다.
HSTS, 리다이렉트 한 번을 줄이는 설정
HSTS 적용 조건과 되돌리기 어려움을 확인하고 기간을 단계적으로 올립니다.
프리플라이트, 요청이 두 번 가는 이유
사전 요청이 발생하는 조건과 캐시 설정으로 왕복을 줄이는 방법입니다.
캐시 규칙, 경로별로 다르게 적용합니다
경로와 조건으로 규칙을 나누어 정적 자원과 동적 응답을 구분합니다.
캐시 무효화, 전체 퍼지를 피하는 방법
대상 지정 퍼지와 버전 경로를 써서 전체 무효화의 충격을 줄입니다.
엣지와 브라우저 캐시, 두 단계로 나눠 설정합니다
엣지 보관 기간과 브라우저 보관 기간을 분리해 갱신 속도를 조절합니다.
CDN TTL, 원본 헤더와 설정의 우선순위
원본이 보낸 헤더와 배포 설정이 충돌할 때 무엇이 이기는지 정리합니다.
엣지 함수, 원본에 가기 전에 처리하기
엣지에서 처리해도 되는 작업과 원본이 필요한 작업을 나눕니다.
데이터베이스 응답, 느린 질의를 먼저 찾습니다
대기 시간을 질의·연결·자원으로 나누어 느려진 원인을 좁힙니다.
정적 자원 전략, 파일 이름에 버전을 넣습니다
내용 기반 파일명과 긴 캐시 기간을 묶어 갱신과 속도를 함께 얻습니다.
성능 예산, 숫자로 합의하지 않으면 지켜지지 않습니다
지표별 상한을 정하고 초과 시 무엇을 되돌릴지 미리 합의합니다.