서버 성능을 최적화해보자

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

속도 체크 개선

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

1. 텍스트 압축 사용

텍스트압축

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

  • GZIP 공식 사이트
  • SpringBoot의 설정 파일에서 손쉽게 텍스트 데이터를 압축하여 서버에 전송할 수 있다.
server:
  compression:
    enabled: true
  • Brotli 이라는 보다 최신의 압축 알고리즘이 있으나, 아래의 두가지 이유로 GZIP을 선택했다.
    1. 기본이 GZIP이고, Brotli를 적용하려면 설정을 많이 건드려야 함
    2. IOS의 Safari에서 동작하지 않는다!
  • 압축 전 텍스트 파일들의 크기

텍스트압축전

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

텍스트압축후

텍스트압축후 Response Header

  • [크롬 개발자 도구] - [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% 성능 개선율을 보이는 것을 알 수 있다.
  • 물론 이건 Best Practice의 경우이지만, 확실한건 엄청나게 로드 시간을 줄일 수 있었다는 것이다.

댓글남기기

참고