본문 바로가기

HTML5_JS_CSS

Performance Guide RAIL 요약

지난 5월 초 라스베가스에서 열렸던 LoopConf의 세션 중 Performance Guide RAIL를 요약했다. 동영상은 여기서 볼 수 있다.



Performance

- Performance는 성공적으로 실행되는 방법의 관점에서 살펴보는 행동, 작업, 활동이다.

- 성공의 의미: 성공이란 인간 두뇌의 지각 반응이 기대하는 바를 충족시키는 것이며, 사용자에게 초점을 맞추면 다른 것들은 따라온다는 것


RAIL 성능 모델 - Response, Animation, Idle, Load


Response

- 목적: 즉각적이라고 느끼도록 100ms 내에 반응

- 반응 속도에 따른 느낌을 알 수 있는 비디오: https://www.youtube.com/watch?v=vOvQCPLkPt4 (Applied Sciences Group: High Performance Touch on YouTube)


Animation

- 목적: 16ms 마다 프레임을 갱신

- 일정한 속도를 내는 쪽이 좋은 성능을 낸다고 받아들이게 된다.

- 따라서 0.5초 동안 아무것도 안하고 나머지 0.5초 동안 16ms마다 그리는 것보다 32ms마다 지속적으로 그리는 것이 사용자에게는 더 좋다.


Idle

- 목적: 가능한 긴 유휴시간을 확보

- 100ms 이내에 즉각적으로 반응하려면 100ms보다 짧은 시간마다 메인 쓰레드가 실행될 수 있도록 해야 한다. 따라서 유휴시간은 길 수록 좋다.


Load

- 목적: 사용자가 계속 집중할 수 있도록 1000ms 이내에 인터랙티브한 내용을 노출

- 1000ms (=1s) 내에 모든 내용을 보여줘야 한다는 의미는 아님. 일부라도 노출되어야 한다.


기타

서버와 통신하는 작업동안 긴 시간을 기다려야 하므로 이 시간에 트랜지션을 이용하여 사용자에게 즉각 반응하는 모습을 보여주는 것은 좋다. 그러나 트랜지션에는 수백 ms의 긴 시간이 걸리므로 주의해야 한다.


참고자료

- 슬라이드: bit.ly/perf-rails

- https://paulbakaus.com/tutorials/performance/the-illusion-of-motion/

- speed, performance and human perception

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

- Platform Success Model Explainer : chrome, blink가 performance에 대해 생각하는 내용을 알 수 있음




반응형