네트워크 성능 최적화

사람이 사람을 만날 때 첫인상이 가장 중요하다는 연구결과는 산재해 있다. 이 첫인상을 결정하는 시간도 매우 짧다는 것도 숱한 연구결과로 알려져 있는데, 비슷하게 사용자가 웹사이트에 대한 첫인상을 결정하는 시간은 0.005초라는 결과가 있다. 사람은 첫인상을 판단할 때 사람에게 주는 시간보다 현저히 적은 시간을 웹사이트에게 할애하는데(당연한 결과다) 문제는 사용자가 첫인상을 결정하고 이 첫인상이 호의적이지 않다면 웹사이트 이용을 중지하고 떠나가 이것이 실질적인 수익으로 연결되지 않는다는 것에 있다. 이 문제는 특히 프론트엔드 개발자들에게 중요한 문제인데, 그 누구보다도 사용자들에게 "보여지는 부분" 책임지는 사람들이 그들이기 때문이다.

프론트엔드 개발자는 사용자에게 애플리케이션에서 원하는 것을 짧은 시간내에 제공하고 상호 작용하는 동안에는 원활한 경험을 보장하는 것을 목표로 앱을 구현해야만 한다. 이를 위한 프론트엔드 성능 개선과 웹사이트 속도 향상에 관한 여러가지 방법을 알아보자.

1. 파일 압축하기

오늘 날 대부분의 웹사이트들은 큰 용량의 HTML/JS/CSS 번들로 이루어져 있다. 주어진 대역폭안에서 전달되는 데이터의 양은 한계가 있으므로 페이지가 복잡할수록 로딩시간은 더욱 길어지게 된다. 따라서, 보다 빠른 데이터 로딩을 위해 큰 용량의 코드 파일을 압축할 필요가 있다. 데이터를 압축하고 다시 푸는 방식이 다소 번거롭게 느껴질 수 있지만 이는 네트워크 요청보다 빠르기 때문에 프론트엔드의 데이터 로딩 시간에 큰 차이를 만들 수 있다. 압축방법으로느 Gzip과 Brotli가 있다.

• Gzip

  • 가장 유명한 데이터 압축 및 압축해제 알고리즘으로써 모든 브라우저에서 지원하고 있다.
  • 클라이언트에서 요청 헤더 중 하나인 Accept-Encoding: gzip 으로 서버에 요청을 보냈을 때 서버가 이를 지원한다면 해당 알고리즘으로 데이터를 압축하여 클라이언트에 데이터를 전송한다. 클라이언트는 응답 헤더 중 하나인 Content-Encoding: gzip 으로 전달받은 데이터가 어떤 방식으로 압축되었는지 확인하고 해당 방식으로 데이터를 압축해제할 수 있다.

• Brotli

  • 2015년 구글에서 소개한 압축 알고리즘이며 현존하는 범용으로 사용가능한 알고리즘 중 가장 높은 압축률을 가진다.
  • Gzip보다 14% 더 낮은 용량으로 압축하였고 HTML와 CSS의 경우 각각 21%, 17% 더 낮은 용량으로 압축 가능하다고 한다.
  • 데이터를 서버에 요청할 때는 Accept-Encoding: br 로 요청할 수 있다.
  • IE에서는 지원하지 않기 때문에 IE 환경을 고려해야 한다면 따로 Gzip 방식으로도 컨텐츠를 제공해 주어야 하는 번거로움이 있다.

2. CDN(Content Delivery Network) 사용하기

CDN은 콘텐츠를 좀 더 빠르고 효율적으로 제공하기 위해 설계되었다. 네트워크 지연(latency)은 유저와 호스팅 서버간의 물리적 거리의 한계가 존재하기 때문에 발생할 수 밖에 없다. 유저와 서버의 거리가 멀다면 지연(latency) 또한 늘어나게 된다. CDN은 이를 해결하고자 세계 곳곳에 분포한 분산된 서버에 콘텐츠를 저장한다.

간단히 말해, CDN은 유저가 가까운 곳에 위치한 데이터 센터(서버)의 데이터를 가져오기 때문에 데이터가 전달되기 위해 거쳐야하는 서버의 갯수가 크게 줄어들며 로딩 속도가 빨라진다.

CDN은 콘텐츠의 종류에 따라 여러 특화된 서비스들이 있다. 예를 들어 이미지 파일을 최적화 해야할 때 이미지 CDN을 사용하면 이미지 용량의 40~80%를 절약할 수 있다. 이미지가 일반적으로 페이지 용량의 대부분을 차지한다는 점을 감안할 때 이는 엄청난 로딩 속도 감소를 의미한다.

3. 브라우저 이미지 최적화하기

페이지의 대부분의 용량은 HTML/CSS/JS와 같은 코드 데이터가 아닌 이미지 파일과 같은 미디어 파일이 차지한다. 그래서 이미지의 용량을 줄이거나 요청의 수를 줄이는 것을 우선적으로 고려할 시, 사용자 경험을 빠르게 개선할 수 있다.

• 이미지 스프라이트
  클라이언트에서 서버 요청이 증가할수록 로딩 시간은 점점 늘어난다. 따라서 웹 페이지를 로드하는 데 필요한 서버 요청 수를 줄이기 위해 사용하는 방법이다. 위의 이미지와 같이 네이버는 각각의 이미지를 서버에 요청하지 않고 여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법이다.

이미지 스프라이트를 이용하면 한번의 이미지 요청으로 대부분의 개별 이미지를 사용할 수 있기 때문에 네트워크 로딩 시간을 줄일 수 있다. 또한, 많은 이미지 파일을 개별로 관리할 필요없이 특정 스프라이트 이미지 파일만을 관리하면 되므로 관리가 용이하다는 장점이 있다.

4. WebP 또는 AVIF 이미지 포맷 사용하기

이미지 최적화를 위해 전통적으로 사용하는 JPEG 또는 PNG 형식이 아닌 새롭게 등장한 이미지 포맷인 WebP 또는 AVIF를 사용하여 용량을 더욱 감소시킬 수 있다. WebP는 PNG와 비교해 26% 용량이 감소되며 JPEG와 비교했을 땐 25-35% 더 감소된다. AVIF는 JPEG와 비교했을 때 무려 용량의 50%가 감소되며 WebP와 비교했을 땐 20% 감소된다.

하지만 WebP와 AVIF 모두 비교적 최근에 등장한 이미지 포맷이기 때문에 JPEG 포맷처럼 모든 브라우저에서 호환되지 않는다는 단점이 있다. WebP의 경우 비교적 최근에 브라우저 지원이 되었으므로 구버전의 브라우저에서는 지원이 안될 수 있으며 Safari 브라우저에서도 지원하지 않는다. AVIF의 경우에는 Chrome, Opera 등 소수의 브라우저만 지원하고 있다.

다만 HTML의 <picture> 태그를 이용하면 각 브라우저의 호환에 맞도록 분기를 대체할 수 있다.

<picture>: img 요소의 다중 이미지 리소스(multiple image resources)를 위한 컨테이너를 정의할 때 사용한다.

다음과 같이 HTML 태그를 작성할 시, 만약 접속한 브라우저에서 <source>태그 내의 srcset에 정의한 WebP 포맷을 지원하지 않는다면 해당 <source> 태그는 무시된다. 이와 같은 속성을 이용하여 각 브라우저에 따라 이미지 포맷을 최적화할 수 있다.

<picture>
  <source srcset="logo.webp" type="image/webp">
  <img src="logo.png" alt="logo">
</picture>