🚀 Start

프로젝트를 진행하며 일단 코드로 기능을 구현하고 실행시키고 에러 핸들링을 하는 것에 집중하는 시간들을 보냈다. 아직 배울 것도 많고 모르는 것들을 알아가는 것에 급급했던 시기들이라 이제는 또 한가지 빠질 수 없는 부분인 성능 최적화에 대해 공부해보려 한다.

물론, 기술들을 습득하는 것에도 한참 길을 걸어야겠지만, 이번 기회에 어떤 식으로 웹 성능을 향상시킬 수 있고, 개발자라면 기본적으로 알아야할 최적화 부분들은 무엇인지 알아보자.

🧐 Why?

그렇다면 왜 웹성능 최적화라는 것이 필요한 것일까?

다른 분들의 글을 참고해자면 크게 두가지라고 할 수 있을 것 같다.

✅ 사용시간과 수익창출과의 관계

서비스의 수익창출은 사용자의 서비스 이용시간과 비례하다. 즉, 서비스가 느려질 수록 사용자는 떠나게 되고 수익창출에도 분명 영향이 있을 것이다. 당연한 소리이겠지만 서비스 로딩 시간이 길고 버튼 클릭 한번 할 때마다 지연이 되는 서비스를 사용하고 싶은 사용자는 없을 것이다.

✅ 프론트엔드 개발자의 경쟁력

개발을 잘하는 고인물들이 많이 계신 가운데, 서비스를 개발하는 것은 기본이 되었고, 서비스를 최적화하고 성능을 향상시킬 수 있는 개발자가 경쟁력이 생길 것이다.

✔️ 브라우저 렌더링 원리

성능 최적화를 알아보기 전에 우선 브라우저가 어떻게 동작되는지 알아야할 것 같다.

1️⃣ 사용자가 브라우저에 URL 입력

2️⃣ 브라우저는 DNS를 통해 서버의 IP 주소를 찾는다

3️⃣ Client에서 HTTP request 메시지 => TCP/IP 패킷 생성 => Server로 전송

4️⃣ Server에서 HTTP request에 대한 HTTP response 메시지 => TCP/IP 패킷 생성 => Client로 전송

5️⃣ 도착한 HTTP response message는 웹 브라우저에 의해 출력(렌더링)

💡 자세히 알아보자!
👉 브라우저는 어떻게 동작하는가?
👉 브라우저 렌더링 원리

✔️ 웹 성능 결정 요소

웹 성능을 결정하는 요소는 두가지이다.

✅ 로딩 성능

• 각 리소스를 불러오는 성능

✅ 렌더링 성능

• 각 리소스를 화면에 보여주는 성능

✔️ 분석 Tool

그렇다면 웹 성능을 분석하고 검사할 수 있는 도구에는 무엇이 있을까?

👉 Network 패널을 이용한 분석

✅ 네트워크 리소스들의 상세한 정보들을 알려준다.

네트워크 패널은 자원들이 제대로 다운로드 되었는지의 여부, 캐시여부, 다운로드된 자원들의 다운도르에 걸린 시간, 세부 정보들을 보고싶을 때 유용하게 사용할 수 있는 패널이다.

👍 네트워크 패널의 경우 개발을 할 때 데이터 통신이 잘 이루어졌는지, Response, Payload 등을 확인하며 많은 도움이 됬었다.

👉 Performance 패널을 이용한 분석

✅ 웹 페이지가 동작할 때 실행도는 모든 작업을 알려준다.

퍼포먼스 패널은 초기 렌더링 속도, 애니메이션 속도, 응답 대기 시간 등을 개선하는데 사용할 수 있는 패널이다.

💡 자세히 알아보자!
👉 크롬 개발자 도구의 Performance 탭 다루기 - 기본편
👉 [프론트앤드]페이지 렌더링 성능 확인하는 방법 (웹 페이지 속도 확인하기)

👉 Lighthouse 패널을 이용한 분석

✅ Lighthouse 패널은 이제 유저 플로우 측정을 위해 3가지 모드를 지원

• Navigation 리포트는 단일 페이지 로딩을 측정합니다. Navigation은 가장 보편적인 보고 형태. 이전 버전의 모든 Lighthouse 리포트는 navigation 리포트

• Timespans 리포트는 일반적으로 유저 인터렉션을 포함한 임의의 기간을 분석

• Snapshots 리포트는 일반적으로 유저가 인터렉션한 후 특정 상태의 페이지를 분석

👉 webpack-bundle-analyzer를 이용한 분석

✅ webpack을 통해 번들링된 파일들이 무엇을 담고 있는지 한눈에 보여준다

중복된 라이브러리를 각 모듈이 포함하고 있다면 웹팩 성능 저하를 초래할 수 있기 때문이다.
webpack-bundle-analyzer를 사용하면 번들에서 어떤 요소가 얼마나 용량을 차지하는지 확인할 수 있다.

💡 자세히 알아보자!
👉 webpack-bundle-analyzer를 이용한 번들 사이즈 최적화

✔️ 텍스트 압축

최신 브라우저에서 사이트 성능을 높이기 위해서는 자원을 압축해서 전송하는 것이 좋다.
압축에는 GZIP, Deflate 방법이 있다.

👍 특히, gzip 압축 전송을 이용하면 사이트 트래픽의 대부분을 점유하는 Big 3 (자바스크립트, CSS, HTML) 요소를 크게는 90% 가까이 압축하여 전송할 수 있기 때문에 네트웍 대역폭 사용량을 크게 감소시킬 수 있다.

✅ gzip 압축을 적용하는 4가지 방법

• Apache 나 Nginx 등 Web서버에서 처리하기

• Tomcat 이나 Weblogic 등 어플리케이션 서버(Was)에서 처리하기

• Servlet Filter 를 등록하여 처리하기

• 정적인 파일을 미리 gzip 으로 압축하여 올리기

✅ 서버에서 텍스트 압축을 활성화하는 방법

Accept-Encoding: gzip, compress, br

• 서버에서는 압축하면 클라이언트에서는 해제
• 모든 파일을 압축하면 성능이 떨어짐
• 2kb 이상은 인코딩 아니면 인코딩 안하는 게 낫다.
• 라이브러리 설정 등에 적용되어 있음

// node ./node_modules/serve/bin/serve.js -u -s build", -u가 압축 취소함
// node ./node_modules/serve/bin/serve.js  --help로 보기
// >> node ./node_modules/serve/bin/serve.js -s build",
// 라이브러리 사용 아닐 경우 실제 서버 코드를 수정해야함. 웹서버 등에 적용

✅ Chrome DevTools에서 응답이 압축되었는지 확인

💡 자세히 알아보자!
👉 텍스트 압축 활성화
👉 웹사이트 성능 개선을 위한 gzip 압축 적용
👉 [WEB, 번역] Gzip 압축으로 사이트 최적화하는 방법

✔️ 이미지 사이즈 최적화

이미지는 굉장히 많은 용량을 차지하기 때문에 최적화는 필수적이다.

✅ 이미지 최적화

• 웹 페이지 바이트를 절약할 수 있어, 사이트 성능을 향상시킬 수 있다.

• 브라우저가 다운로드해야하는 바이트가 줄어들기 때문에 클라리언트의 대역폭에 여유가 생긴다.

• 콘텐츠를 더 빨리 다운로드하여 화면에 렌더링할 수 있다.

• 서버 저장공간이 적게 사용되어 비용이 절감된다.

• 구글의 SEO 순위를 결정할 때 이미지 최적화를 통해서 응답성을 빨리하여 검색 결과의 상위권에 노출될 수 있다.

✅ 이미지 최적화 방법론

• 이미지 폭을 조절하라.

• 최적화된 이미지 포맷을 사용하라.

• <img>에 width, height 값을 선언해 Reflow를 방지하라.

• 여러 버전의 이미지를 제공하라.

• 이미지 크기 조절 툴을 사용하라.

• Image CDNs을 사용하라

• CSS Sprite 기법을 사용하라.

• lazy loading을 활용하라.

✅ Image CDN을 사용하는 이유

Image CDNs(content delivery networks)는 이미지 최적화에 탁월하다. image CDN으로 전환하면 이미지 파일 크기를 40 ~ 80% 줄일 수 있다.

💡 Image CDN이란 ?
Image CDN은 이미지 변환, 최적화 및 전송을 전문으로 한다. 또한 사이트에서 사용되는 이미지에 대한 접근이나 조작을 위한 API로 생각할 수 있다.

Image CDN에서 로드된 이미지의 경우 이미지 URL은 이미지뿐만 아니라 크기, 포맷, 품질 같은 매개변수도 나타낸다. 이를 통해 다양한 사용 사례에 대한 이미지 변형을 쉽게할 수 있다.

💡 자세히 알아보자!
👉 웹 성능을 위한 이미지 최적화
👉 이미지 최적화의 모든 것, 완벽 가이드 ①
👉 이미지 CDN을 사용하여 이미지 최적화

🔗 Reference
👉 [웹성능] 웹성능 최적화가 필요한 이유와 주요 포인트
👉 실전 웹 성능 최적화 (feat. React) Part1
👉 [학습정리]프로그래밍웹 개발프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React)