Firebug의 성능 정보가 YSlow와 모순되었습니다.

Question

저는 간단한 ASP.Net MVC3 기반 웹 응용 프로그램을 사용했습니다. 나는 최근 몇 가지 성능 튜닝을 해왔다. Mozilla에서 Firebug를 사용하여 리소스로드 크기와 타이밍을 검토했습니다. 나중에 YSlow를 사용하여 가능한 최적화를 도출했습니다.

내가있는 우리가 JS & CSS와 JS 하나의 결합 된 & CSS에 번들를 축소하세요 '& 축소를 번들 '의 일반적인 최적화 개념에 초점을 좁힐 싶습니다. YSlow에 따르면 추가 서버 요청과 일부 대역폭/시간을 절약 할 수 있습니다. 그러나, 나의 경우에는 모순된다! SquishIt lib을 사용하고 있습니다.

바로 여기에 내 통계 (PLS 첨부 된 이미지를 검토)

이

Old Login page: Requests(10), Size(434), Load Time in seconds(29), YSlow grade C(78) 
New Login page: Requests(6), Size(414), Load Time in seconds(42), YSlow grade B(88) 

오래된 원본 페이지 - 이상적으로

이 반전되어 있어야합니다 - 여기 새로운 최적화 된 페이지입니다 !하지만 결합 된 js 파일이 인 것처럼 보입니다. 정확한 차이를 얻으려면 대역폭을 줄였습니다. 두 페이지에 공정한 기회가 보장되도록 캐시되지 않은 상태에서도 테스트했습니다 ( Ctrl + F5). 동일한 설정을 사용하는 동일한 서비 스인 에 있습니다.

참고 : Pls는 이미지에서 마지막 이미지를 다시로드를 무시 - 나는 새로 고침을했다. 하위 페이지가 캐싱 된 리소스를 갖도록 로그인 페이지에 일부 추가 jQuery 라이브러리를 미리로드합니다. 그런 일을 무시할 수는 있지만 가능하다면 알려주거나 실수를 저지르고 있습니까? 나는 (tehy가 번들로 제공 할 수없는) 내 자원에 대한 CDN 참조를 사용하고 있다면이 적용되지 믿지 - & 축소를 번들에 대한

하나 개 더 쿼리. 이 경우 무엇이 선호됩니까 - CDN 참조 또는 번들링?

Answer 1

일반적으로 나는 올바른 방향으로 가고 있다고 생각합니다. 요청 수가 적고 총 요청 크기가 작을수록 사용자의 성능이 향상됩니다. 당신의 테스트 결과에서

, 난 당신이 몇 가지를보고 있다고 생각 :

1. 한 가지 단점 큰 결합 된 파일을 사용하여 병렬 다운로드의 몇 가지 이점을 잃게됩니다. 나는 이것이 귀하의 경우에 주요 기여자라고 생각하지 않지만, 원래의 경우 많은 jquery JS 파일이 병렬로 다운로드되고 있음을 알 수 있습니다.
2. 전체 페이지 시간로드는 네트워크 속도 및 서버로드에 따라 실행마다 다를 수 있습니다. 원래의 경우, jquery-ui 파일은 222KB이고 약 8KB/s의 경우 27.8 초가 걸렸습니다. 최적화 된 페이지에서 새로 결합 된 JS는 254KB 였고 6.2KB/s의 속도로 41 초가 걸렸습니다. 이것은 매우 거친 수학이지만, 여러분이 보았던 차이점에 대한 단서를 줄 수도 있습니다.

사이트는 공용 인터넷에서 사용할 수있는 경우, 외부 서버 (여러 위치)에서 일부 측정을 실행하는 WebPageTest 또는 GTmetrix 같은 도구를 사용할 수 있습니다.

CDN 대 번들링에 대한 궁금증에 따라 궁극적으로 어떤 프로토 타입을 테스트하여 어떤 것이 더 잘 작동하는지 확인할 수 있습니다. 하나의 옵션은 CDN에서 jQuery를 가져 오는 것과 같이 드물게 많이 바뀌는 파일이 있고 사용자의 모든 JS가 서버에서 호스트됩니다 (번들로 제공).

정적 파일의 CDN 호스팅에 대해 염두에 두어야 할 점 중 하나는 지리적으로 분산 된 사용자 기반이있을 때 가장 큰 이점이 있다는 것입니다. 그런 다음 글로벌 CDN 네트워크를 활용할 수 있습니다.이 CDN 네트워크는 더 가까운 서버에서 정적 파일을 제공받으며 (따라서 더 빠름) 반대로 사용자 기반이 전 세계에 퍼져 있지 않거나 내부 응용 프로그램 인 경우 CDN을 사용하면 많은 이점이 없을 수 있습니다.