[인프런] 실전 웹 성능 최적화 (Lighthouse, 이미지 사이즈 최적화)

구글 크롬 개발자도구에 있는 Lighthouse 패널에서 성능 분석을 해보고, 이미지 사이즈를 최적화 해보자.

Lighthouse 패널을 이용해 사이트를 분석해보자.

강의에서는 Audits 툴이라고 나오는데 Lighthouse로 이름이 바뀐 것 같다.

무엇을 위해 검사할 것인지에 대한 선택을 해야한다. 우리는 desktop 환경이고 performance에 대해 분석하고자, 위와 같이 세팅했다. 이제 Generate report 버튼을 눌러 분석을 시작하자.

 

 

 

Ligthhouse 패널을 이용한 사이트 분석 결과

• 숫자
  • 페이지 성능을 나타내는 점수이다. (Metrics라는 검사 지표에 의한)
• 스크린샷
  • 페이지가 로드되는 흐름을 스크린샷으로 보여주고 있다.

 

Ligthhouse 패널을 이용한 사이트 분석 결과

 

위의 항목들은 해당 사이트의 문제점과 문제점을 해결할 수 있는 가이드를 제공한다.

• Opportunities
  • 리소스의 관점에서 문제가 되는 것을 알려줌
  • 로딩 성능 최적화와 관련
• Diagnostics
  • 페이지의 실행 관점에서 문제가 되는 것을 알려줌
  • 렌더링 성능 최적화와 관련
• Passed audits
  • 우리가 이미 잘 적용하고 있는 항목들

Ligthhouse 패널을 이용한 사이트 분석 결과

• Runtime Settings
  • 우리가 검사할 때 사용된 환경을 요약해서 보여줌

 

 

이미지 사이즈 최적화 - 로딩 성능 최적화

웹 서비스에서 다양한 이미지를 사용한다. 이미지 사이즈가 너무 크면 로딩 시간이 오래 걸려 무거운 서비스가 될 것이고, 너무 작으면 저화질의 문제가 생긴다. 그렇다면 어떤 이미지 사이즈가 적절한 사이즈인지 알아보고 실습해보자.

 

Properly size images (이미지를 적절한 사이즈로 압축해서 너의 셀룰러 데이터와 로드 타임을 최적화해라)

블로그 썸네일 이미지를 클릭하여 정보를 살펴보자.

 

현재 이미지는 120 * 120px로 렌더링되고 있다. 그런데 실제 이미지 사이즈가 무려 1200 * 1200px 이기 때문에 낭비이다. 따라서 이미지 사이즈를 줄여주면 되는데 일반적으로 렌더링 되는 사이즈로 줄여주면 된다고 생각할 것이다. 틀린 것은 아니지만 요즘 많이 사용하는 Retina 디스플레이는 같은 공간에 더 많은 픽셀을 그릴 수 있기 때문에 너비 기준으로 2배 정도 큰 이미지를 사용하는 것이 적절하다. 따라서 여기서는 240 * 240px로 줄여주면 된다.

 

그렇다면 이 이미지를 어떻게 줄일 수 있을까? 여기서는 이미지가 자체 서버에 저장되어 있는 static 리소스가 아닌 API를 통해 전달되는 리소스인데말이다. 직접 이미지를 자를 수 없으니 클라우드 날?이나 이미직스 같은 이미지 CDN을 사용하는 방법이 있다.

여기서 CDN의 개념을 잠깐 짚고 가자.

Contents Delivery Network의 약자로, 물리적 거리의 한계를 극복하기 위해 사용자와 가까운 곳에 컨텐츠 서버를 두는 기술이다. 예를 들어 한국에 있는 사용자가 미국에 있는 서버에서 이미지를 다운받을 때, 아무리 인터넷이 빠르다 해도 물리적인 거리가 있어 시간이 걸릴 것이다. 그래서 미국에 있는 서버를 미리 한국에 복사해두고 사용자가 이미지를 다운로드하려고 할 때 한국 서버에서 다운받으면 된다. 이런 기술을 CDN이라고 한다.

 

방금 말한 CDN과 이미지 CDN(정확히는 image processing CDN)은 약간의 차이가 있다. 이미지를 사용자에게 보내기전에 특정 형태로 가공(사이즈를 줄이거나 확장자를 변환하거나)해서 사용자에게 이미지를 전해준다.

 

사용 예시

http://cdn.image.com?src=[img src]&width=200&height=100

<사용할 이미지 CDN 주소><원본 이미지주소><가로길이><세로길이>

 

실제 사용되고 있는 모습을 살펴보자. 브런치라는 서비스에 있는 이미지 하나를 열어보았다.

URL 주소를 보면 앞쪽에 daumcdn이라는 CDN을 사용하고 있고, 최적화를 위한 이미지 사이즈로 설정되어 있으며, 원본 이미지 주소가 들어가 있다. 원본 주소로 들어가보자.

 

 

 

 

다음과 같이 원본 이미지가 기존 사이즈로 보여진다. 이렇게 imgix와 같은 CDN을 사용할 수도 있지만, 우리는 코드에서 수정해보도록 하자.

 

<div className={'Article__thumbnail'}>
  <img src={props.image + getParametersForUnsplash({width: 240, height: 240, quality: 80, format: 'jpg'})} alt="thumbnail" />
</div>

이미지를 보여주는 코드를 보니 getParametersForUnsplash 함수 파라미터로 가로 세로 길이를 넘겨주고 있었다. 우리가 앞서 정한 최적화 이미지 사이즈 240으로 수정해주었다.

 

다시 이미지 사이지를 확인해보니 위와 같이 바뀌어 나타났다. Lighthouse로 다시 검사해보았더니 점수가 크게 변동이 있진 않았지만 이제 이미지 사이즈에 대한 문제는 사라진 것을 볼 수 있었다. 그런데 방금 한 일은 숫자만 바꾼 것이기 때문에 작동한 함수인 getParametersForUnsplash를 살펴보았다.

 

/* 파라미터 참고: https://unsplash.com/documentation#supported-parameters */
function getParametersForUnsplash({width, height, quality, format}) {
  return `?w=${width}&h=${height}&q=${quality}&fm=${format}&fit=crop`
}

문자열을 리턴하고 있는데 이것은 unsplash에서 제공하는 이미지를 프로세싱할 수 있는 파라미터들이다. unsplash가 이미지 CDN의 역할을 한다. 위에서 사용한 것보다 더 많은 파라미터들이 존재하는데 이는 해당 사이트에서 확인하면 된다.

 

 

 

---

출처: [인프런] 프론트엔드 개발자를 위한, 실전 웹 성능 최적화 PART 1