Frontend/성능 최적화 썸네일형 리스트형 [이미지 갤러리 병목 코드 최적화] 웹 성능 최적화까지 해보자-17 병목 코드 최적화 이미지 모달 분석 병목 코드를 찾기 위해서 Performance 패널을 이용해보자. 서비스 이용 과정에서 느리거나 문제가 있다고 판단되는 부분을 찾아서 검사해볼 것이다. 이미지 갤러리 서비스에서는 페이지가 최초로 로드될 때, 카테고리를 변경했을 때, 그리고 이미지 모달을 띄웠을 때로 크게 3가지를 알아보면 된다. 이미지를 클릭해서 이미지 모달을 띄웠을 때는 이미지도 늦게 뜨고 배경 색도 늦게 변하는 것을 볼 수 있다. 모달이 뜨는 과정에서 메인 스레드의 작업을 확인하려면, 화면이 완전히 로드된 상태로 Performance 패널의 기록 버튼을 클릭하면 된다. 그리고 이미지를 클릭해서 모달을 띄운 뒤 기록 버튼을 다시 누르면 기록이 종료된다. 페이지에서 이미지 클릭을 하면 이미지 모달이 뜬.. 더보기 [이미지 갤러리 리덕스 렌더링 최적화] 웹 성능 최적화까지 해보자-16 리덕스 렌더링 최적화 리액트의 렌더링 리액트는 렌더링 사이클을 갖는다. 서비스의 상태가 변경되면 화면에 반영하기 위해서 리렌더링 과정을 거친다. 그래서 렌더링이 오래 걸리는 코드가 있거나 렌더링하지 않아도 되는 컴포넌트에서 불필요하게 리렌더링이 발생하면 메인 스레드의 리소스를 차지해서 서비스 성능에 영향을 준다. 이번에 React Developer Tools를 사용해서 이미지 갤러리 서비스는 어떤 상황에서 리렌더링이 발생하는지, 또한 불필요한 렌더링은 없는지 분석해보자. 리렌더링 시 테두리가 나타날 수 있게 Highlight updates when components render 옵션을 클릭해서 어떤 컴포넌트가 어느 시점에 리렌더링되는지 알아보자. 확인해보면, 이미지를 클릭해서 이미지 모달을 띄울 때 모.. 더보기 [이미지 갤러리 레이아웃 이동 피하기, 이미지 지연 로딩] 웹 성능 최적화까지 해보자-15 레이아웃 이동 피하기 레이아웃 이동이란? 레이아웃 이동이란 화면상의 요소 변화로 레이아웃이 갑자기 밀리는 현상을 말한다. 이미지 갤러리 서비스를 새로고침해보면 레이아웃 이동 현상을 볼 수 있다. 이미지가 로드될 때 아래 이미지보다 늦게 로드되는 경우, 뒤늦게 아래 이미지를 밀어내면서 화면에 그려진다. Lighthouse에서는 웹 페이지에서 레이아웃 이동이 얼마나 발생하는지를 나타내는 지표로 CLS(Cumulative Layout Shift)라는 항목을 두고 성능 점수에 포함했다. CLS는 0부터 1까지의 값을 가지고, 레이아웃 이동이 전혀 발생하지 않은 상태를 0, 그 반대를 1로 계산한다. 또한 권장하는 점수는 0.1 이하이다. Performance 패널을 좀 더 살펴보면 Layout Shift라는 막.. 더보기 [이미지 갤러리] 웹 성능 최적화까지 해보자-14 이번에는 이미지 갤러리 서비스를 최적화해볼 것이다. 초기 페이지에서는 여러 이미지들을 그리드 형태로 보여준다. 이미지 위 필터링 버튼도 있고, 특정 이미지 클릭 시 클릭한 이미지가 모달 창으로 나타난다. 모달의 배경 색 또한 이미지 색상과 비슷한 색으로 맞춰지도록 했다. 이번에는 다음과 같은 기법을 학습할 것이다. 이미지 지연 로딩 레이아웃 이동 피하기 리덕스 렌더링 최적화 병목 코드 최적화 이미지 지연 로딩 이전에는 Intersection Observer API를 이용했는데 이번에는 npm에 등록되어 있는 이미지 지연 로딩 라이브러리를 이용해서 적용해볼 것이다. 레이아웃 이동 피하기 레이아웃 이동이란 화면상의 요소 변화로 레이아웃이 갑자기 떨리는 현상을 말한다. 특히 이미지 로딩 과정에서 레이아웃 이동.. 더보기 [홈페이지 캐시 최적화, 불필요한 CSS 제거] 웹 성능 최적화까지 해보자-13 캐시 최적화 이때까지 최적화한 서비스를 Lighthouse를 통해 검사해보자. Diagnostics 섹션의 Serve static assets with an efficient cache policy라는 항목이 있다. 이 항목은 네트워크를 통해 다운로드하는 리소스에 캐시를 적용하라는 의미이다. Network 패널에서 위 리소스 중 하나를 확인해보면 응답 헤더에 캐시에 대한 설정인 Cache-Control이라는 헤더가 없는 것을 알 수 있다. npm run start로 실행한 서버에는 캐시 설정이 제대로 되어 있지 않은 것이다. 캐시의 종류 웹에서 사용하는 캐시는 크게 두 가지로 구분할 수 있다. 메모리 캐시와 디스크 캐시이다. 메모리 캐시: 메모리에 저장하는 방식이다. 여기서 메모리는 RAM을 의미한다. .. 더보기 [홈페이지 동영상 최적화, 폰트 최적화] 웹 성능 최적화까지 해보자-12 동영상 최적화 동영상 콘텐츠 분석 이번에는 이미지와 비슷한 동영상을 최적화해보자. Network 패널에서 동영상이 다운로드되는 과정을 살펴보자. 동영상 파일은 이미지처럼 하나의 요청으로 모든 영상을 다운로드하지 않는다. 일단 동영상 콘텐츠 특성상 파일 크기가 크기 때문에 당장 재생이 필요한 앞부분을 먼저 다운로드한 뒤 순차적으로 나머지 내용을 다운로드한다. 그래서 동영상 콘텐츠의 다운로드 요청이 여러 개로 나뉘어 있는 것이다. 하지만 동영상 파일 자체가 크다 보니 재생하기까지 꽤 오래 걸린다. Performance 패널을 통해 확인해보면 일정 시간 동안 동영상 콘텐츠가 다운로드되고 그 이후에야 재생이 되는 것을 볼 수 있다. 또한, assets 폴더에 있는 동영상 파일을 확인해보면 파일 크기가 51.9M.. 더보기 [홈페이지 이미지 사이즈 최적화] 웹 성능 최적화까지 해보자-11 이미지 사이즈 최적화 느린 이미지 로딩 분석 이전에 이미지 지연 로딩을 통해 배너의 동영상 콘텐츠를 먼저 다운로드할 수 있도록 했다. 그래서 지연 로딩이 적용된 이미지는 스크롤이 이미지 위치에 도달했을 때 로드되는 것을 확인할 수 있었다. 하지만 이미지 위치에 도달하면 로드되는 속도는 상당히 느리다. Network 패널을 통해 이미지들을 살펴보면 파일 크기가 매우 큰 것을 볼 수 있다. 이렇게 이미지 사이즈가 크면 다운로드에 많은 시간이 걸리기 때문에 이미지 사이즈 최적화를 해볼 것이다. 이미지 포맷 종류 이미지 사이즈 최적화는 이미지의 가로, 세로 사이즈를 줄여서 이미지 용량을 줄이고 그만큼 더 빠르게 다운로드하는 기법이다. 이미지 사이즈를 줄이기 전에 이미지 포맷을 알아야 한다. SVG와 같은 벡터 .. 더보기 [홈페이지 이미지 지연 로딩] 웹 성능 최적화까지 해보자-10 이미지 지연 로딩 최적화에 앞서 네트워크 분석부터 해보자. 처음에는 당장 중요한 리소스인 bundle 파일이 다운로드되고, 그 다음으로 main1, 2, 3 이미지와 폰트가 다운로드되는 것을 확인할 수 있다. 그 이후 한동안 banner-video 파일이 다운로드되는 것을 찾아볼 수 있다. 그런데, banner-video는 페이지에서 가장 처음으로 사용자에게 보이는 콘텐츠인데 가장 나중에 로드되면 사용자가 첫 화면에서 아무것도 보지 못한 채로 오랫동안 머물게 되기 때문에 사용자 경험에 좋지 않을 것이다. 그래서, 동영상의 다운로드를 방해하는, 당장 사용되지 않는 이미지를 나중에 다운로드되도록 해서 동영상이 먼저 다운로드되게 하면 된다. 여기서 지연 로드할 이미지는 배너 아래에 있는 총 6개의 이미지이다... 더보기 이전 1 2 3 다음
