해당 포스팅은 사이드 프로젝트 진행 중 겪은 크고 작은 이슈들에 대한 기록입니다.

서버 성능을 최적화해보자

• 이미지 리사이징을 구현하고 보니, 서버 성능 및 서비스 최적화를 최소한이라도 진행해야겠다 싶어서 아래의 사이트에서 현재 배포중인 서비스를 테스트해보았다.
• 속도 개선 피드백 사이트

• 위 사이트의 결과를 토대로 기본적인 사이트 최적화를 적용해보자.

1. 텍스트 압축 사용

• 참고 사이트

1-1. GZIP을 활용하여 텍스트 압축

• GZIP 공식 사이트
• SpringBoot의 설정 파일에서 손쉽게 텍스트 데이터를 압축하여 서버에 전송할 수 있다.

server:
  compression:
    enabled: true

• Brotli 이라는 보다 최신의 압축 알고리즘이 있으나, 아래의 두가지 이유로 GZIP을 선택했다.
  1. 기본이 GZIP이고, Brotli를 적용하려면 설정을 많이 건드려야 함
  2. IOS의 Safari에서 동작하지 않는다!
• 압축 전 텍스트 파일들의 크기

• 압축 후 텍스트 파일의 크기 및 Response Headers

• [크롬 개발자 도구] - [Network] 탭의 리소스들을 보면 위의 결과들이 나온다.
• Response Headers에 Content-Encoding으로 GZIP이 정상적으로 적용된 것을 확인할 수 있고, 간단한 설정만으로도 텍스트 파일들의 크기가 기존 대비 12.5%까지 줄어든 것을 확인할 수 있다.

2. 검색엔진 최적화를 위한 태그 추가

2-1. 모바일 친화적인 페이지 지원

• 구글 검색 센터

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• 위의 코드를 추가하여 모바일에 친화적인 페이지로 만든다.

2-2. 문서에 메타 설명 추가

<meta name="description"
          content="현재 위치하는 주변의 핫플레이스를 기호와 날씨에 맞게 추천해드립니다.">

• 웹사이트 전체를 간략하게 설명해주는 요소로 검색 결과에서 웹사이트의 이름과 함께 표시되는 부분이다.

2-3. 이미지 요소에 alt 속성 추가

• 이미지마다 alt 속성값을 부여해줘야 하는데, 이를 간과하여 놓친 부분들에 속성을 다 부여해주었다.

3. 대표이미지 리사이징 이미지로 변경

• 기존 리사이징 하지 않은 이미지들을 로드할 때, 많은 시간이 소요되고 있었다.

• 최대 이미지 로드 소요 시간에 400ms ~ 2200ms까지 약 1800ms 소요되는 것을 확인할 수 있다.

• 동일한 대표 이미지를 리사이징 한 후, 로드 소요 시간이 약 50ms로 3500% 성능 개선율을 보이는 것을 알 수 있다.