프론트엔드 성능 최적화 - 1. 문제 인식

프론트엔드 성능 측정 방법이 궁금하시다면 아래의 링크를 참고해주세요.

https://codingmoondoll.tistory.com/entry/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-Quick-Start-1

프론트엔드 성능 분석 Quick Start

 

이전 시간에는 성능을 분석해보고 어느 부분에서 성능상의 이슈가 있는지를 도출하는 일을 했습니다. 이제 그럼 거기서 발견된 성능 이슈를 해결하기 위한 본격적인 최적화 작업을 수행해봅시다.

 

실습을 위한 예시 어플리케이션은 아래 링크에서 가져올 수 있습니다. 해당 어플리케이션은 우아한테크코스에서 제공하는 실습자료이며, 제가 제작한 자료가 아님을 밝힙니다.

 

https://github.com/woowacourse/perf-basecamp

 

위 어플리케이션을 clone 해서 npm run serve 를 통해 실행해보았다면 성능 분석을 통해 여러 문제가 있음을 알 수 있을 것입니다. 굳이 분석하는 것까지 이번 시간에는 다루지 않고, 바로 어떤 문제가 있는지를 짚어보겠습니다.

 

• [ ] 최적화 되지 않은 소스코드
• [ ] 최적화 되지 않은 이미지
• [ ] 최적화 되지 않은 폰트
• [ ] 모든 자원을 초기에 모두 다운로드 받음
• [ ] CDN이 적용되지 않아 외국에서 접속할 경우 접속하기까지 너무 오랜 시간이 걸림
• [ ] Caching이 적용되어 있으나 정확히 어떤 정책이 세팅되어 있는지 모름

 

그러면 문제를 하나씩 고쳐봅시다.

 

https://codingmoondoll.tistory.com/entry/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-2-%EC%9B%B9%ED%8C%A9%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%9C-%EB%B2%88%EB%93%A4-%EC%82%AC%EC%9D%B4%EC%A6%88-%EC%B6%95%EC%86%8C

프론트엔드 성능 최적화 - 2. 소스코드 최적화

 

https://codingmoondoll.tistory.com/entry/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-3%EC%BD%94%EB%93%9C-%EC%8A%A4%ED%94%8C%EB%A6%AC%ED%8C%85-%ED%8A%B8%EB%A6%AC-%EC%89%90%EC%9D%B4%ED%82%B9

프론트엔드 성능 최적화 - 3. 코드 스플리팅 & 트리 쉐이킹

 

https://codingmoondoll.tistory.com/entry/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-4-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%8C%8C%EC%9D%BC-%EC%B5%9C%EC%A0%81%ED%99%94

프론트엔드 성능 최적화 - 4. 이미지 파일 최적화

 

 

https://codingmoondoll.tistory.com/entry/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-5-%EC%9B%B9-%ED%8F%B0%ED%8A%B8-%EC%B5%9C%EC%A0%81%ED%99%94

프론트엔드 성능 최적화 - 5. 웹 폰트 최적화

 

https://codingmoondoll.tistory.com/entry/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%84%B1%EB%8A%A5-%EC%B5%9C%EC%A0%81%ED%99%94-6-%EC%9E%90%EC%9B%90-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84-%EC%84%A4%EC%A0%95

프론트엔드 성능 최적화 - 6. 자원 다운로드 우선순위 설정