Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

성능이 중요한 이유

웹이 더 많은 것을 하도록 추구하는 과정에서 성능이라는 흔한 문제에 직면하게 됩니다. 사이트에는 그 어느 때보다 많은 기능이 있습니다. 그러다 보니, 여러 사이트가 다양한 네트워크 조건과 기기 전반에서 높은 수준의 성능을 달성하는 데 어려움을 겪고 있습니다.

성능 문제는 다양할 수 있습니다. 가장 좋은 경우는 사용자를 아주 잠시 성가시게 하는 짧은 지연을 발생시킵니다. 가장 나쁜 경우에는 사이트에 전혀 접근할 수 없고, 사용자의 입력에 반응하지 않거나, 두 가지가 모두 일어납니다.

성능은 사용자 유지에 중요합니다.

우리는 빌드한 사이트와 사용자가 의미 있게 상호작용하기를 바랍니다. 블로그라면, 게시물을 읽을 수 있어야 합니다. 온라인 스토어라면 물건을 살 수 있어야 합니다. 소셜 네트워크라면, 서로 상호작용할 수 있어야 합니다.

성능은 모든 온라인 벤처의 성공에 중요한 역할을 담당합니다. 여기에 저성능 사이트에 비해 고성능 사이트가 얼마나 더 잘 사용자를 끌어들이고 유지하는지 보여주는 몇 가지 사례 분석이 있습니다.

낮은 성능이 비즈니스 목표에 부정적인 영향을 미친 경우에 대한 몇 가지 사례 분석은 다음과 같습니다.

위에서 인용한 것과 같은 Google의 DoubleClick에서 밝혀진 바에 따르면, 로딩에 5초가 걸리는 사이트는 그 네 배에 육박하는 19초가 걸리는 사이트에 비해 세션 길이가 70% 길고, 이탈률은 35% 낮았으며 광고 노출률은 25% 더 높은 것으로 나타났습니다. 경쟁자에 비해 나의 사이트 성능이 어떤지 대략적으로 알아보려면 Speed Scorecard 도구를 확인해 보세요.

4개의 유명한 뉴스 아웃렛의 성능을 비교한 Speed Scorecard
도구의 스크린샷.
그림 1. 미국 내 4G 네트워크 사용자의 Chrome UX Report 데이터를 이용하여 4개의 경쟁 사이트 성능을 비교한 Speed Scorecard.

전환율 향상에 중요한 성능

사용자 유지는 전환율 향상에 필수적입니다. 느린 사이트는 수익에 부정적인 영향을 미치고 그 반대도 마찬가지입니다. 다음은 성능이 비즈니스의 수익 향상(또는 하락)에 어떤 역할을 담당했는지에 대한 몇 가지 예입니다.

웹에서 비즈니스를 운영한다면 성능이 매우 중요합니다. 사이트의 사용자 환경이 빠르고 사용자 입력에 잘 반응한다면 좋은 결과를 가져다 줄 것입니다. 성능이 잠재적으로 여러분의 수익에 어떠한 영향을 미칠지 알아보려면 Impact Calculator 도구를 확인하세요.

성능이 향상되면
사이트 수익이 얼마나 증가하는지 추정한 Impact
Calculator의 스크린샷.
그림 2. Impact Calculator이 추정하는 사이트 성능 향상으로 증가하는 수익.

사용자 환경에 중요한 성능

URL로 이동할 때, 다양한 잠정 시작점에서부터 이동합니다. 연결 품질이나 사용하는 기기와 같은 여러 조건에 따라 여러분의 경험은 다른 사용자의 경험과 상당히 다를 수 있습니다.

페이지 로딩의 두 영사 슬라이드 릴
비교. 첫 번째는 느린 연결의 페이지 로딩을 보여주며,
두 번째는 빠른 연결의 페이지 로딩을 보여줍니다.
그림 3. 매우 느린 연결(위)과 빠른 연결(아래)의 페이지 로드 비교.

사이트가 로드를 시작할 때, 사용자가 콘텐츠 표시를 기다리는 일정 시간이 있습니다. 이때까지 사용자 환경이라고 할만한 것은 없습니다. 이러한 환경의 부재는 빠른 연결에서 금방 사라집니다. 반면, 느린 연결에서는 사용자가 기다려야 합니다. 사용자는 페이지 리소스가 천천히 들어오면서 더 많은 문제를 경험하게 됩니다.

성능은 좋은 사용자 환경의 근본적인 부분입니다. 사이트가 많은 코드를 담고 있으면 브라우저는 이 코드를 다운로드하기 위해 반드시 사용자 데이터 요금제에서 수 메가바이트를 이용해야 합니다. 휴대기기의 CPU 파워와 메모리에는 한계가 있습니다. 우리가 생각하기에 적은 양의 최적화되지 않은 코드에도 허덕일 수 있습니다. 이로 인해 성능이 불량해지고 반응이 없는 상태가 일어납니다. 익히 알고 있는 인간의 습성대로, 사용자는 저성능 애플리케이션을 오래 기다려주지 않고 버립니다. 사이트의 성능을 평가하는 방법을 알고 개선 기회를 찾아보려면, How to Think About Speed Tools를 확인하세요.

Lighthouse에서
보이는 페이지 성능 개요
그림 4. Lighthouse에서 보이는 페이지 성능 개요.

사람을 위한 성능

제대로 작동하지 않는 사이트나 애플리케이션은 이것을 사용하는 사람들에게 실질적인 비용을 일으킬 수도 있습니다.

모바일 사용자가 전 세계 인터넷 사용자의 커다란 부분을 차지하고 있기 때문에, 이러한 대부분의 사용자가 LTE, 4G, 3G 또는 2G 네트워크를 통해 웹에 접속한다는 것을 명심하는 것이 중요합니다. Calibre의 Ben Schwarz가 this study of real world performance에서 지적했듯이, 선불 데이터 요금제가 감소하여 인터넷 사용이 값비쌌던 곳에서도 적절한 비용으로 이용할 수 있게 되었습니다. 휴대기기와 인터넷은 더 이상 사치품이 아닙니다. 점점 더 상호 연결성이 강해지는 세상에서 이동과 제 기능을 하기에 필요한 보편적인 도구입니다.

총 페이지 크기는 적어도 2011년부터 꾸준히 증가하고 있으며, 이러한 경향은 지속되고 있는 듯 합니다. 일반적인 페이지가 더 많은 데이터를 보내면 사용자는 책정된 데이터 요금제를 더 자주 충전하게 되고, 이는 비용을 발생시킵니다.

사용자의 비용을 절약하는 것과 더불어, 가벼운 사용자 환경은 위기에 처한 사용자에게 매우 중요하다는 것이 익히 알려져 있습니다. 병원, 클리닉, 위기 센터와 같은 공공 자원은 사용자가 위기에 처했을 때 필요한 중요하고 구체적인 정보를 전달하는 온라인 리소스를 보유합니다. 힘든 상황에서 중요한 정보를 효율적으로 보여주는 데 디자인이 중요하긴 하지만, 이러한 정보를 빠르게 전달하는 것의 중요성은 몇 번을 말해도 부족합니다. 이것은 우리가 해야 할 일입니다.

나아가야 할 길

아래 목록이 감당하기 힘들어 보이지만, 사이트의 성능을 향상하기 위해 여러분이 이_모든_것을 할 필요는 없습니다. 이것은 시작점에 불과하니, 부담 갖지 마세요! 성능 향상을 위해 여러분이 하는_모든 것_은 사용자에게 도움이 될 것입니다.

전송하는 리소스에 유념하기

고성능 애플리케이션을 빌드하는 효과적인 방법은 사용자에게_어떤_ 리소스를 보내는지 감사하는 것입니다. Chrome DevTools의 네트워크 패널이 주어진 페이지에서 사용된 모든 리소스를 훌륭하게 요약하고 있지만, 이제까지 성능에 대해 고려한 적이 없다면 어디서부터 시작해야 할지 막막할 것입니다. 다음과 같은 몇 가지 제안을 드립니다.

  • UI 빌드에 Bootstrap이나 Foundation을 사용하고 있다면, 이것이 필요한지 자문해보세요. 이러한 추상성은 사이트 특정 CSS가 그림을 입력하기도 전에 브라우저가 페이지에 다운로드, 파싱, 적용해야 하는 CSS 힙을 추가합니다. FlexboxGrid는 상대적으로 적은 코드로 단순한 레이아웃과 복잡한 레이아웃을 모두 생성하는 데 탁월합니다. CSS가 리소스를 차단하는 렌더이기 때문에, CSS 프레임워크의 오버헤드는 렌더링을 크게 지연시킬 수 있습니다. 언제든지 가능하다면 불필요한 오버헤드를 삭제하는 것으로 렌더링을 빠르게 할 수 있습니다.
  • 자바스크립트 라이브러리는 편리하지만 언제나 필요한 것은 아닙니다. jQuery를 예로 들어보겠습니다. querySelectorquerySelectorAll과 같은 메서드 덕분에 요소 선택이 크게 간소화되었습니다. 이벤트 바인딩은 addEventListener를 이용하면 간편합니다. classList, setAttribute, 및 getAttribute는 클래스와 속성을 작업하는 쉬운 방법을 제공합니다. 반드시 라이브러리를 사용해야 한다면, 더 가벼운 대체재를 찾아보세요. 예를 들어, Zepto는 작은 jQuery 대체재이며, Preact는 React보다 훨씬 작은 대체재입니다.
  • 모든 웹사이트에 단일 페이지 애플리케이션(SPA)이 필요한 것은 아닙니다. SPA는 대체로 자바스크립트를 광범위하게 사용하기 때문입니다. 자바스크립트는 다운로드뿐만 아니라 파싱, 컴파일, 실행이 필요하기 때문에 바이트당 웹에서 제공하는 가장 고비용의 리소스입니다. 예를 들어, 최적화된 프런트 엔드 아키텍처를 갖춘 뉴스나 블로그 사이트는 기존의 멀티페이지 환경과 마찬가지로 잘 작동합니다. 특히 HTTP 캐싱이 적절하게 구성되었으며, 추가적으로 서비스 워커가 사용된 경우에 그러합니다.

리소스 전송 방법 유념하기

효율적인 전달은 빠른 사용자 환경을 빌드하는 데 필수적입니다.

데이터 전송량 유념하기

전송하는 데이터의_양_에 대한 몇 가지 제안이 있습니다.

성능 향상에 관한 총체적인 가이드는 the RAIL performance model에서 우리의 글을 확인해 보세요. 이 글은 로드 시간과 애플리케이션 반응성을 모두 향상하는 데 초점을 맞추고 있습니다. PRPL 패턴 가이드도 최신 단일 페이지 애플리케이션의 성능 향상을 위한 훌륭한 리소스입니다.

성능 및 사이트 를 더 빠르게 하는 방법에 대해 자세히 알아보려면, 다양한 주제에 관한 우리의 성능 문서를 둘러보세요. 계속해서 새로운 가이드를 추가하고 기존 가이드를 업데이트하고 있으니 자주 방문해 주세요!

이 리소스를 향상하고 런칭하는 데 폭넓은 의견을 제시해 주신 Addy Osmani, Jeff Posnick, Matt Gaunt, Philip Walton, Vinamrata Singal, Daniel An, Pete LePage께 특별한 감사를 드립니다.

의견

Was this page helpful?