디자이너를 위한 웹 성능 최적화 기법

“클라이언트의 재전송(redirection) 단계를 하나 줄이자 모바일 기기 사용자의 광고 진입률이 12% 증가했다.”

1

속도가 전부인 시대가 되었다. 지금 보다 더 빠른 무선망이 갖춰지자, 더 많은 정보를 전송시키기 위해서 다양한 UI/UX를 도입하게 되었다. 결론적으로 더 빠른 속도는 더 많은 데이터 로딩을 불러왔다. 빠른 네트워크는 사용자 환경을 쾌적하게 만들지 못했다. 그 결과 웹은 5G 무선망이 도래하는 이 지금 이 순간에도 ‘속도’에 집착 아니 ‘천착’한다.

따라서 속도가 모든 면에서 가장 중요한 자원이 되었고, 속도에 관해선 모두가 ‘전문가’여야 한다.

이 책은 최적화를 위한 친절하고 깔끔한 가이드를 제공한다. 그리고 책이 얇다. 들고 다니면서 읽어도 좋을만큼 가볍다. 책 제목의 ‘디자이너’란 부분은 괄호로 생략해도 좋다. 웹 개발자라면 혹은 개발에 관여하고 있는 모든 구성원에게 이 책을 추천한다. 이런 좋은 자료가 있으니 이 책에서 소개한 만큼 ‘최적화’를 적용 할 수 있을지 없을지는 팀의 역량이라 할 수 있다.(그리고 팀 역량에 관한 문제는 이 책의 가장 뒷부분에 다루고 있다)

2

이 책을 통해서 내가 배우고 느낀 것은 한 마디로 요약하면 ‘메시지’이다. 웹의 본질은 메세지를 상대방에게 정확하고 신속하게 전송해야 한다는 점이다(맥루한의 담론은 아직도 유효한 듯 하다). 속도 때문에 이미지 품질과 타협하는 것이 아니라, 이미지 품질과 타협을 하면서 까지 지켜내야 하는 ‘메시지’가 무엇인지 고민해야 한다는 점이 핵심이다. 그래서 우리는 최적화를 해야 한다. 메시지를 손상하지 않는 범위에서 최선을 다해서 속도에 집착해야 한다.

3

이 책을 읽으면서 같이 읽으면 참 좋은 기사를 하나 소개하고자 한다. 제목은 브라우저는 어떻게 동작하는가?이다. 책을 읽기 전에 읽으면 더 좋고, 다 읽은 후라도 꼭 참고해서 읽어보라 권하고 싶다.


  1. 인간은 분업과 전문화를 통해 눈부신 변화를 이루어냈다. 자신의 업무에 대해서는 깊이 있는 이해를 갖춘 전문가가 되고 상대의 업무는 존중하며 침범하지 않는 것이 미덕이 되었다. […] 이분법에 따르자면 성능은 개발자, 아름다움은 디자이너가 담당하고 있다. […] 저자는 이 상황을 타개하고 성능 개선을 이루려면 웹사이트에 관련된 모든 사람이 함께 고민해야 한다고 말하고 있다.

  2. 보통의 사용자는 2초 이내에 페이지가 보이길 기대하고, 3초가 지나면 최대 40% 사용자가 그 사이트를 떠난다. 모바일 사용자의 85%는 모바일 페이지 로딩 속도가 데스크톱에서 페이지를 로딩하는 속도와 같거나 그보다 더 빠르길 기대한다.

  3. […] 복잡한 결제 과정을 겪은 사용자의 75%가 해당 사이트에서 상품을 구매하지 않는다는 연구 결과를 밝힌 바 있다. 또한 고메즈(Gomez)사는 온라인 구매자 행동 연구를 통해 온라인 소비자의 88%는 불쾌한 경험을 한 사이트를 재방문할 가능성이 낮다는 것을 발견했다.

  4. […] 많은 에이전시들이 중요한 판매 포인트를 놓치고 있습니다ㅏ. 시각적인 부분이나 마켓팅 아이디어와 함께 얼마나 속도가 빠른 웹 사이트나 서비스를 만들어줄 수 있는지를 홍보하면 훨씬 좋은 결과를 이끌어낼 수 있습니다.

  5. 중요 렌더링 경로(Critical rendering path)를 최적화해야 한다.

  6. 웹 성능을 이야기할 때 가장 빠른 요청은 처음부터 요청하지 않는 것이다.

  7. […] 또 다른 대표적인 방법은 이미지를 CSS로 대체하는 것이다.

  8. 반응형 웹사이트를 만드는 대부분의 제작자들은 […] 페이지의 크기와 요청에 따라 사용자에게 필요한 콘텐츠를 어떻게 전달할지 결정하는 것이다.

Written on March 1, 2016