📈

화면 응답 개선하기 미션 가이드

webpagetest, pagespeed 등으로 테스트하여, 인터넷 구간에서 성능에 영향을 주는 요소를 이해해봅니다. HTTP를 활용하여 서비스의 성능을 개선해봅니다.

1. 웹 성능 테스트

WebPageTestPageSpeed 등에서 테스트를 진행해봅니다.
크롬 브라우저 도구를 활용하면, 퍼포먼스 탭에서 각 api별 요청 응답시간을 확인할 수 있어요.

2. Reverse Proxy 개선하기

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; }
Bash
복사
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; } } }
Bash
복사
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; } }
Bash
복사

3. Tomcat 개선하기

HTTP Cache, gzip 등 학습 테스트를 통해 학습한 후, 운영 코드에 반영해보세요.
gzip 압축
# 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
Bash
복사