개발/이미지 최적화 4

[HTTP] 브라우저 이미지 캐시를 공부하다가 알게 된 ETag

이미지 최적화를 공부하다 보면 “브라우저 캐시”라는 개념을 피할 수 없다.이미 한 번 불러온 이미지를 다시 다운로드하지 않고, 브라우저가 저장해두었다가 재사용하는 방식이다.그런데 문득 이런 의문이 들었다.“이미지가 바뀌면, 브라우저는 그걸 어떻게 알아차릴까?”이 궁금증을 따라가다 보니 결국 ETag(Entity Tag) 라는 개념을 만나게 됐다.ETag는 HTTP 응답 헤더 중 하나로, 특정 버전의 리소스를 식별하는 식별자다.서버는 파일의 버전에 따라 고유한 ETag 값을 생성하고, 브라우저는 그 값을 기억해둔다. 이번에는 Etag에 대해서 공부한 내용을 정리해보려고 한다.ETag란?ETag는 서버가 응답을 보낼 때 리소스(이미지, HTML, JS, CSS 등)에 대한 고유한 식별자를 함께 전달하는 방식..

CDN (Content Delivery Network) 이해하기

이전 글에서는 개발자 도구를 통해 웹 브라우저 내부에서 어떤 일이 일어나는지를 살펴봤다.그때 ‘렌더링, 네트워크, 메인 스레드’ 같은 단어들을 보면서결국 사용자에게 콘텐츠가 얼마나 빠르게 도달하느냐가 핵심이라는 생각이 들었다. 이번엔 콘텐츠가 전 세계 사용자에게 어떻게 전달되는지,그리고 이 과정에서 핵심 역할을 하는 CDN(Content Delivery Network) 개념을 정리해보려고 한다. 먼저 CDN 이란 무엇일까?CDN은 Content Delivery Network의 줄임말로 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크이다. 말그대로 콘텐츠를 더 빠르게 전달하기 위한 네트워크 이다.사용자가 웹 사이트를 방문할 때 웹사이트 서버 데이터는 사용자의 ..

크롬 개발자 도구 ( Chrome DevTools ) 알아보기

이미지 최적화를 공부하기로 마음 먹었을 때, 처음에는 막막했다.단순히 이미지의 용량을 줄이거나 포맷을 바꾸는 것 과 같은 테크닉이 먼저 떠올랐지만막상 무엇이 느린지, 어디서 병목이 생기는지를 알아야 개선이 가능하다는 걸 깨달았다.그래서 제일 먼저 이 현상을 관찰할 도구를 찾았다..! 그건 바로 개발자 도구였다.그중에서 Performance 탭을 열면 브라우저가 실제로 어떻게 렌더링하는지, 어떤 리소스가 오래 걸리는지,이미지가 언제 로드되는지를 눈으로 볼 수 있다. 결국 이미지 최적화의 첫 단계는 '이미지를 줄이는 기술' 이 아니라 현재 상태를 정확히 진단하는 능력인것 같다. 우선 개발자 도구란 무엇일까? 크롬 공식 홈페이지에서 서술하고 있는 정의는 다음과 같다.Chrome DevTools는 Chrome ..

대용량 이미지 렌더링 성능 개선 학습 기록 시작

최근 회사에서 새로운 프로젝트 MVP 개발을 진행하고 있다.MVP 개발을 하면서 대용량 & 고화질 이미지들을 많이 다루게 되면서 꽤나 큰 고민거리가 생겼다..바로 렌더링 속도 저하 문제이다. 이미지 한 두장은 괜찮지만, 리스트나 갤러리 형태로 여러 장이 한번에 로드되면 페이지가 버벅이고 사용자 경험이확 떨어졌다. 이걸 MVP라는 명목상 냅두고 가려니.. 너무 신경쓰이고 이걸 해결하는 과정이 나에게큰 도움이 될것 같다는 생각이 들어서 개선 과정을 블로그에 작성해보려고 한다. 회사에서는 프론트엔드만 담당하고 있어 서버에서 주는 이미지들만 렌더링하는 작업을 하고 있지만 추가적으로 전송부터 렌더링까지 전체 파이프라인을 체계적으로 다뤄보고 싶다는 생각이 들었다.(1) 이미지 렌더링 최적화(2) 이미지 전송 최적화..