전체 글 썸네일형 리스트형 [홈페이지 동영상 최적화, 폰트 최적화] 웹 성능 최적화까지 해보자-12 동영상 최적화 동영상 콘텐츠 분석 이번에는 이미지와 비슷한 동영상을 최적화해보자. Network 패널에서 동영상이 다운로드되는 과정을 살펴보자. 동영상 파일은 이미지처럼 하나의 요청으로 모든 영상을 다운로드하지 않는다. 일단 동영상 콘텐츠 특성상 파일 크기가 크기 때문에 당장 재생이 필요한 앞부분을 먼저 다운로드한 뒤 순차적으로 나머지 내용을 다운로드한다. 그래서 동영상 콘텐츠의 다운로드 요청이 여러 개로 나뉘어 있는 것이다. 하지만 동영상 파일 자체가 크다 보니 재생하기까지 꽤 오래 걸린다. Performance 패널을 통해 확인해보면 일정 시간 동안 동영상 콘텐츠가 다운로드되고 그 이후에야 재생이 되는 것을 볼 수 있다. 또한, assets 폴더에 있는 동영상 파일을 확인해보면 파일 크기가 51.9M.. 더보기 [홈페이지 이미지 사이즈 최적화] 웹 성능 최적화까지 해보자-11 이미지 사이즈 최적화 느린 이미지 로딩 분석 이전에 이미지 지연 로딩을 통해 배너의 동영상 콘텐츠를 먼저 다운로드할 수 있도록 했다. 그래서 지연 로딩이 적용된 이미지는 스크롤이 이미지 위치에 도달했을 때 로드되는 것을 확인할 수 있었다. 하지만 이미지 위치에 도달하면 로드되는 속도는 상당히 느리다. Network 패널을 통해 이미지들을 살펴보면 파일 크기가 매우 큰 것을 볼 수 있다. 이렇게 이미지 사이즈가 크면 다운로드에 많은 시간이 걸리기 때문에 이미지 사이즈 최적화를 해볼 것이다. 이미지 포맷 종류 이미지 사이즈 최적화는 이미지의 가로, 세로 사이즈를 줄여서 이미지 용량을 줄이고 그만큼 더 빠르게 다운로드하는 기법이다. 이미지 사이즈를 줄이기 전에 이미지 포맷을 알아야 한다. SVG와 같은 벡터 .. 더보기 [홈페이지 이미지 지연 로딩] 웹 성능 최적화까지 해보자-10 이미지 지연 로딩 최적화에 앞서 네트워크 분석부터 해보자. 처음에는 당장 중요한 리소스인 bundle 파일이 다운로드되고, 그 다음으로 main1, 2, 3 이미지와 폰트가 다운로드되는 것을 확인할 수 있다. 그 이후 한동안 banner-video 파일이 다운로드되는 것을 찾아볼 수 있다. 그런데, banner-video는 페이지에서 가장 처음으로 사용자에게 보이는 콘텐츠인데 가장 나중에 로드되면 사용자가 첫 화면에서 아무것도 보지 못한 채로 오랫동안 머물게 되기 때문에 사용자 경험에 좋지 않을 것이다. 그래서, 동영상의 다운로드를 방해하는, 당장 사용되지 않는 이미지를 나중에 다운로드되도록 해서 동영상이 먼저 다운로드되게 하면 된다. 여기서 지연 로드할 이미지는 배너 아래에 있는 총 6개의 이미지이다... 더보기 [홈페이지] 웹 성능 최적화까지 해보자-9 이번에는 롱보드를 소개하는 사이트인데, 흔히 볼 수 있는 홈페이지 구조를 가지고 있는 페이지를 최적화해볼 것이다. 총 4개의 페이지로 구성되어 있고, 각 페이지에서 롱보드를 소개한다. 메인 페이지를 중심으로 최적화를 진행해보자. 이 장에서 학습할 최적화 기법은 다음과 같다. 이미지 지연 로딩 이미지 사이즈 최적화 폰트 최적화 캐시 최적화 불필요한 CSS 제거 이미지 지연 로딩 저번에는 당장 사용하지 않는 컴포넌트 코드를 분할해서 초기 로드 속도를 높이는 컴포넌트 지연 로딩 기법을 적용해봤다. 이번에는 당장 필요하지 않은 이미지가 먼저 로드되지 않도록 지연시키는 이미지 지연 로딩 기법을 적용해볼 것이다. 이렇게 하면 사용자에게 가장 먼저 보이는 콘텐츠를 더 빠르게 로드할 수 있다. 이미지 사이즈 최적화 이.. 더보기 [올림픽 통계 서비스 컴포넌트 지연 로딩, 컴포넌트 사전 로딩, 이미지 사전 로딩] 웹 성능 최적화까지 해보자-8 컴포넌트 지연 로딩 블로그 서비스에서는 페이지를 기준으로 코드를 분할하고 분할된 코드를 필요한 시점, 즉 페이지가 변경되는 시점에 로드하도록 했다. 이번에도 비슷하게 해보자. 번들 파일 분석 컴포넌트 지연 로딩 기법을 적용하기 전에 번들 파일을 분석해서 서비스에 어떤 문제가 있는지 파악해보자. cra-bundle-analyzer를 실행해보자. 아래 사진은 올림픽 통계 서비스의 번들 분석 결과이다. 하나씩 살펴보면 왼쪽의 static/js/2.chunk.js 블록은 node_modules에 있는 라이브러리 코드를 담고 있는 청크이고, 오른쪽 파란색 블록은 올림픽 통계 서비스의 코드임을 알 수 있다. 그 중 2.chunk.js의 내용을 보면 react-dom, styled-components뿐만 아니라 re.. 더보기 [올림픽 통계 서비스 애니메이션 최적화] 웹 성능 최적화까지 해보자-7 애니메이션 최적화 이 서비스에서 애니메이션이 들어간 곳이 한 군데 있었는데, 설문 결과 영역이다. 설문 항목을 클릭하면 해당 응답에 대해 필터링되고 막대 그래프의 배경 색과 막대의 가로 길이가 변한다. 그런데, 이전에도 언급했다시피 뚝뚝 끊기는 듯하게 애니메이션이 동작하는 문제가 있었다. 이런 끊김 현상을 쟁크(jank)라고 한다. 이 현상이 왜 일어나는지 알기 위해서는 브라우저에서 애니메이션이 어떻게 동작하는지, 그리고 브라우저는 어떤 과정을 거쳐 화면을 그리는지 이해해야 한다. 애니메이션의 원리 애니메이션의 원리는 여러 장의 이미지를 빠르게 전환해서 우리 눈에 잔상을 남기고, 그로 인해 연속된 이미지가 움직이는 것처럼 느껴지게 하는 것이다. 하지만, 애니메이션의 구성 요소인 이미지들 중 한 장의 이미.. 더보기 [올림픽 통계 서비스] 웹 성능 최적화까지 해보자-6 이번에는 올림픽 통계 서비스를 최적화해 볼 것이다. 해당 서비스는 리우 올림픽과 런던 올림픽 정보와 사진을 비교해서 보여 주고, 하단에는 그에 대한 설문조사 결과를 보여준다. 설문조사 결과는 막대 그래프로 나타내는데, 항목을 클릭하면 해당 항목에 대해 필터링돼서 그래프가 애니메이션과 함께 변한다. 이 장에서 학습할 최적화 기법은 다음과 같다. CSS 애니메이션 최적화 컴포넌트 지연 로딩 컴포넌트 사전 로딩 이미지 사전 로딩 컴포넌트 지연 로딩 이 서비스에서는 페이지 코드 자체를 분할하는 대신 단일 컴포넌트를 분할해서 컴포넌트가 쓰이는 순간에 불러오도록 만들 것이다. 컴포넌트 사전 로딩 컴포넌트 코드를 분할해서 지연 로딩을 적용하면 첫 화면 진입 시 분할된 코드 중 당장 필요한 코드만 다운로드하기 때문에 .. 더보기 [블로그 텍스트 압축] 웹 성능 최적화까지 해보자-5 텍스트 압축 production 환경과 development 환경 지금까지 이미지 사이즈 최적화, 병목 코드 최적화, 코드 분할 기법을 사용해서 서비스 성능을 향상해 보았다. 하지만, 지금 블로그 서비스가 실행되고 있는 환경은 production 환경이 아니라 development 환경이라는 점을 간과하면 안 된다. cra의 경우 production 환경과 development 환경에 차이가 있다. production 환경일 때는 webpack에서 경량화라든지 난독화 같은 추가적인 최적화 작업을 한다. 하지만 development에서는 이런 최적화 작업이 없이 서비스를 실행한다. 그래서 최종 서비스의 성능을 측정할 때는 실제 사용자에게 제공되는 production 환경으로 빌드된 서비스의 성능을 측정해야.. 더보기 이전 1 ··· 7 8 9 10 11 12 13 다음
