[Front-end] 사이트의 렌더링 시간이 길어질 땐 어떤 것을 확인해봐야할까?

구글 개발자 도구 ▶ Lighthouse 에서 페이지 속도 측정을 하여 최적화 점수를 알아낼 수 있다.

www.naver.com 의 최적화 점수를 캡쳐한 사진

페이지 로드되는 속도를 빠르게 하기 위해선 개발자가 할 수 있는 일은 무엇이 있을까?

---

1. Webpack 사용

1️⃣ 파일 용량 압축

2️⃣ 모듈 번들링을 통한 파일 개수 감소

---

2. Image Lazy Loading

: 화면에 실제로 이미지가 보여져야할 때 이미지를 다운로드하여 CSS, JS보다도 먼저 다운로드하게 함.

<img loading='lazy' scr='...' />

---

3. Lazy Component

import { lazy } from 'react';

const AvatarComponent = lazy(() => import('./AvatarComponent'));

const DetailsComponent = () => (
  <div>
    <AvatarComponent />
  </div>
)

- 첫화면에 보이지 않는 컴포넌트는 나중에 다운로드하여 파일 개수 감소

---

4. 웹 폰트

1️⃣ 폰트 용량

폰트 파일의 용량이 크면 다운로드 시간이 길어질 것이고,

사용자가 폰트 적용이 된 텍스트를 보기까지의 시간이 걸릴 것이다.

웹 폰트는 대표적으로 woff2, woff, eot, ttf 등의 형식이 있는데 압축 방식이 달라 파일 용량이 다르다.

 

폰트 형식에 따른 브라우저 지원 범위는 아래 사진과 같다. (출처: https://www.w3schools.com/Css/css3_fonts.asp)

브라우저는 압축율이 가장 좋은 WOFF2 형식을 지원한다.

(예전에 IE가 있었을 시절엔 IE만 지원을 안했지만 IE가 사라졌으므로..)

 

만약 WOFF2를 지원하지 않은 브라우저가 있을 경우를 대비해서 폴백 형식을 통해 다른 형식의 폰트를 사용할 수 있게 지정할 수 있다. ex) 폴백 1회 후 WOFF 파일을 다운로드함

 

아래 예시는 용량이 작은 폰트 형식을 적용해 웹 폰트를 최적화한 예시다.

@font-face {
  font-family: NanumSquareWeb;
  src: url(NanumSquareR.woff2) format('woff2'),
       url(NanumSquareR.woff) format('woff'),
       url(NanumSquareR.ttf) format('truetype');
}

 

2️⃣ 서브셋 폰트

: 폰트 파일에서 불필요한 글자를 제거하고 사용할 글자만 남겨둔 폰트

영어 폰트는 대소문자를 포함해 72자의 글자가 필요하지만 한글 폰트는 11,172자나 된다.

'갥'이나 '갫' 등 실생활에서 거의 사용하지 않는 글자를 폰트에서 제거하고 사용할 글자만 남겨 둔 폰트가 서브셋 폰트이다.

실제로 '나눔바른고딕' 폰트 용량은 2.4MB이지만, 서브셋 폰트 용량은 586KB이다.

 

서브셋 폰트는 サブセットフォントメーカー(서브셋 폰트 메이커)를 통해 만들 수 있다.

서브셋 폰트 메이커는 일본어 프로그램이지만 아래 사이트를 참고하면 쉽게 만들 수 있다.

웹폰트 더빠르게 로드하기

 

3️⃣ FOUT 방식으로 폰트 렌더링

웹 폰트는 다운로드 전에 텍스트를 표시하지 않으면 아래 사진처럼 사용자에게 잘못된 정보를 전달할 수 있다.

 

CSSOM(CSS Object Model) 트리를 만드는 과정에서 CSS 파일에 포함된 웹 폰트 모듈을 다운로드 받기 시작하는데, 

Paint 단계에서 웹 폰트 모듈이 다운로드되지 않은 경우 화면에 그리는 것을 차단한다. 그래서 웹 폰트가 적용된 텍스트가 사용자에게 안 보일 때가 있는 것이다.

 

FOIT(Flash Of Invisible Text) 방식은 폰트 파일이 다운로드되기 전에 텍스트가 보이지 않고, 다운로드 후에 텍스트가 등장한다.

반면에 FOUT(Flash Of Unstyled Text) 방식은 폰트 파일이 다운로드 되기 전에 기본 폰트의 텍스트가 표시되고, 다운로드 후에 해당 폰트로 변경된다.

크롬은 기본적으로 FOIT 방식이기 때문에 UX 관점에서 좋지 않다.

그래서 FOUT 방식을 사용하길 권장한다.

 

아래 코드는 font-display: swap 속성을 적용하여 FOUT 방식으로 텍스트를 렌더링할 수 있는 예시이다.

@font-face {
  font-display: swap;
  font-weight: bold;
}

---

5. 이미지 최적화

1️⃣ 이미지 크기 줄이기

만약 이미지가 썸네일에 들어가는 이미지인데 사진 크기가 크다면 페이지 로드되는 속도를 느리게 할 뿐이다.

큰 이미지가 필요하지 않은 곳에 이미지가 사용된다면 크기를 가차없이 줄이자.

 

2️⃣ 이미지 형식

WebP는 최신 사파리만 지원해서 사용하지 않는게 좋다.

색깔이 많은건 JPG, 색깔이 적은건 PNG를 사용하자.

 

3️⃣ 이미지 최적화 사이트 Squoosh

아래 이미지 최적화 사이트에서 이미지 크기를 줄이거나, 형식을 변경하거나, 사진의 색상 수를 줄여 이미지 파일 크기를 줄일 수 있다.

Squoosh

 

아래 사진은 이미지 최적화 하기 전과 후 사진이다.

용량이 80.7KB였던 이미지가 파일 형식을 PNG로 변경하고 색상 수를 줄였더니

용량이 31KB로 줄어들었다.

이미지 최적화 전

이미지 최적화 후