웹페이지 최적화

0.

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

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

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

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

https://developers.google.com/speed/pagespeed/insights/?hl=ko

1.

이미지를 최적화하자.

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

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

https://compresspng.com/ko/

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

저작자표시비영리

'개발 > 아카이브' 카테고리의 다른 글

웹페이지 최적화  (0)	2018.07.16
webstorm에서 javascript/CSS minify 적용  (0)	2018.07.16
canvas rotate 후 axis 조정  (0)	2018.02.19
우분투에서 HeidiSQL 사용하기  (0)	2018.01.17
api 문서화, 좋은 예시  (0)	2017.10.31
ubuntu16에서 Pycharm, Webstorm 설치하기  (0)	2017.08.23