웹 성능 최적화

Visual appeal can be assessed within 50 ms, suggesting that web designers have about 50 ms to make a good first impression.

사용자가 웹사이트의 첫 인상을 결정하는데는 0.005초 밖에 걸리지 않는 다는 것.

2011년 3월 4일 발간된 Behavior & Infomation Technology에 실린 'Attention web designers: You have 50 milliseconds to make a good first impression!'의 결론입니다.

웹사이트의 컨텐츠가 아무리 좋아도 성능이 좋지 않으면 사용자의 이탈을 막을 수 없습니다.이 때문에 많은 웹사이트들은 로딩 시간을 줄이기 위해 성능 최적화를 모색합니다.

1. 웹 성능 영향 요소

• 사용자 환경 : 거주지역, 네트워크 장비, 브라우저 등
• 공급자 환경 : DNS 서버 응답 속도, 웹 서버 응답 속도, 백엔드 처리 속도, 프론트엔드 최적화 여부
• 전달환경 : 전용선, 유선망&모바일 등

2. 웹 성능 측정

1. 크롭 개발자 도구
2. Webpage Test(https://www.webpagetest.org/)
   

• 네이버 test 결과
  

3. PageSpeed Insights(https://pagespeed.web.dev)
   

• 네이버 test 결과
  

3. 프론트엔드 성능 개선 방안

1) 파일 압축하기

대부분의 웹사이트들은 큰 용량의 HTML/CSS/JS 번들로 이루어져 있는데, 페이지가 복잡할수록 로딩시간은 길어질 수밖에 없습니다.

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

• Brotli: 범용적으로 사용할 수 있는 압축 알고리즘 중 가장 높은 압축률을 가지고 있습니다. CertSimple에 따르면 Brotli를 사용했을 때 JavaScript 파일의 경우 Gzip보다 14% 더 낮은 용량으로 압축하였고 HTML와 CSS의 경우 각각 21%, 17% 더 낮은 용량으로 압축하였습니다. 하지만 IE에서 지원하지 않고 있기 때문에 만약 IE 환경 또한 고려하고 있다면 Gzip 방식으로도 컨텐츠를 제공해야 합니다.

2) CDN 이용하기

• CDN : CDN(Content Delivery Network)은 지리적으로 분산된 여러 개의 서버입니다. 웹 콘텐츠를 사용자와 가까운 곳에서 전송함으로써 전송 속도를 높입니다. 전 세계 데이터센터는 파일 복사본을 임시로 저장하는 프로세스인 캐싱을 사용합니다. 따라서 사용자는 가까운 서버를 통해 웹 활성화 디바이스 또는 브라우저에서 인터넷 콘텐츠에 빠르게 접속할 수 있습니다.
  이미지 파일을 최적화 해야할 때 이미지 CDN을 사용하면 이미지 용량의 40~80%를 절약할 수 있습니다. (Google I/O '19)
  

3) 브라우저 이미지 최적화

페이지의 대부분의 용량은 HTML/CSS/JS와 같은 코드 데이터가 아닌 이미지 파일과 같은 미디어 파일이 차지합니다.(51%) 이미지의 용량을 줄이거나 요청의 수를 줄이는 것을 우선적으로 고려하면 사용자 경험을 빠르게 개선할 수 있습니다.

• 이미지 스프라이트
  클라이언트에서 서버 요청이 증가할수록 로딩은 길어질 수 밖에 없습니다. 요청은 한 번으로 단축시키고 CSS속성으로 이미지 일정 부분을 보여주는 방식으로 이를 개선한 것이 이미지 스프라이트 입니다.
  다음과 네이버에서 페이지 내 이미지 다운로드를 누르면 아래와 같이 PNG파일이 나옵니다. 요로 개의 이미지 중 써야할 곳을 지정해 보여주는 방식으로 하고 서버 요청은 한 번만 이루어지도록 하면 로딩 속도를 개선할 수 있습니다.
  

• WebP 또는 AVIF 이미지 포맷 사용
  JPEG 또는 PNG 형식이 아닌 새롭게 등장한 이미지 포맷인 WebP 또는 AVIF를 사용하여 용량을 더욱 감소시킬 수 있습니다. WebP는 PNG와 비교해 26%, JPEG와 비교했을 땐 25-35% 용량이 감소됩니다. AVIF는 JPEG와 비교했을 때 50%, WebP와 비교했을 땐 20% 용량이 감소됩니다.그러나 최근에 등장한 이미지 포맷이므로 모든 브라우저에서 호환이 되지 않는다는 단점이 있습니다.
  HTML 태그를 이용하면 각 브라우저의 호환에 맞도록 분기를 대체할 수 있습니다.

  <picture>
    <source srcset="/media/cc0-images/surfer-240-200.jpg" media="(min-width: 800px)">
    <img src="/media/cc0-images/painted-hand-298-332.jpg" alt="" />
  </picture>

  브라우저는 picture tag의 각각의 source요소들을 고려해 가장 적합한 것을 선택합니다. 만약 적합한 것이 없을 경우엔 img 태그 src의 URL이 선택됩니다. 선택된 이미지는 img 요소에 할당되어 나타나게 됩니다. 어떤 URL을 로드할지 선택하기 위해 현재 디스플레이 디바이스의 성능과 현재 레이아웃을 고려해 source 태그의 srcset, media, type 속성들이 평가합니다.
  서포트 되는 이미지 포맷 리스트는 아래에서 찾아 볼 수 있습니다.
  https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types

참고 : https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
https://www.tandfonline.com/doi/abs/10.1080/01449290500330448
https://www.youtube.com/watch?t=1010&v=YJGCZCaIZkQ&feature=youtu.be
https://expeditedsecurity.com/blog/nginx-brotli/
https://sw-ryu.tistory.com/78