이미지 사이즈 최적화
웹 개발에는 많은 이미지들이 사용되는데, 사이즈가 너무 크면 느려지고 너무 작으면 화질이 저하되는 문제가 있다.
어떤 이미지 사이즈가 적절할까?
F12의 Lighthouse 탭을 이용하여, Opportunities 섹션 중 Properly Size Images 를 클릭해서 확인하면, 적절한 사이즈를 사용하도록 제안한다.
그리고 실제 해당 이미지를 사용하는 곳에 가서 커서를 올려 놓으면 아래와 같이 실제로는 120 * 120px로 렌더링되지만, 1200 * 1200px사이즈 이미지를 가져왔음을 알 수 있다. (여기서 권장되는 사이즈는, 실제 렌더링되는 사이즈의 *2 정도라고 한다.)
우리가 해당 이미지를 가지고 있다면 직접 툴로 수정할 수 있지만, API 호출 등으로 불러오는 경우 이미지를 수정할 수 없어 별도로 API 상 width/height를 조정해주는 기능을 넣거나 이미지 전용 CDN을 제작해야 한다.
코드 분할
React와 같은 SPA 특성상 모든 리액트 코드가 하나의 자바스크립트 파일로 번들링된다.
이와 같은 경우, 첫 페이지 진입 시 당장 사용하지 않는 코드가 다소 포함되어 있다.
sd
텍스트 압축
HTML / CSS / JS등의 리소스를 다운로드 전 서버에서 압축하는 방법.
dd
병목 코드 최적화
서비스가 너무 느리게 다운로드되거나 느리게 실행되게 만드는 특정 JS 코드를 최적화하는 방법.
Lighthouse의 view original trace 버튼을 클릭하면, performance 탭으로 넘어가게 된다.
| 순 번 | 이 름 | 설 명 |
| 1 | CPU 및 Network 차트 | CPU 차트: CPU가 어떤 작업에 리소스를 사용하고 있는지 비율로 보여준다. 이 차트를 통해 어떤 타이밍에 어떤 작업이 주로 진행되고 있는지 확인할 수 있다. Network 차트: CPU 차트 밑에 막대 형태로 표시된다. 여기서는 대략적인 네트워크 상태 및 네트워크 리소스를 나타낸다. |
| 2 | Network 타임라인 | Network 패널과 유사하게 서비스 로드 과정에서의 네트워크 요청을 시간 순서에 따라 보여준다. |
| 3 | Frames, Timings, Main | Frames는 화면에 변화가 일어날 때마다 스크린샷을 찍어 보여주며, Timings는 User Timing API를 통해 기록된 정보를 기록한다. Main은 브라우저의 메인 스레드에서 실행되는 작업을 플레임 차트로 보여준다. |
| 4 | 하단 탭 | 하단에 있는 전체 내용을 정리한 Summary를 확인할 수 있다. |
추후 작성.
