일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 |
- 블라디보스토크
- github
- 워킹데드
- 그래픽노블
- https
- 중국맛집
- flask
- Project Euler
- FPS
- 컴퓨터네트워크
- 스팀
- codility
- 인디게임
- lambda
- 게임
- pycon
- Python
- AWS
- certbot
- C#
- 알고리즘
- 퍼즐게임
- 우분투
- coursera
- API
- django
- 몽골여행
- 파이썬
- 프로젝트오일러
- 먹방
- Today
- 19
- Total
- 323,616
YUDA't
웹페이지 최적화 본문
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
'개발 > 아카이브' 카테고리의 다른 글
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 |
- Tag
- Cache-Control, html, javascript, 최적화