꿀팁 저장소

구글에서 제공해주는 도구들을 이용해 체크해보니 운영중인 웹사이트 로딩속도가 어마어마하게 느렸다

모바일 기준으로 19.7

경악스러웠다.

당장 손볼수 있는것들을 손봤고 약 2배정도 빠른 속도를 얻어 방법을 공유한다.

이미 되어있던 퍼포먼스 관련 설정들

1. 서버 로드밸런스

2. 부분적으로 적용한 이미지 cloud front

추가한 퍼포먼스 관련 설정들

1. Nginx - gzip

2. Webpack - compression

3. Code spliting

4. 전체 이미지 cloud front 적용

이 중에서 가장 쉽고 큰 효과를 얻은것은 gzip이 아닌가싶다

주의할점은 클라이언트와 웹서의 서버가 분리되어있다면 양쪽 모두에 설정해주어야 한다는 점이다.

코드는 간결하다. nginx.conf 파일에 아래의 내용을 설정한다.

http {
...

gzip  on;

gzip_disable "msie6";
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/x-javascript application/javascript text/xml application/xml application/xml+rss text/javascript;

...
}

코드 스플리팅은 react의 lazy/suspense를 이용해서 간단히 설정해주었다.

코드를 너무 작은단위로 나눠도 호출하는 시간에서 손해가 발생하기 때문에 webpack plugin 설정에 아래와같이

최소 크기를 설정해주었다

...,
plugins: [
  ...,
  new webpack.optimize.MinChunkSizePlugin({
    minChunkSize: 512000, // 50kb
  }),
  ...          
]

compression은 역시 plugin 에서 간단히 추가했다.

[
  new CompressionPlugin({
    filename: '[path][base].gz',
    algorithm: 'gzip',
    test: /\.js$|\.css$|\.html$/,
    threshold: 10240, // 10kb
    minRatio: 0.8,
  }),
]

웹개발을 하다보면 브라우저 호환성으로 인해 스트레스를 많이 받습니다.

하지만, 종종 특수한 경우에 모든 브라우저를 지원하기위해 노력할 필요가 없을때가 있습니다.

예를들어, 개발 초기부터 "IE는 배제하고 다른 사용자 브라우저에 집중하기로 한다"하고 미리 약속을 할 때가 있죠.

그런 조금은 행복한 경우를 위해,

"ancient"브라우저들을 nginx수준에서 막아버릴 방법을 제시해드리도록 하겠습니다.

(의외로 잘 정리된 자료가 없더군요)

이 방법은 Nginx가 늘 사용자 request의 브라우저를 식별하고 있음을 이용한 방법입니다.

# /etc/nginx/nginx.conf

...
http {
    ...
    map $http_user_agent $outdated {
        default                                 0;
        "~MSIE [1-9]\."                         1;
        "~MSIE [0-9][0-9]\."                    1;
        "~Trident/.*"                           1;
        "~Edge/[0-9]\."                         1;
        "~Edge/[0-9][0-9]\."                    1;
        "~Edge/.*"                              1;
        "~Mozilla.*Firefox/[1-9]\."             1;
        "~Mozilla.*Firefox/[0-2][0-9]\."        1;
        "~Mozilla.*Firefox/3[0-1]\."            1;
        "~Opera.*Version/[0-9]\."               1;
        "~Opera.*Version/[0-1][0-9]\."          1;
        "~Opera.*Version/2[0-1]\."              1;
         "~AppleWebKit.*Version/[0-6]\..*Safari" 1;
         "~Chrome/[0-9]\."                       1;
        "~Chrome/[0-2][0-9]\."                  1;
        "~Chrome/3[0-3]\."                      1;
    }
    ...
}
...

다음은, /etc/nginx/sites-enabled (혹은, /etc/nginx/sites-available/default)를 수정할건데요.

여러분이 설정해둔 server중 적용하고 싶은 파트에 적절히 배치하면됩니다.

예시를 통해 확인하고 응용해보세요.

# /etc/nginx/sites-enabled/default 혹은 /etc/nginx/sites-available/default

...

server {
    root /home/ubuntu/hello_world
    index index.html
    server_name www.helloworld.com
    
    location / {
        if ($outdated = 1) {
            root /home/ubuntu/unsupported;
            rewrite ^ /index.html break;
        }

        try_files $uri $uri/ /index.html;
    }
    ...
}

...

보시는 바와 같이 1번 블럭 코드의 브라우저(및 버전)에 해당될경우

/home/ubuntu/unsupported 경로의 index.html 파일을 response합니다.

unsupported경로에 index.html 파일만 적절히 만들어두면 되겠죠?

코드를 통해 알수있듯이, IE브라우저 외에도 오래된 브라우저들은 모두 redirect 시켜버립니다.

확인해보고 필요한 부분의 코드만 (제외하고싶은 브라우저만) 남겨서 사용하시면 될것같습니다.

# 참고자료

https://gist.github.com/rosskevin/5cfd78c73a10ca1989696350d76ea3c1

Error during WebSocket handshake: Unexpected response code: 400

웹소켓 연동 중 이러한에러가 발생 + 서버가 느려지는 현상이 발생했다.

해결을 위해서는 nginx의 proxy파트에 추가적으로 다음과 같은 코드를 넣어줘야 한다.

proxy_http_version 1.1; 
proxy_set_header Upgrade $http_upgrade; 
proxy_set_header Connection "upgrade"; 
proxy_set_header Host $host;