이미지 사이즈 최적화
LightHouse의 분석결과 Properly size images 항목이 있다면
이미지의 적절한 사이즈 사용을 통해 최적화를 시도할 수 있어요.
최적화를 통해 Properly size images 우측에 표시된 1.52s만큼 로딩을 단축할 수 있다는 의미에요.
자 그럼 개발자도구 > Elements에서 img 태그의 src 부분에 커서를 올리시면 조그만 창이 보이는데요.
아래 이미지는 방금 얘기한 조그만 창의 일부에요.
Intrinsic size: 1200 x 1200px (이미지 사이즈)
Rendered size: 120 x 120px (렌더링 되는 사이즈)
위 정보를 통해 이미지 사이즈가 필요 이상으로 크다는 것을 알 수 있어요.
이미지를 120 x 120px로 줄여도 되지만 요즘 디스플레이는 발전하여
2배 정도 큰 이미지도 작은 픽셀로 그려낼 수 있기에
240 x 240px로 그려도 무방합니다.
이미지를 직접 자산으로 가지고 있다면 편집툴을 이용해서 사이즈 조정을 해도 되지만
API에서 받아오거나 하는 경우에는 원본의 이미지 조정이 어렵기 떄문에
Cloudinary, Imagix같은 이미지CDN을 사용해 볼 수 있어요.
이미지 최적화 후에 LightHouse를 이용해 다시 분석하시면
기존보다 점수가 상승하고 Properly size images가 제거되었는지 확인할 수 있어요.
병목 코드 최적화
Diagnostics의 Reduce JavaScript execution time (자바스크립트 실행시간 단축)을 개선해 보도록 할게요.
Reduce JavaScript execution time을 클릭하면 탭이 열리면서 아래 이미지 처럼 Total CPU time을 확인해보면
...js/1.chunk.js에서 1초이상 JS가 실행됬음을 확인할 수 있어요.
어떤 작업이 느린지 확인하기 위해 개발자도구 > Performance탭을 활용해야 하는데요.
아래 이미지에서 보이는 View Original Trace를 누르면 분석내용을 Performance 패널로 이동해 보여줍니다.
먼저 복잡한 Performance탭의 여러 섹션이 나타내는 의미를 파악해 볼게요.
이동했다면 복잡한 창이 보이실 텐데요. 아래이미지는 가장 위에보이는 CPU, Network 차트에요.
이 차트는 CPU가 작업별로 리소스를 얼마나 사용햇는지 보여줘요.
자바스크립트 실행: Yellow
렌더링, 레이아웃: Purple
페인팅: Green
기타(시스템): Gray윗 부분에 빨간색 선이 조금씩 보이실텐데 이 부분은 병목이 발생하는 지점이에요.
Network차트는 이미지의 아랫 부분에 파란 막대그래프 형태로 표현되는데요.
대략적인 네트워크 상태를 볼 수 있어요.
진한 막대: 우선순위 높은 네트워크 리소스
옅은 막대: 우선순위 낮은 네트워크 리소스Network차트 아래 스크린샷들을 볼 수 있는데요.
웹 서비스의 로드과정을 볼 수 있어요.
<2편>은 여기에서 마무리 하도록 하겠습니다.
<3편>에서는 Performance의 CPU, Network차트 아래 있는 Network타임라인을 시작으로 작성하도록 할게요.
감사합니다 :)
잡지식
KiB(키비바이트 Kilo binary byte): 흔히 KB(킬로바이트)와 구분없이 사용해요.
KiB = 2의 10승 (1024) , KB = 10의 3승 (1000)으로 차이가 있어요.
정확한 표현을 위해 KiB단위가 생겼고 보통 KB를 사용하는 것은 실제 KiB인 것이 많아요.
