웹사이트 로드타임 얼마나 빨라야 빠른 것일까?

 

빠른 웹사이트가 유저 입장에서 좋다는 점은 누구나 다 안다. 

 

그렇다면 과연 빠르다는 건 얼마나 빨라야 빠른 것일까?

 

아마 어플의 성격과 특징에 따라 다를 것이다. 하지만 적어도 어느 정도의 기준이 있다면 좋을 텐데 말이다...

 

관련해서 좋은 글이 있어서 번역해 옮겨 본다. 

 

Website Load Time in 2021: How Fast Is Fast Enough?

 

오늘날, 빠르게 변화하는 디지털 세계에서 유저에게 빈틈없는 경험을 할 수 있는 웹사이트를 개발하는 것은 회사에게 아주 중요한 일이다. 회사들은 실시간으로 그리고 지속적으로 웹사이트의 기능을 모니터링하는 도구에 투자를 하고 있다. 

 

What Is Website Load Time?

웹사이트 로드 타임이란 웹사이트의 콘텐츠를 완전히 전달받는데 걸리는 평균 시간을 의미한다. 비록 웹사이트 로드 타임이 호스팅 서버, 송수신 bandwidth의 양, 웹페이지 디자인, 페이지 엘리먼트, 브라우저, 그리고 디바이스 등과 같이 다양한 요소에 따라 달라지지만 이상적인 웹사이트의 로드 타임은 2초를 넘지 않아야 한다. 만약 웹사이트 로드 타임이 1초에서 3초로 늘어나면 이탈률이 32퍼센트 증가한다. 빠른 웹사이트와 웹서비스는 유저 참여와 유저 전환에 도움이 된다. 회사에서는 SolarWinds나 Pingdom 등과 같이 로드 타임을 체크하는 신뢰할 수 있는 도구들을 이용한다. 

느린 로드타임의 원인과 해당 문제를 어떻게 해결할 수 있는지 살펴보자. 

 

JavaScript Issues

비록 자바스크립트와 제이쿼리 플러그인이 다이내믹하고 상호호환적인 웹 페이지를 만드는 데 사용되지만 이는 로딩하고 해석하고 실행하는 데에 많은 시간이 소요된다. 웹사이트의 로딩을 빠르게 하기 위해서 개발팀은 정기적으로 자바스크립트 데이터를 체크해 느리게 작동되거나 반복적인 데이터가 제거되도록 해야 한다. 다른 웹사이트 콘텐츠와 병행적으로 코드가 실행되도록 비동기적으로 콘텐츠가 로딩되어야 한다. 

 

Unoptimized Image Content

웹사이트가 느리게 로딩되는 가장 주요한 이유중 하나로 최적화되지 않은 이미지가 있다. 크고 고화질의 이미지를 업로드하기 위해선 웹페이지에서 더 많은 bandwidth를 필요로 한다. 이미지 포맷 또한 페이지 속도를 체크하면서 고려해 보아야 할 부분이다. PNG나 GIF 이미지 포맷은 웹사이트를 느리게 만든다. 

 

개발자, 마케터, 그리고 비즈니스 오너는 웹사이트 이미지 파일을 체크해 그것이 1MB를 넘지않도록 해야 한다. PNG나 GIF를 사용하기보다는 더욱 작고 더 빨리 웹페이지에 로드할 수 있는 JPEG을 사용할 수 있다. 이미지 크기를 재기 위해 waterfall 차트를 사용할 수 있다. 

 

Multiple HTTP Requests

사용자가 웹사이트를 방문할 때, 브라우저는 웹사이트 컨텐츠에 접근하기 위해 다수의 HTTP 요청을 보낸다. 하지만 만약 웹사이트가 너무 많은 이미지, CSS, 그리고 자바스크립트를 가지고 있다면, 그러한 요청을 하는데 시간이 더욱 오래 걸리고, 웹페이지의 로딩 스피드를 떨어트린다. 웹사이트의 로드 타임과 bandwidth 사용을 줄이기 위해 자바스크립트와 CSS 파일의 사용을 최소화하라. 

 

Excessive Flash Content

오디오, 이미지, 비디오, 그리고 애니메이션 등과 같은 Flash 콘텐츠는 웹사이트를 더욱 상호작용적이고 인상깊게 만든다. 여러 가지 이점에도 불구하고, Flash 콘텐츠는 크기 때문에 웹사이트의 속도를 떨어트린다. 웹사이트의 로딩 시간을 향상하기 위해 개발자는 Flash 콘텐츠의 사이즈를 최소화하거나 완전히 없애거나 HTML로 대체할 수 있다. 

 

Ignoring Caching Techniques

개발팀은 시간을 아끼고 웹사이트의 퍼포먼스 향상을 위해 캐싱을 이용해야 한다. 캐시는 일시적으로 데이터를 저장한다. 같은 콘텐츠에 대한 반복된 요청을 처리할 때 데이터 수신 과정을 쉽고 빠르게 하는데 도움이 된다. 개발팀은 여러가지 다른 종류의 캐싱을 실행할 수 있다. 예를 들어 data, output, distributed 캐싱 등을 성능 향상에 이용할 수 있다. 

 

Unclean Code

과도한 공백, 빈 줄, 불필요한 코멘트, 인라인 스타일 코딩은 웹사이트의 스타일시트를 크게 만든다. 개발팀은 이러한 요소들을 제거하는 도구를 사용하거나, 파일 크기를 줄이거나 웹사이트 로딩 시간을 향상시키기 위해 코드를 압축할 수 있다. 이러한 과정을 minification이라고 한다. 추가로, 다량의 CSS 스타일시트를 생성하는 것을 피해라. 이렇게 하면 적은 HTTP 요청이 이루어지고 웹사이트의 로딩을 빠르게 할 수 있다. 

 

Not Using Compression

이미지, CSS, 그리고 자바스크립트는 웹사이트의 필수적인 요소다. 이것들을 완전히 없앨 순 없다. 대신, 이것들을 GZIP 압축기를 사용해 빠르기 네트워크로 전송할 수 있다. GZIP 압축기는 웹사이트의 로딩을 빠르게 하도록 요청 브라우저에 보내는 데이터 크기를 줄이는데 표준적으로 사용된다. 

 

Pingdom: Monitor Website Load Time and Performance Metrics

Pingdom은 웹사이트의 성능과 사용성에 대해 알림을 주고 인사이트를 제공하기위해 만들어진 웹사이트 모니터링 도구다. 이 도구는 최종 사용자에게 빈틈없는 웹 경험을 주기 위해 사용된다. Pingdom을 이용하면 개발팀은 빠르게 파일 사이즈, 로딩 타임, 그리고 다른 엘리먼트의 자세한 부분 등을 확인할 수 있어 느린 로딩 속도의 원인을 찾는데 도움이 된다. 이 도구는 어떻게 페이지가 로드되는지 이해할 수 있도록 매 500 밀리세컨즈마다 웹사이트의 엘리먼트를 캡처하는 flimstip과 timeline metrics와 같은 고급 기능을 제공한다. 추가로, 이 도구를 이용하면 100개의 세계 곳곳의 서버에서 로딩 타임을 체크할 수 있다. 그리고 고객 만족을 매기기 위해 첫 byte, 로딩 시간, 그리고 Apdex 점수와 같이 퍼포먼스 등급이나 퍼포먼스 분석을 설정할 수 있다. 추가로, 이 도구는 사용자 경험을 모니터링 지속적으로 할 수 있도록 사용자 인터렉션 시뮬레이션을 제공한다.