React 성능 최적화 (1일차)

프론트엔드 성능 최적화에 대해서 알아보자!

• 기술 면접 질문들을 공부하면서 성능 최적화에 대한 질문도 많이 접하게 되었는데 내가 그 중에서 직접 해본 기술은 Lazy-Loading 기법 밖에 없었기에 다른 여러가지 기법에 대해서도 직접 적용해보고, 공부해보고 싶다는 생각이 들었다.
• 구글의 주장에 따르면 '성능이 저하되면 사용자가 떠나고 매출이 감소한다.'라고 한다. 그만큼 성능 최적화는 프론트엔드에서 중요한 기술 중에 하나라고 판단되었다.
• 실습은 프론트엔드 성능 최적화 가이드 책에 나온 절차에 따라서 진행하려 한다.

최적화를 위한 시작

아래와 같은 블로그 서비스를 만들었을 때 최적화를 시작하려면 어떤 것부터 진행해야 할까??

• 먼저, 이 사이트가 성능 최적화가 필요한지부터 분석해야 한다.
• 모든 성능 최적화 포인트를 외우고 확인하면 제일 좋겠지만, 현실적으로 불가능하므로 여기서는 Lighthouse라는 툴의 도움을 받아서 분석할 것이다.

Lighthouse란?
구글에서 만든 툴로, 웹사이트의 성능을 측정하고 개선 방향을 제시해 주는 자동화 툴입니다. Lighthouse를 이용하여 웹사이트의 성능 점수를 측정하고 개선 가이드를 확인함을써 어떤 부분을 중점적으로 분석화고 최적화해야 하는지 알 수 있습니다. Lighthouse에는 FCP, SI, LCP, TTI, TBT, CLS의 6가지 지표가 존재하며 이러한 지표를 웹 바이탈(Web Vital)이라고 부릅니다.

이미지 최적화

• Lighthouse의 검사 결과에서 여러가지 제안하는 내용이 있지만 그 중에서 'Properly size images'를 진행해보자
• Lighthouse에 따르면 이미지를 적절한 사이즈로 변경하는 것만으로 용량을 이미지당 200KiB 정도 줄일 수 있고, 이미지 로드에 소용되는 시간을 대략 1.65초 단축할 수 있다고 한다.

• Element 패널에서 img를 확인해 보면 실제 이미지 사이즈는 1200 * 1200px인데, 화면에 그려지는 이미지의 사이즈는 120 * 120px 이다.
• 어차피 큰 사이즈의 이미지를 사용해도 1200 * 1200px로 표시하지 못하니, 처음부터 120 * 120px에 맞는 이미지를 사용하는 것이다.

그렇다면 어느 정도의 사이즈로 만들어서 사용해야 적절할까??

• 120 * 120px이라고 생각할 수 있으나 요즘 사용되는 레티나 디스플레이는 같은 공간(픽셀)에서 더 많은 픽셀을 그릴 수 있기 때문에, 너비 기준으로 두 배 정도 큰 이미지를 사용하는 것이 적절하다고 한다.
• 따라서 여기서는 2배인 240 * 240px 정도가 적절하다.

사이즈는 어떻게 수정하는데??

• 이제 어느 정도의 사이즈로 수정해야 하는지는 알았다. 그런데 이미지 사이즈 수정은 어떻게 하는 것일까?
• 위의 이미지를 통해서 블로그에 사용하는 이미지 파일은 정적 이미지가 아닌 API를 통해 받아오는 데이터임을 알 수 있다.
• 이 때 생각해 볼 수 있는 방법은 이미지 CDN을 사용하는 방법이 있다.

CDN이란?

CDN이란 물리적 거리의 한계를 극복하기 위해 소비자와 가까운 곳에 콘텐츠 서버를 두는 기술을 의미한다.

• 위의 예시에서 한국에서 사용자가 미국에 있는 서버에서 이미지를 다운로드 하는 경우 인터넷이 아무리 빨라졌다고 해도 서버와 사용자 사이에는 굉장히 큰 물맂거 거리가 있어 다운로드에 시간이 오래 걸릴 것이다.
• 따라서 이를 해결하기 위해 미국에 있는 서버를 한국으로 복사해 두고, 사용자가 이미지를 다운로드 하려고 할 때 미국 서버가 아닌 한국 서버에서 다운로드하도록 하는 것이다. 그러면 물리적거리가 어느 정도 해소가 되므로 다운로드에 걸리는 시간도 단축된다.

이미지 CDN

• 이미지 CDN은 이미지에 특화된 CDN이다.
• 기본적인 CDN 기능과 더물어 이미지를 사용자에게 보내기 전에 특정 형태로 가공하여 전해 주는 기능까지 가지고 있다.

이미지 CDN 사용법

1. 일반적인 이미지 CDN의 이미지 주소의 쿼리스트링을 사용하여 이미지 크기를 조절할 수 있다.
   • 예시: https://images.upsplash.com/photo-1542435503-956c4699476f6?w=1200&h=1200&q-80&fm=jpg&fit=crop
2. 사용하는 API에서 이런 기능을 제공하고 있지 않다면 Cloudinary 같은 이미지 CDN을 사용해보자
   • Cloudinary 사용법

이미지 최적화 결과

• 종합 성능 점수가 66점 -> 70점으로 증가하였다.
• 더 이상 개선 사항 항목에 'Properly size image'가 보이지 않는다!