#perfmatters: 퍼포먼스 닌자를 위한 도구 기술
개발 도구를 사용하는 방법을 아는 것은 성능 전문가가 되기 위한 핵심입니다. 콜트는 성능의 세 가지 핵심 요소인 네트워크, 컴퓨팅, 렌더링을 살펴보며 각 영역의 주요 문제와 이를 찾고 해결하는 데 사용할 수 있는 도구를 제공했습니다.
- 이제 데스크톱에서 즐겨 사용하는 DevTools로 Android에서 Chrome을 프로파일링할 수 있습니다.
- 성능 작업의 반복 루프는 데이터를 수집하고, 통계를 얻고, 조치를 취하는 것입니다.
- 페이지의 주요 렌더링 경로에 있는 애셋에 우선순위를 둡니다.
- 페인트칠은 피하세요. 매우 비쌉니다.
- 앱에서 중요한 시기에 메모리 급변과 코드 실행을 방지하세요.
#perfmatters: 네트워크 성능 최적화
일반적으로 네트워크 및 지연 시간은 사이트의 총 페이지 로드 시간의 70% 를 차지합니다. 이는 상당한 비율이지만 개선이 사용자에게 큰 혜택을 가져다 줄 수 있음을 의미합니다. 이 강연에서 일리아는 로드 시간을 개선할 수 있도록 Chrome의 최근 변경사항을 설명하고, 네트워크 부하를 최소한으로 유지하기 위해 환경에서 적용할 수 있는 몇 가지 변경사항을 소개합니다.
- Chrome M27에 새롭게 향상된 리소스 스케줄러가 있습니다.
- Chrome M28로 인해 SPDY 사이트가 훨씬 더 빨라졌습니다.
- Chrome의 간단한 캐시가 정비되었습니다.
- SPDY / HTTP/2.0은 전송 속도가 크게 향상되었습니다. nginx, Apache 및 Jetty (3가지만 언급)에 사용할 수 있는 성숙한 SPDY 모듈이 있습니다.
- QUIC는 UDP를 기반으로 구축된 새로운 실험용 프로토콜입니다. 초기 단계이지만 결국에는 사용자가 이길 것으로 예상됩니다.
#perfmatters: 60fps 레이아웃 및 렌더링
프로젝트에서 60fps를 달성하면 사용자 참여와 직접적인 상관관계가 있으며 성공에 매우 중요합니다. 이 강연에서 Nat과 Tom이 Chrome의 렌더링 파이프라인, 프레임 누락의 일반적인 원인과 이를 방지하는 방법에 관해 이야기했습니다.
- 프레임의 길이는 16ms입니다. 여기에는 JavaScript, 스타일 계산, 페인팅, 합성이 포함됩니다.
- 페인트는 매우 비용이 많이 듭니다. 페인트 스톰에서는 값비싼 페인트 작업을 불필요하게 반복할 수 있습니다.
- 레이어는 페인트된 요소를 캐시하는 데 사용됩니다.
- 입력 핸들러 (터치 및 마우스휠 리스너)는 응답성을 중단할 수 있습니다. 가능하면 피하는 것이 좋습니다. 최소한으로 유지할 수 없는 수준입니다.
#perfmatters: 인스턴트 모바일 웹 앱
주요 렌더링 경로란 브라우저가 페이지 페인팅을 시작하기 위해 필요한 모든 요소 (JavaScript, HTML, CSS, 이미지)를 말합니다. 특히 셀룰러 네트워크의 스마트폰과 같이 네트워크가 제한된 기기를 사용하는 사용자는 중요한 렌더링 경로에서 애셋 전달을 우선시해야 합니다. 브라이언은 Google팀이 PageSpeed Insights 웹사이트의 애셋을 식별하고 우선순위를 정하는 과정을 거쳐 로드 시간을 20초에서 1초 이상으로 단축한 과정에 대해 이야기했습니다.
- 렌더링 차단 JavaScript 및 CSS를 제거합니다.
- 표시되는 콘텐츠에 우선순위를 둡니다.
- 스크립트를 비동기식으로 로드합니다.
- 서버 측에서 초기 보기를 HTML로 렌더링하고 자바스크립트로 보강합니다.
- 렌더링 차단 CSS를 최소화합니다. 초기 표시 영역을 표시하는 데 필요한 스타일만 제공하고 나머지는 전달합니다.
- 렌더링 차단 CSS에 인라인된 대용량 데이터 URI는 렌더링 성능에 해롭습니다. 이미지 URL이 차단되지 않는 리소스를 차단하고 있습니다.