회사 홈페이지 속도 개선을 하다보니 한계에 부딪혔다. DB 결과에 대해 cahce 을 적용하는 방법이 있긴 한데, 뭔가 전반적인 변경을 해야 한다. (이런것은 처음부터 고려하기가 참 어렵다. 속도개선이라는게 늦은 부분을 개선해야 하기 때문이다. 성급한 최적화는 개발 속도를 느리게 한다. ) 우선 빠르게 lighthouse (developers.google.com/web/tools/lighthouse?hl=ko) 점수를 개선할 방법을 찾다보니, 쉽게 적용할 수 있는 것을 많이 적용하고 있었다. 이젠 lighthouse 가 추천하는 것들 중 어려운 것만 남았다.
lighthouse 에서 추천하는 방법은 아니었지만 쉽게 속도 개선을 할 수 있는 방법을 생각해보니 HTTP/2 Server Push 를 적용하는 방법을 생각해 보았다. HTTP/2 Server Push 란 웹접속시 리소스(이미지, 웹폰트, javascript, css 등등)을 같이 보내주는 방법이다. 일반적으로 브라우저가 HTML Document 요청되면 이 HTML 문서가 파싱되고 엘레멘트안에 이미지나 웹폰트 등등을 파악하고 다시 서버에 요청한다. 어차피 서버에 다시 요청될 것 서버에서 미리 보낸주는 방식으로 속도를 개선하겠다는 것이다. (물론 해당 리소스가 cache 되어 있는 경우, 불필요한 전송으로 트래픽 낭비이다. 이른 cookies 를 통해 개선할 수도 있다.)
Nginx 에서는 http2_push 를 통해서 이를 적용할 수 있다. (www.nginx.com/blog/nginx-1-13-9-http2-server-push/) 잘못하면 불필요게 트래픽을 낭비할 수 있어, 기본적으로 보내도 손해볼 것 같지 않을 매우 작은 사이즈의 이미지만을 첫 페이지에 적용했다.
아래와 같이 적용할 수 있다.
location = / {
include uwsgi_params;
uwsgi_pass .............
............
http2_push /static/img/check.svg;
http2_push /static/img/facebook.svg;
http2_push /static/img/delete.svg;
............
}이렇게 설정할 경우 chrome dev tool 에서는 아래처럼 보이게 된다.
css 와 js 에도 적용이 가능하겠지만 이 경우 파일이 크다보니 이미 해당 파일의 cache 가 있는 경우 트래픽 낭비로 생각되었다. http2_push 를 적용한 파일들은 inline 으로 적용해도 상관없는 svg 파일이다.
css 와 js 의 경우 cookies 에 버전번호에 대한 정보를 남겨두고 이 버전정보가 오래될 경우에만 HTTP/2 Server Push 하는 방법이 가장 효율적일 것 같다. 그런데 버전관리하는게 Nginx 와 통합되지 않으면 뭔가 수동으로 작업하는 것 같아 보여 배포하는데 불편할 것 같아서 그런 방식을 적용하지 못했다.