본문 바로가기
개발/web

웹페이지 최적화

by 유다110 2018. 7. 16.
반응형

0.

구글 PageSpeen 툴을 사용하면 내 사이트가 왜 느린지 분석해볼 수 있다.

새로 만든 페이지가 너무 느려서(40초 도랏;;) 원인을 뒤지던 중 발견했는데 

이거 기준으로 하나하나 해결해 나가니까 훨씬 빨라졌다.

"물론 이 점수가 반드시 페이지 속도에 비례하진 않는다. 점수가 높아도 느리거나, 점수가 낮아도 빠른 경우도 많다."


1.

이미지를 최적화하자.

아래 사이트에서 png, jpg 등의 이미지들을 최적화 할 수 있다.

비슷한 화질로 95% 가량 줄이니 네트워크를 통해 가져오는 이미지 용량이 격하게 줄어들었다.


2.

CSS, js 파일을 최적화하자.

이전 포스팅 참조.

덧붙여 CDN을 사용한다면 꼭 min 파일을 사용하도록 하자.


3.

브라우저 캐싱을 활성화시키자.

css, js 처럼 자주 바뀌는 파일의 경우엔 24시간 정도, 이미지와 같이 내용이 거의 바뀌지 않는 경우는 한 달 정도로 캐싱하자.


난 nginx를 사용해서 nginx 설정에서 Cache-Control 을 추가했다.

$ cd /etc/nginx/sites-available

$ vi default


경로는 사람마다 다를 수 있음. 어쨌든 sites-available 내용을 바꿔주는 거다.

파일에 다음을 추가한다.

location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {

  expires 1M;

  add_header Cache-Control "public";

}


+ nginx Cache-Control 에 대해 더 알고 싶다면, https://serversforhackers.com/c/nginx-caching

반응형

'개발 > web' 카테고리의 다른 글

Netlify에서 Vue router  (0) 2019.11.27
재미있는 REST API 파라미터의 종류와 개요  (2) 2019.03.08
HTTP와 HTTPS  (2) 2019.02.13
html/CSS에 쓸만한 사이트 모음  (0) 2016.03.18

댓글