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