'Network'에 해당되는 글 2건

  1. 2016.09.02 CPU|Network throttling
  2. 2013.07.09 IE버그와 크롬의 네트워크 우선순위

개발하다보면 내 환경은 잘되는데 성능이 느린 환경은 어떨까 궁금할 때가 있다. 그럴 때 사용하는  대표적인 도구 [WebPageTest] 가 있다.


다만, WebPageTest는 초기 로딩 성능을 주로 하고, 테스트 하는데 시간도 오래 걸리기 때문에 자주 실행해보는건 적당하지 않다. 가끔 확인이나 할 뿐. (물론 도구와 연결해서 주기적으로 할 수 있지만 바로 바로 확인해보고 싶은 경우가 많아서..)


근데 얼마 전에 크롬에서 Network throttling이란 기능이 생겼다. Network 탭에 가면 아래와 같이 Network을 조절할 수 있는 기능이 추가됐다.



거의 WebPageTest와 다르지 않게 많이 쓸 것 같은 대역폭과 레이턴시들이 존재하고 직접 상황에 맞는 설정을 추가할 수 있다.



물론 실제 환경이 아니지만 거의 비슷한 느낌을 받기 때문에 빠르게 네크워크가 안좋은 환경에서는 어떨까 확인하고 싶다면 확인해보는 것도 괜찮을 것 같다. 그리고 후진 폰에서는 인터랙션이 어떻게 동작할까? 이런 생각을 할 수 있는데 이걸 후진폰에서 직접 확인하는 방법이 좋긴 하지만, 귀찮기도 하고 빠르게 확인하기란 적절하지 않다.



이것도 최근에 크롬에서 CPU throttling이란 기능이 추가됐다. 현재는 바로 쓸 수 있는건 아니고  Setting > Experiments 에 가서 아래와 같이 활성화을 해야 한다.



그리고 타임라인 탭에 가면 Network와 같이 CPU로 throttling 할 수 있다.



직접 기기에서 보는 것과 다르긴 하지만, 써보니깐 편하게 느린 기기를 체험할 수 있다. 물론, 실제 기기랑 느린거랑은 좀 다르다.


실제 환경에서 확인하는게 더 정확하긴 하다. 하지만, 빠르게 확인하는 방법으로 이 두 기능은 꽤 괜찮은 방법이다.






Posted by 전용우
,

IE에서는 한 CSS파일에 4095개의 선택자까지만 적용되고 이후는 적용이 안된다.(링크)

그래서 네트워크비용을 줄이기 위해 CSS파일을 합치려면 최대 선택자가 4095개여야 한다.

넘는 경우에는 모두 합치고 CSS을 xhr로 가져와 적용하는 사례들도 있다.


근데 문제는 XHR은 크롬에서 리소스를 가져오는 순서중 뒤에 속한다.

(아마 타 브라우저도 비슷한것 같다.)

크롬에서 리소스를 내려받는 순서는 HTML -> CSS -> JS -> 이미지 순이다.

좀더 자세한 순서는 CachedResourceLoader.cpp(링크)에 보면 알 수 있다.


그래서 xhr은 JS을 받으면 실행하기 때문에 

link를 사용했더라면 html -> css ->  js였지만 xhr을 사용하게 되면 html -> js -> css로 되어 네트워크 비용이 감소할지 모르지만 사용자가 느끼는 체감 속도는 더 느릴 수 있다.


이런 경우는 걍 2개로 나누어서 받는게 더욱 효율적일 수 있다.

SPDY의 경우 적게는 4배에서 많게는 8배 정도 빠르다고 한다.(링크)

Posted by 전용우
,