Web Guide체감속도로딩모바일 성능
모바일 로딩 체감속도 개선
실제로 빠른 것과 빠르게 느끼는 것은 다릅니다.
같은 시간이라도 설계에 따라 느낌이 달라집니다.
01체감의 원리
기다림의 느낌은 상황에 좌우됩니다.
반응 유무아무 반응 없으면 더 길게 느낍니다.
진행 표시얼마나 남았는지 알면 참습니다.
부분 표시일부라도 보이면 시작한 느낌.
예측 가능예상되는 대기는 견딥니다.
행동 중뭔가 하고 있으면 덜 지루합니다.
첫인상처음 화면이 늦으면 다 늦게 느낍니다.
02개선 기법
보이는 순서를 바꿉니다.
위쪽 먼저
화면에 보이는 부분을 우선 표시.
틀 미리 보여주기
내용 자리를 회색 박스로.
즉시 반응
누르면 바로 표시가 바뀝니다.
낙관적 표시
결과를 먼저 보여주고 뒤에서 처리.
미리 불러오기
다음에 갈 곳을 준비.
저화질 먼저
흐린 이미지를 먼저 보여줍니다.
03피해야 할 패턴
오히려 답답하게 만드는 것들입니다.
흰 화면 아무것도 없이 기다리게.
전체 가리기 화면 전체를 덮는 로딩.
레이아웃 밀림 늦게 뜬 요소가 자리를 밀어냅니다.
무한 로딩 언제 끝날지 모르는 표시.
중복 로딩 이미 본 것을 다시 불러옵니다.
반응 없는 버튼 눌렀는지 알 수 없습니다.
04실제와 체감
둘 다 필요합니다.
실제 속도
용량 줄이기 · 요청 수 줄이기 · 서버 응답 개선 · 근본 해결
체감 속도
표시 순서 조정 · 즉시 반응 · 진행 안내 · 보완책
CHECK POINT
□ 화면에 보이는 부분이 먼저 뜨는가
□ 로딩 중 흰 화면이 길지 않은가
□ 버튼을 누르면 즉시 반응하는가
□ 내용이 뜨면서 자리가 밀리지 않는가
□ 진행 상황을 알 수 있는가
□ 이미지가 뜨기 전 자리를 잡고 있는가
□ 실제 속도 개선도 병행하는가
□ 느린 통신 환경에서 확인했는가
#체감속도#로딩#모바일 성능#스켈레톤#즉시 반응#레이아웃 안정#UX#반응형#웹비스타#홈페이지 제작