[인프라공방] 지하철 노선도 - 4. 화면 응답 개선하기

1. 개념 및 용어 정리

[1] Web Page Test

1. webpagetest??
   • 인터넷 구간에 관한 전반적인 테스트
2. 테스트 방법
   • API 별 요청 응답 시간 확인 : 크롬 브라우저 도구 > 퍼포먼스 탭 
   • 정적 요소들에 관한 측정 법
     • https://www.webpagetest.org/ 
     • https://pagespeed.web.dev/
3. 정적 요소 검토 사항
   • 성능에 영향을 주는 요소 : HTML, CSS, JS, image, web font 등
   • 성능 개선 검토 요소 : 압축, HTTP Cache, CDN 등등
4. 웹 서버에 영향을 받는 지표
   1. security score : TLS 및 HTTP 헤더 보안성 + JS 라이브러리 보안 취약성
   2. first byte time : 서버 응답시간 + 네트워크 비용 : 웹 서버에서 받은 컨텐츠의 첫번 째 바이트가 얼마 만에 도착했는지
   3. keep-alive enabled : keep-alive 설정했는지, 매번 3way handshake 등 과정을 거쳐 connection 을 생성하지 않고 재사용하는지
   4. compress transfer : gzip 압축을 했는지
   5. compress images : 이미지 압축을 했는지 (사용자는 이미지 품질보다 네트워크 지연에 민감)
   6. cache static content
      • JS, CSS 이미지, 웹 폰트 등 정적 컨텐츠를 캐싱했는지
      • 전송 비용을 줄이는 것보다, 불필요한 요청 수를 줄이는 것이 효과적

 

[2] HTTP Header : Content-Encoding, Accept-Encoding

1. HTTP Header : Content-Encoding
   1. Content-Encoding : 서버가 실시한 content-encoding 형식을 클라이언트에게 전달하는 엔티티 헤더 필드이다.
      • 엔티티 헤더 필드 : request 와 response 메세지에 포함된 엔티티에 사용되는 헤더
      • 예시 : Content-Encoding: gzip
2. HTTP Header : Accept-Encoding
   1. Accept-Encoding : 브라우저가 처리할 수 있는 Content-Encoding 과 우선 순위를 전달하기 위해 사용하는 리퀘스트 헤더 필드이다.
      • 예시 : Accept-Encoding: br;q=1.0, gzip;q=0.8, *;q=0.1

 

[3] 압축 방식

1. gzip 압축

• gzip은 파일 압축 및 압축 해제에 사용되는 파일 형식이다. Deflate 알고리즘에 기반하여 파일 크기를 작게 만들어 네트워크 전송 속도를 높일 수 있다. gzip은 일반적으로 웹 서버와 최신 브라우저에서 지원되므로 서버는 파일을 보내기 전에 자동으로 gzip으로 압축하고 브라우저는 파일을 받으면 압축을 해제할 수 있다.

 

[4] HTTP Cache

• 응답 값의 복사본을 재사용하여 리소스를 불러오는 속도를 향상시키기 위함
• 캐싱한 리소스의 위치는 브라우저의 private cache 에 존재할 수도 있고, 프록시 서버(proxy, reverse proxy, CDN) 의 Shared Cache 로 존재할 수도 있음
• 관련 내용은 https://dev-cooper.tistory.com/11 에 정리

 

 

2. 웹 성능 테스트

[1] 웹 성능 측정하기

• URL : https://www.webpagetest.org/
  • 웹 페이지 로딩 속도를 무료로 테스트 할 수 있는 사이트
• 특징
  • 연결 시도 위치 및 환경 설정 가능
  • Repeat View(캐싱 등 테스트)
  • 동일 조건으로 여러 차례 테스트
• 실행법
  • 테스트 URL 입력 : https://cooper-subway.kro.kr/
  • 테스트 지역 선택 (서울 선택) : advanced configuration > test setting > test location, browser 설정
  • Start Test

NGINX + tomcat gzip 설정 이전1

 

[2] 웹 성능 예산 측정

• URL : https://pagespeed.web.dev/
• 성능 문제 진단 및 개선 전략에 대한 가이드 제공

NGINX + tomcat gzip 설정 이전2

 

진단 내용을 자세하게 알려준다.

 

[3] API 응답 시간 확인

• 역 관리 조회 API 응답 시간 확인
• chrmoe > 개발자 모드 > performance tab > record > Network 확인
• 현재 GET /stations API duration 818.266ms 임을 확인

 

 

3. reverse proxy 개선하기

[1] NGINX nginx.conf 파일 설정

(1) gzip 압축

http {
  gzip on; ## http 블록 수준에서 gzip 압축 활성화
  gzip_comp_level 9;
  gzip_vary on;
  gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/rss+xml text/javascript image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype;
}

 

(2) cache

http {
  ## Proxy 캐시 파일 경로, 메모리상 점유할 크기, 캐시 유지기간, 전체 캐시의 최대 크기 등 설정
  proxy_cache_path /tmp/nginx levels=1:2 keys_zone=mycache:10m inactive=10m max_size=200M;

  ## 캐시를 구분하기 위한 Key 규칙
  proxy_cache_key "$scheme$host$request_uri $cookie_user";
  
    server {
        location ~* \.(?:css|js|gif|png|jpg|jpeg)$ {
            proxy_pass http://app;
      
            ## 캐시 설정 적용 및 헤더에 추가
            # 캐시 존을 설정 (캐시 이름)
            proxy_cache mycache;
            # X-Proxy-Cache 헤더에 HIT, MISS, BYPASS와 같은 캐시 적중 상태정보가 설정
            add_header X-Proxy-Cache $upstream_cache_status;
            # 200 302 코드는 20분간 캐싱
            proxy_cache_valid 200 302 10m;    
            # 만료기간을 1 달로 설정
            expires 1M;
            # access log 를 찍지 않는다.
            access_log off;
        }
    }
}

 

(3) TLS, HTTP/2 (HTTP2.0은 SSL 계층 위에서만 동작합니다.)

http {
  server {
    listen 80;
    return 301 https://$host$request_uri;
  }
  server {  
  listen 443 ssl http2;
    
    ssl_certificate /etc/letsencrypt/live/[도메인주소]/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/[도메인주소]/privkey.pem;

    # Disable SSL
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

    # 통신과정에서 사용할 암호화 알고리즘
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DH+3DES:!ADH:!AECDH:!MD5;

    # Enable HSTS
    # client의 browser에게 http로 어떠한 것도 load 하지 말라고 규제합니다.
    # 이를 통해 http에서 https로 redirect 되는 request를 minimize 할 수 있습니다.
    add_header Strict-Transport-Security "max-age=31536000" always;
    
    # SSL sessions
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m; 
  }
}

 

(4) 성능 진단 - PageSpeed Insights

• First Contentful Paint : 3.3s → 1.7s
• Largest Contentful Paint : 3.3s → 1.7s
• Total Blocking Time : 50ms → 0s 
• Speed Index : 3.3s → 2.1s

 

 

 

(5) 성능 진단 - Webpagetest

• start render : 4.7s  → 1.5s (첫 패킷 도달까지의 시간)
• First Contentful Paint : 4.708s → 1.503s (텍스트와 이미지가 언제부터 표시되기 시작하는 시간)
• Speed Index 4.739s → 1.544s (페이지가 사용한 상태로 까지의 시간)
• Largest Contentful Paint : 4.901s → 1.602s (가장 크게 표시되는 콘텐츠의 로딩 완료 시간)
• Page Weight : 2478KB → 615KB (다운로드한 바이트 수)

 

 

 

 

[2] tomcat compression 설정

(1) application.properties 설정 

• server.compression.enabled - 서버 압축 활성화 여부
• server.compression.mime-types - 압축할 MIME-TYPE 설정
• server.compression.min-response-size - 압축할 파일 최소 사이즈 (default = 2048)

# application.properties
server.compression.enabled: true
server.compression.mime-types: text/html,text/plain,text/css,application/javascript,application/json
server.compression.min-response-size: 500

 

 

(2) 성능 진단 - PageSpeed Insights (NGINX + tomcat)

 

(3) 성능 진단 - Webpagetest (NGINX + tomcat)

• NGINX 에서 HTTP 요청 시 gzip compression 이 동작하여 성능상이 변화가 미미한 것으로 판단

 

 

Reference

• 참고 강의
  • https://www.inflearn.com/course/%EC%9D%B8%ED%94%84%EB%9D%BC-%EA%B3%B5%EB%B0%A9-%EC%84%9C%EB%B9%84%EC%8A%A4-%EB%A7%8C%EB%93%A4%EA%B8%B0/dashboard
• HTTP Content-Encoding, Accept-Encoding, gzip 
  • https://developer.mozilla.org/en-US/docs/Glossary/GZip_compression
  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding
  • https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-Encoding
  • https://developer.mozilla.org/en-US/docs/Glossary/GZip_compression
  • https://wonsss.github.io/%EC%B5%9C%EC%A0%81%ED%99%94/gzip-compression/