웹사이트 속도 개선기(CDN,gzip, JS CSS Minify)

실무이야기

웹사이트 속도 개선기(CDN,gzip, JS CSS Minify)

JinCode 2024. 10. 27. 15:41

웹사이트 속도 개선기(CDN,gzip, JS CSS Minify)

회사에서 구축 이후 해외접속 사용자들이 메인페이지부터 느리다는 문의를 받았습니다.

사이트가 소개페이지가 많다 보니 고용량 이미지(이미지 1개당 약 2~3MB)가 페이지에 많게는 10장이 넘어가고, 메인페이지는 크롬 Network로 확인했을 때 영상도 있다 보니 50MB가 넘어가고 있었습니다.

이를 개선하고자 퀄리티는 유지하면서 여러 방법을 사용했는데 그 방법에 대해서 소개시켜드리고자 합니다.

※ 해당 사이트의 서버는 AWS를 사용중에 있습니다. 단, 서울리전의 서버 1대만 사용했습니다.

1. CDN 서비스 적용

CloudFront를 이용해 이미지, 영상 등의 정적파일에 대해서 CDN을 적용했습니다.

서버는 서울에 있지만 그 외 정적 리소스는 CDN을 통해 각 해외 리전을 사용했습니다.

단점으로는 비용이며, 이미지를 교체했을 때 반영을 수동으로 해야 한다는점, 교체에서도 비용이 발생합니다.

2. Nginx gzip 적용

컨텐츠에 대해 압축을 진행했습니다.

# httpd.conf 파일 수정

# 모듈 추가
LoadModule deflate_module modules/mod_deflate.soLoadModule headers_module modules/mod_headers.soLoadModule filter_module modules/mod_filter.so# 코드 추가

<IfModule mod_deflate.c>        
        ##압축 대상 컨텐츠 리스트
        AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css
        AddOutputFilterByType DEFLATE application/xml application/xhtml+xml application/rss+xml
        AddOutputFilterByType DEFLATE application/javascript application/x-javascript
        AddOutputFilterByType DEFLATE audio/midi
        
        ##압축률 (1~9이며 높을 수록 큰 압축률)
        DeflateCompressionLevel 9
        
        ##브라우저 예외 처리
        ##참조 래퍼런스 (https://httpd.apache.org/docs/2.4/ko/mod/mod_deflate.html)https://httpd.apache.org/docs/2.4/ko/mod/mod_deflate.html
        BrowserMatch ^Mozilla/4 gzip-only-text/html  # Netscape 4.xx에는 HTML만 압축해서 보냄
        BrowserMatch ^Mozilla/4\.0[678] no-gzip  # Netscape 4.06~4.08에는 압축해서 보내지 않음
        BrowserMatch \bMSIE !no-gzip !gzip-only-text/html  # 자신을 Mozilla로 알리는 MSIE에는 그대로 압축해서 보냄
        
        ##압축 제외 설정
        SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png|bmp|zip|gz|rar|7z)$ no-gzip dont-vary
        SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|iso|tar|bz2|sit|rar) no-gzip dont-vary
        SetEnvIfNoCase Request_URI .pdf no-gzip dont-vary
        SetEnvIfNoCase Request_URI .flv no-gzip dont-vary
        
        ####로그설정.
        DeflateFilterNote Output outstr
        DeflateFilterNote Input instr
        DeflateFilterNote Ratio ratio
        LogFormat '"%r" %{outstr}n/%{instr}n (%{ratio}n%%)' DEFLATE
        Header append Vary User-Agent env=!dont-vary
</IfModule>