8 years, 2 months 전-
안녕하세요.
트래픽을 줄이기 위해 온갖 노력을 하고 있는 초보개발자입니다.
개발자 도구로 보니 웹페이지에 들어가는 Noto Sans 체가 네트워크 용량 상당부분을 차지하더라구요.
(페이지마다 다르지만 30~50%가량)
이 폰트를 구글 CDN을 통해 불러오면 그만큼의 용량을 줄일 수 있는 지 궁금합니다. 제 직관으로는
구글CDN은 외부 서버라서 트래픽에 계산되지 않을거 같은데 어떤가요?
트래픽에 대한 개념이 부족한거 같습니다. ㅠㅠ 참고로 주소는 the-edit.co.kr 입니다. 감사합니다.
font 를 CDN 에서 로딩하면 당연 그 폰트 사이즈에 해당하는 트래픽이 줄어 듭니다.
공교롭게 바로 며칠전 튜토리얼때도 얘기 했었는데, 한국 개발자 분들 중, 웹 이미지를 아예 이해하지 못하시는 분들을 자주 접하게 됩니다.
웹에서 최고 표시될수 있는 resolution 은 72 나 96 dpi/ppi 입니다. 그래서 300 dpi 로 이미지를 웹에 올리셔봐야, 그 dpi 가 표시되는게 아닙니다.
사실 dpi/ppi 가 중요하다기 보다 이렇게 쓸데 없이 큰 사이즈의 이미지 (2079px X 1412px) 들을 올림으로 해서 걱정하고 계신 noto sans 폰트 보다 훨씬 더 많은 트래픽을 아무런 이유 없이 소모하고 계신겁니다.
그래픽 디자이너들이야 웹에 대해 아무것도 모르니까 그러려니 해도, 웹디자이너, 혹은 개발자가 이런 기본적인 상식이 없다는건 조금 심각한 문제 입니다.
감사합니다. ㅠㅠ
늘 그렇지만 아직 갈 길이 멀군요…
웹에 대한 기본은 파도파도 끝이 없어보입니다.
또다른 문제가 있다면 알려주시고 혹시 기본을 쌓을 수 있는
좋은 레퍼런스 있다면 추천부탁드립니다.감사합니다.
웹폰트가 참 좋긴 한데, 한글의 경우 웹폰트 용량이 보통 1M를 훌쩍넘어 3~4M 까지도 합니다. 영문 폰트가 100kb 이하인 것에 비하면 커도 너무 크지요. 현재 대부분의 한국 인테넷 환경이 광랜정도의 속도를 내서 데스크탑에서는 잘 느끼지 못하는 경우가 많지만, 외국에서 접속할 때 혹은 모바일에서 인터넷이 평균에 비해 느린 경우 페이지가 로딩되는데 한참이 걸리거나 화면이 깝박거리기도 하지요.
@martian36 님께서 자주쓰는 한글문자만 추려서 용량을 많이 줄인 폰트를 공유하셨으니 참고하시면 많이 도움이 될겁니다.
http://martian36.tistory.com/1408
물론 말씀하신대로 CDN을 사용하면 현재 사용중인 호스팅의 트래픽에는 포함되지 않습니다. 서버 트래픽도 고려하셔야 겠지만, 방문자의 트래픽토 고려하시는게 좋습니다.
스포카 한 산스
https://spoqa.github.io/spoqa-han-sans/ko-KR/
https://spoqa.github.io/2015/10/14/making-spoqa-han-sans.html
개인이 아닌 전문 디자이너 분들이 노토 (Noto) 를 토대로 경량화 + 디자인 개선을 해서 만드셨고, CDN 으로 사용할 수 있어서 서버 트래픽 과 방문자 트래픽 둘다 고려할 수 있습니다.“또다른 문제가 있다면 알려주시고 혹시 기본을 쌓을 수 있는 좋은 레퍼런스 있다면 추천부탁드립니다.” – 웹기초는 학원이나 학교 다니셔야 하는게 아닐까 싶은데.. ㅎㅎㅎ 농담이구요.
다른 한국 워드프레스 사이트에 비해 꽤 optimizing 을 잘 해놓으셨습니다. (한국 워드프레스 사이트 중, 이미지 문제만 빼면 지금 현재도 최상급 이십니다.)
js 를 footer 로 내려보내야 한다는 것도 알고 계시고, 단지 어떤 js 는 header 에 남아 있는데 아직 작업 중 이시거나 귀차니즘? 인가요?
그리고 jQuery 사용… 튜토리얼 참여자 분들께는 직접 시연해서 보여드렸지만, jQuery 는 가급적이면 사용하시지 않는게 좋습니다. (속도차이가 어마무시 합니다.) jQuery 쓰시면 PC 뷰에서는 문제점을 못 느끼지시지만, 모바일에서 장난아니게 버벅 거립니다. 현재 사이트는 jQuery 를 쓰시지 않으셔도 큰 어려움 없이 사이트 구축이 가능하실텐데요…
jQuery 를 꼭 사용하셔야 겠다. 그렇다면 최소 jquery-migrate.min.js 은 빼서 버리세요. 이건 하위버전 jQuery 를 같이 쓰실때 충돌나지 말라고 들어가 있는거라서 질문자분 사이트에 필요 없습니다.
emoji 도 사용안하시는데 emoji 로딩 되고 있는 것도 빼서 버리시구요. (emoji 꽤 무겁고 필요없는 트래픽 입니다.)
그리고 개발이 끝나신 후에는 query string, (jquery.js?ver=1.12.4 물음표 다음에 표시되는 숫자) 예네들도 표시 안되게 해주시고,
Leverage browser caching – 이건 꼭 적용하셔야 하는건데 안해놓으셨네요.
마지막으로 xml rpc, 이거는 보안상 꽤 위험해서 비활성화 시키시는게 좋습니다.
위 내용는 기본적인 것 들이고… 좀더 serious 하게 사이트를 최적화 하고 싶으시다면, 아래 내용 참조 하세요.
정말 트래픽 과 사이트 속도를 최대한 개선하고 싶다… 이러시다면 사용하고 계시는 font awesome 빼서 버리시고, 직접 웹폰트를 작성하시는 것이 트래픽과 속도개선에 큰 도움이 되지만, 이건 꽤 귀찮은 일이라서, 랭커님 ( @ranker) 말고 다른 개발자 분들 중 이런 작업을 하시는 분들을 보지 못했습니다.
Disqus 사용은 SEO 면에서 좋은데, Disqus 로딩이 좀 늦습니다. Disqus 는 async/defer 로딩 (비동기 로딩) 해주시는게 좋습니다.
사실 다른 js 들도 async/defer 로딩 해주면 속도개선 됩니다.
css 도 critical css 로 나눠서 async 로딩 해주면 좋지만, 이건 저도 하고 싶지 않은 작업이라.. (critical css 만드는게 어려운게 아니라, 나중에 유지보수 할때 개짜증 납니다.) 그냥 HTTP/2 돌리고 css 를 BEM 식으로 적용하는게 유지보수 시 정말 좋습니다.
마지막으로 모바일 최적화를 위해서는 RESS (Responsive Design Server Side Components) 가 필연적 입니다. 워드프레스가 참 좋은게, 워드프레스는 일단 이미지를 자체적으로 RESS 하고 있고, 그래서 개발자는 template, css, js 에만 RESS 적용을 해주면 됩니다.
위에 언급한 jQuery 사용도, PC 뷰에서는 꼭 jQuery 를 써야 UI 가 가능하다, 그런상황이라면 PC뷰에서만 jQuery 를 쓰시고, 모바일뷰 에서는 jQuery 를 사용 안하시면 되거든요. 그래서 RESS 는 매우 유용하고 어떤 경우 필수적이라고 까지 볼수 있습니다.
- 답변은 로그인 후 가능합니다.