<aside>
👁️ 사용자가 로딩 속도가 느린 페이지나 UX가 좋지 않은 웹사이트에서는 시간을 보내지 않고 가차 없이 떠나기 때문에 프론트엔드 개발자는 사용자에게 어플리케이션에서 원하는 것을 짧은 시간내에 제공하고 상호 작용하는 동안에는 원활한 경험을 보장하는 것을 목표로 앱을 구현해야한다.
사용자의 방문 시간을 단축하지 않도록 프론트엔드 성능을 대폭 개선하고 웹사이트 속도를 여러가지 최적화 방법에는 무엇이 있을까?
</aside>
대부분의 웹사이트들은 큰 용량의 HTML/CSS/JS 번들로 이루어져 있는데 주어진 대역폭 안에서 전달되는 데이터의 양은 한계가 있으므로 페이지가 복잡할수록 로딩시간은 더욱 길어지게 된다. 따라서, 보다 빠른 데이터 로딩을 위해 큰 용량의 코드 파일을 압축할 필요가 있다.
클라이언트에서 요청 헤더 중 하나인 Accept-Encoding: gzip 으로 서버에 요청을 보냈을 때 서버가 이를 지원한다면 해당 알고리즘으로 데이터를 압축하여 클라이언트에 데이터를 전송함
클라이언트는 응답 헤더 중 하나인 Content-Encoding: gzip으로 전달받은 데이터가 어떤 방식으로 압축되었는지 확인하고 해당 방식으로 데이터를 압축해제할 수 있음
페이지 대부분의 용량은 HTML/CSS/JS와 같은 코드데이터가 아닌 이미지 파일과 같은 미디어 파일이 차지하기 때문에 이미지의 용량을 줄이거나 요청의 수를 줄인은 것을 우선적으로 고려할 시, 사용자 경험을 빠르게 개선할 수 있다.
이미지 스프라이트
클라이언트에서 서버 요청이 증가할수록 로딩 시간은 점점 늘어난다 따라서 웹 페이지를 로드하는데 필요한 서버 요청 수를 줄이기 위해 이미지 스프라이트 기법을 사용할 수 있다. 이미지 스프라이트 기법은 여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법
ex) 네이버에 접속한 후 개발자 도구를 이용해 아이콘 컴포넌트를 살펴보면 스프라이트 이미지가 적용되어 있음을 확인할 수 있음 (background-image : url(...))
이미지 최적화를 위해 JPG,PNG 형식이 아닌 새롭게 등장한 이미지 포맷인 WebP 또는 AVIF를 사용하여 용량을 더욱 감소시킬 수 있음, WebP는 PNG와 비교해 26%용량이 감소되며 JPEG와 비교했을 때는 무려 용량의 50%가 감소되며 WebP와 비교했을 때는 20%감소함
but WebP와 AVIF 모두 비교적 최근에 등장한 이미지 포맷이기 때문에 모든 브라우저에서 호환되지 않는다
WebP : 구버전 브라우저 or Safari 브라우저에서 지원하지 않음
AVIF : Chrome,Opera 소수의 브라우저만 지원
HTML의 <picute>태그를 이용해서 각 브라우저의 호환에 맞도록 분기를 할 수 있다.
<picture>
<source srcset="logo.webp" type="image/webp">
<img src="logo.png" alt="logo">
</picture>
이렇게 HTML 태그를 작성할 시, 만약 접속한 브라우저에서 <source>태그 내의 srcset에 정의한 webP 포맷을 지원하지 않는다면 <source>태그는 무시됨, 이와 같은 속성을 이용하여 각 브라우저에 따라 이미지 포맷을 최적화 할 수 있음