사람이 사람을 만날 때 첫인상이 가장 중요하다는 연구결과는 산재해 있다. 이 첫인상을 결정하는 시간도 매우 짧다는 것도 숱한 연구결과로 알려져 있는데, 비슷하게 사용자가 웹사이트에 대한 첫인상을 결정하는 시간은 0.005초라는 결과가 있다. 사람은 첫인상을 판단할 때 사람에게 주는 시간보다 현저히 적은 시간을 웹사이트에게 할애하는데(당연한 결과다) 문제는 사용자가 첫인상을 결정하고 이 첫인상이 호의적이지 않다면 웹사이트 이용을 중지하고 떠나가 이것이 실질적인 수익으로 연결되지 않는다는 것에 있다. 이 문제는 특히 프론트엔드 개발자들에게 중요한 문제인데, 그 누구보다도 사용자들에게 "보여지는 부분" 책임지는 사람들이 그들이기 때문이다.
프론트엔드 개발자는 사용자에게 애플리케이션에서 원하는 것을 짧은 시간내에 제공하고 상호 작용하는 동안에는 원활한 경험을 보장하는 것을 목표로 앱을 구현해야만 한다. 이를 위한 프론트엔드 성능 개선과 웹사이트 속도 향상에 관한 여러가지 방법을 알아보자.
오늘 날 대부분의 웹사이트들은 큰 용량의 HTML/JS/CSS 번들로 이루어져 있다. 주어진 대역폭안에서 전달되는 데이터의 양은 한계가 있으므로 페이지가 복잡할수록 로딩시간은 더욱 길어지게 된다. 따라서, 보다 빠른 데이터 로딩을 위해 큰 용량의 코드 파일을 압축할 필요가 있다. 데이터를 압축하고 다시 푸는 방식이 다소 번거롭게 느껴질 수 있지만 이는 네트워크 요청보다 빠르기 때문에 프론트엔드의 데이터 로딩 시간에 큰 차이를 만들 수 있다. 압축방법으로느 Gzip과 Brotli가 있다.
Gzip
Brotli
CDN은 콘텐츠를 좀 더 빠르고 효율적으로 제공하기 위해 설계되었다. 네트워크 지연(latency)은 유저와 호스팅 서버간의 물리적 거리의 한계가 존재하기 때문에 발생할 수 밖에 없다. 유저와 서버의 거리가 멀다면 지연(latency) 또한 늘어나게 된다. CDN은 이를 해결하고자 세계 곳곳에 분포한 분산된 서버에 콘텐츠를 저장한다.
간단히 말해, CDN은 유저가 가까운 곳에 위치한 데이터 센터(서버)의 데이터를 가져오기 때문에 데이터가 전달되기 위해 거쳐야하는 서버의 갯수가 크게 줄어들며 로딩 속도가 빨라진다.
CDN은 콘텐츠의 종류에 따라 여러 특화된 서비스들이 있다. 예를 들어 이미지 파일을 최적화 해야할 때 이미지 CDN을 사용하면 이미지 용량의 40~80%를 절약할 수 있다. 이미지가 일반적으로 페이지 용량의 대부분을 차지한다는 점을 감안할 때 이는 엄청난 로딩 속도 감소를 의미한다.
페이지의 대부분의 용량은 HTML/CSS/JS와 같은 코드 데이터가 아닌 이미지 파일과 같은 미디어 파일이 차지한다. 그래서 이미지의 용량을 줄이거나 요청의 수를 줄이는 것을 우선적으로 고려할 시, 사용자 경험을 빠르게 개선할 수 있다.
이미지 스프라이트를 이용하면 한번의 이미지 요청으로 대부분의 개별 이미지를 사용할 수 있기 때문에 네트워크 로딩 시간을 줄일 수 있다. 또한, 많은 이미지 파일을 개별로 관리할 필요없이 특정 스프라이트 이미지 파일만을 관리하면 되므로 관리가 용이하다는 장점이 있다.
이미지 최적화를 위해 전통적으로 사용하는 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>