웹 최적화(Optimization)

Make it work, Make it right, Make it fast 
Kent Beck

웹 최적화는 중요하지만, 우선순위가 떨어집니다. 

하지만 왜 중요할까요?

1. 사용자 경험이 좋아집니다.

2. 면접문제에서 많이 나옵니다.

 

성능 측정의 척도

---

1. 올바르게 동작하게 만든다 : 메모리, 네트워크 트래픽(벡엔드)과 같은 자원을 효과적으로 사용한다.

2. 빠르게 동작하게 만든다 : 시간과 긴밀한 관계가 있다. (빠르게 동작하는것처럼 보이는 것도 중요)

 

시간

---

초기 구동 시간: 초기에 애플리케이션이 로드 되는 시간

계산 시간: 동일한 계산을 얼마나 빠르게 수행하는가

반응 시간: 사용자의 행동에 얼마나 빠르게 반응하는가

 

초기 구동 시간

대기 시간을 40%줄였더니 트래픽과 가입 수가 15% 늘었다.

로드 시간을 줄였더니 전환율, 세션당 페이지 수등이 늘었다.

 

즉, 여러 연구결과 웹최적화는 비즈니스 성과에 직접적인 상관관계에 있다.

 

1. 다운로드 해야 하는 파일 갯수와 용량은 작게 유지해야 합니다.

이유

- 평균 파일 개수 6개부터는 동시 다운로드가 안됨.

- 용량이 작아야 다운로드 속도가 빠름

 

해결법

- 이미지 스프라이트 기법을 적극적으로 사용.

- 가능한 최신 포맷의 이미지를 사용. (IE를 지원할 경우, 점진적 향상 기법 적용)

- 이미지 용량 최적화 툴 사용. (가급적 이미지의 사이즈는 100KB 아래로 유지)

- 최적화된 폰트 사용. 사용 전 폰트 용량 체크. 가능한 최신 포맷의 폰트 사용. 폰트는 2개 정도 사용.

(최신 포맷일수록 용량이 작음)

https://yceffort.kr/2021/06/ways-to-faster-web-fonts

@font-face{ 
	font-family:'Nanum Gothic'; 
	src:url(NanumGothic.woff) format(‘woff’);
	src:url(NanumGothic.woff2) format(‘woff2’); 
}
/* format(‘’) 값을 명시적으로 작성하면 
이 형식을 지원하는 브라우저만 글꼴을 내려받게 되어 있습니다. */

2. 최소화한 CSS,JS 파일을 사용하여 용량을 줄입니다.

3. 필요한 프레임워크와 라이브러리만 사용합니다.

4. 중요하지 않는 컨텐츠는 Lazy Loading을 적극적으로 활용합니다.

5. 지속적인 구동시간 측정하기. 

https://pagespeed.web.dev/

 

 

계산 시간

메모이제이션. 효율적이고 빠르게 계산을 수행하도록 코드를 작성. 이것은 알고리즘의 영역입니다.

 

반응 시간

사용자의 행동에 얼마나 빠르게 반응 하는가를 판단하는것이 바로 반응 시간입니다.

이 반응 시간을 줄이기 위해 우리는 브라우저의 렌더링 방식을 이해할 필요가 있습니다.

 

 

1. JS 보다는 CSS 애니메이션을 활용합니다.
   • JS로 스타일을 수정해도 결국 CSS 속성으로 업데이트 됩니다.
2. Transform 속성을 사용합니다.
3. repaint, reflow 를 유발하는 속성은 되도록 사용하지 않습니다.
   • csstriggers : css 속성 별 reflow & repaint 에 대한 정보를 참고하세요.
   • ** 브라우저별 사용 렌더링 엔진 **