webperformance3 [Performance] 이미지 최적화 전략: WebP, Lazy Loading, 그리고 가변 이미지 현대 웹 애플리케이션의 평균 페이지 용량 중 절반 이상은 이미지가 차지합니다. 특히 이커머스나 포트폴리오 사이트처럼 이미지가 핵심인 서비스에서 이미지 최적화는 '선택'이 아닌 '필수'입니다. 1MB짜리 이미지 하나를 100KB로 줄이는 것만으로도 수천 줄의 자바스크립트 코드를 최적화하는 것보다 훨씬 큰 성능 개선 효과를 볼 수 있습니다.오늘은 브라우저가 이미지를 처리하는 방식을 이해하고, 최신 포맷과 브라우저 기능을 활용해 웹사이트를 가볍게 만드는 3대 전략을 알아보겠습니다.1. 차세대 포맷 도입: WebP와 AVIF우리가 흔히 쓰는 JPEG와 PNG는 수십 년 된 포맷입니다. 이제는 더 적은 용량으로 더 높은 화질을 제공하는 차세대 포맷으로 갈아탈 때입니다.1.1 WebP: 구글이 만든 만능 포맷Web.. 2026. 5. 4. [Web] 브라우저 렌더링 원리: Critical Rendering Path 최적화 전략 웹사이트의 성능은 단순히 '데이터가 얼마나 빨리 도착하는가'에 달려 있지 않습니다. 더 중요한 것은 '도착한 데이터를 얼마나 빨리 화면에 그려내는가'입니다. 브라우저가 HTML, CSS, JavaScript를 받아서 화면에 픽셀로 변환하는 일련의 과정을 중요 렌더링 경로(Critical Rendering Path, CRP)라고 부릅니다. 이 경로를 단축하는 것이 곧 성능 최적화의 정석입니다.1. 렌더링의 5단계 공정 (CRP)브라우저는 화면을 그리기 위해 크게 5가지 단계를 거칩니다.1.1 DOM 트리 구축 (Parsing)브라우저가 HTML 문서를 읽어 내려가며 태그들을 트리 구조의 노드들로 변환합니다. 이것이 우리가 잘 아는 DOM(Document Object Model)입니다.1.2 CSSOM 트리.. 2026. 4. 30. [Web] 웹 폰트로 인한 레이아웃 시프트(CLS) 해결하기: font-display와 가상 폰트 웹사이트에 접속했을 때, 처음에는 기본 폰트로 텍스트가 보이다가 갑자기 예쁜 웹 폰트로 바뀌면서 줄 바꿈이 변하거나 문단이 아래로 툭 떨어지는 현상을 겪어보신 적이 있나요?사용자를 당황하게 만드는 이 현상을 FOUT(Flash of Unstyled Text)라고 하며, 이는 구글의 핵심 성능 지표 중 하나인 CLS(Cumulative Layout Shift) 점수를 크게 갉아먹는 주범입니다. 오늘은 웹 폰트 로딩 최적화를 통해 시각적 안정성을 확보하는 실무 전략을 깊이 있게 알아보겠습니다.1. CLS의 적, 웹 폰트 로딩의 이해웹 폰트는 용량이 크기 때문에 브라우저가 HTML과 CSS를 파싱하는 속도보다 늦게 다운로드되는 경우가 많습니다. 이때 브라우저는 두 가지 방식 중 하나를 선택합니다.FOIT (F.. 2026. 4. 27. 이전 1 다음