3장 홈페이지 최적화 (2/2) [프론트엔드 성능 최적화 가이드]

프론트엔드 성능 최적화 가이드

---

체크 포인트

동영상 최적화 방법

1. 동영상 압축

2. 호환성을 고려한 <video> 태그 활용

---

동영상 최적화: 동영상 압축

동영상 콘텐츠 분석

동영상은 한번 요청으로 다운로드가 완성되지 않는다.

: 파일 크기가 크기 때문에, 앞부분을 먼저 다운로드한 뒤 순차적으로 나머지 내용을 다운로드.

 

1. 동영상 압축

 - 가로, 세로 사이즈 줄이기: 화질을 낮추는 작업

 - 압축 방식 변경

https://www.media.io/

Media.io - Online Video, Audio, Image AI Tools

확장자: WebM

Bitrate: 512Kbps

Audio: unckeck

        <video
          src={video}
          className="absolute translateX--1/2 h-screen max-w-none min-w-screen -z-1 bg-black min-w-full min-h-screen"
          autoPlay
          loop
          muted
        >

화질을 보완하는 방법

1. 패턴

2. 패턴 + 필터(blur)

css filter: blur(10px)

 

폰트 최적화

처음에 보이는 텍스트(기본 폰트)

 

폰트 적용 후

텍스트가 보이는 시점이 폰트가 다운로드 완료되는 시점보다 빨라서 생기는 현상

사용자 관점에서 문제 발생

(1) 깜빡임: 페이지가 느리다는 느낌을 주게 됨

(2) 레이아웃이 변경

 

FOUT, FOIT

FOUT: Unstyled

FOIT: invisible

FOUT(Edge브라우저): 먼저 텍스트를 보여준다. 그 후 폰트가 다운로드 되면 폰트를 적용

FOIT(크롬, 사파리, 파이어폭스): 폰트가 완전히 다운로드 되기 전에는 텍스트를 표시하지 않음

=> 크롬에서는 3초만 기다리는 FOIT

 

폰트 최적화 방법

1. 폰트 적용 시점 제어

	FOUT	FOIT
중요한 텍스트		빠르게 전달되지 않음
덜 중요한 텍스트	시선 분산

(1) CSS의 font-display 속성

auto: 브라우저 기본 값
block: FOIT(timeout =3s)
swap: FOUT
fallback:FOIT(timeout = 0.1s) // 3초 후에도 불러오지 못하는 경우 기본 폰트 유지, 이후 캐시
optional:FOIT(timeout = 0.1s)

- FOIT를 사용하는 경우, 안보이던 텍스트가 갑자기 보이면 이상하니 fade-in 애니메이션 적용(javascript)

npm install --save fontfaceobserver

---

 

const font = new FontFaceObserver("BMYEONSUNG");

function BannerVideo() {
  const [isFontLoaded, setIsFontLoaded] = useState(false);
  useEffect(() => {
    font.load(null, 20000).then(function () {
      console.log("BMYEONSUNG has loaded");
      setIsFontLoaded(true);
    });
  }, []);
  return (

 

---

      <div
        className="w-full h-full flex justify-center items-center"
        style={{
          opacity: isFontLoaded ? 1 : 0,
          transition: "opacity 0.3s ease",
        }}
      >

2. 폰트 사이즈 줄이기 == 폰트 파일 크기 줄이기

(1) 압축률이 좋은 폰트 포맷 사용

(2) 필요한 문자의 폰트만 로드

 

폰트 포맷 변경하기

파일 크기

EOT > TTF/OTF > WOFF > WOFF2

하지만, 브라우저 호환성은 역순이므로, 호환성을 생각해 구현해야 한다.

 

TTF 포맷 폰트를 WOFF/WOFF2 폰트로 변환

https://transfonter.org/

Online @font-face generator

@font-face {
  font-family: BMYEONSUNG;
  src: url("./assets/fonts/BMYEONSUNG.woff2") format("woff2"),
    url("./assets/fonts/BMYEONSUNG.woff") format("woff"),
    url("./assets/fonts/BMYEONSUNG.ttf") format("truetype");
  font-display: block;
}

우선순위가 높은 순서로 배치, 브라우저가 해당 포맷을 지원하지 않는다면 그 다음 폰트가 로드

 

서브셋 폰트 사용

모든 문자의 폰트 정보를 사용하지 않고, 사용하는 문자(일부 문자)의 폰트 정보만 가지고 있는 것

 

추가적으로, Data-URI 형태로 CSS 파일에 포함 가능

(일반적으로) App.css 파일이 로드된 후 폰트 파일을 추가로 로드

(Data-URI) Data-URI형태로 만든 후 App.css 파일에 넣어두면 별도의 네트워크 로드 없이 App.css 파일에서 폰트 사용 가능 => 파일을 문자열 형태로 변환, 문서에 인라인으로 삽입하는 것을 말함

 

하지만, App.css에 Data-URI가 포함된 만큼 App.css파일 다운 속도는 느려진다.

 

캐시 최적화

캐시: 자주 사용하는 데이터나 값을 미리 복사해 둔 임시 저장 공간 또는 저장하는 동작

매번 네트워크를 통해 불러오지 않고, 최초 한 번만 다운로드, 캐시에 저장해서 이후 요청시에는 저장해둔 파일을 사용

 

Network 패널 - 리소스 클릭 - 헤더 탭 확인: Cache-Control 헤더 확인

 

캐시 종류

(1) 메모리 캐시: 메모리에 저장(RAM)

(2) 디스크 캐시: 파일 형태로 디스크에 저장

 

단, 어떤 캐시를 사용할지는 직접 제어할 수 없다. 브라우저가 알아서 처리

Network 패널의 Size 항목에 memory cache 또는 disk cache 로 표시됨

 

Cache-Control

- no-cache: 캐시를 사용하기 전 서버에 검사 후 사용

- no-store: 캐시 사용 안함

- public: 모든 환경에서 캐시 사용 가능(기본값)

- private: 브라우저 환경에서만 캐시 사용, 외부 캐시 서버에서는 사용 불가

- max-age: 캐시 유효 시간( 만약 유효 시간이 지난 경우, 서버에 캐시된 리소스를 사용해도 되는지 다시 체크 후 유효 시간만큼 더 사용)

 

304 Not Modified: 요청된 리소스를 재 전송할 필요가 없음

 

적절한 캐시 유효 시간

리소스마다 캐시의 유효 시간이 달라져야 한다

HTML: no-cache

JavaScript, CSS: 코드가 변경되더라도, HTML만 최신 상태라면 JavaScript나 CSS 파일은 최신 리소스를 로드. 따라서 시간이 매우 길어져도 상관없다.

 

불필요한 CSS 제거

Lighthouse → Opportunities 섹션의 'Reduce unused CSS' 항목

 

Coverage 패널 확인

JavaScript 코드의 경우, 조건식 분기문이 있어, 사용되지 않는 코드가 있다고 하더라도 결국 동작(클릭등)을 하게 되면 coverage가 올라가는 경우가 있다.

 

CSS 리소스

사용하지 않는 CSS 코드 제거

PurgeCSS