프론트엔드 성능 개선 - 2

지난 번 성능 개선에 이어
1. 라이브러리 축소
2. 사용하지 않는 외부 스크립트 위치 변경
3. 글꼴 최적화
위주로 당장 개선할 수 있는 부분들을 먼저 개선하기로 했다.

최적화 과정 1

1. react-icons 최적화
   cra-bundle-analyze를 통해서 번들 사이즈를 확인한 결과 react-icons는 해당 페이지에서 사용하지도 않는데 용량의 절반을 차지하고있었다. 그래서 이 부분을 react-icons/all-files 로 대체해서 사용하는 방식으로 변경했다.(all-files에 모든 아이콘이 있는 건 아님)
2. font load 방식 변경

   1. 폰트 최적화를 위해서 용량이 작은 파일로 변경
      WOFF(Web Open Font Format) 형식과 WOFF 2.0 형식(이하 WOFF2 형식)은 압축된 폰트 형식이다. 같은 계열에 속하는 WOFF 형식과 WOFF2 형식에서는 WOFF2 형식이 30~50% 더 압축된 형식이다.
      ttf → wotf, woff2

   2. 브라우저별로 시스템 폰트를 제외하고 font-face로 폰트를 불러오는 방식을 설정할 수 있다.

      • FOUT - Internet Explorer 브라우저 처리 방식 : 웹폰트를 로드하는동안 브라우저 시스템 폰트를 보여줌.
      • FOIT - 그 외 최신 브라우저 : 웹폰트를 로드하는동안 폰트를 보여주지 않음.

      이렇게 브라우저별로 폰트를 보여주는 방식의 차이가 있기 때문에 내용의 중요성, 폰트의 중요성에 따라서 font-display 설정으로 개선할 수 있다.

      • auto - 기본 브라우저 설정에 따름.
      • block - 웹 폰트가 로딩되지 않았을 때는 텍스트를 렌더링하지 않다가(최대 3초) 웹 폰트 로딩이 완료되면 웹 폰트를 적용한다.( = FOIT)
      • swap - fallback 폰트로 먼저 글자를 렌더링하고, 웹 폰트 로딩이 완료되면 웹 폰트를 적용한다. ( = FOUT)
      • fallback - 우선 100ms 동안 텍스트가 보이지 않고, 그 후 폴백 폰트로 렌더링한다. 그 후 2s 이내에 폰트가 로딩되었다면 웹폰트를 적용한다.
      • optional - fallback 옵션과 비슷하지만 100ms 동안 텍스트가 보이지 않고 그 후 브라우저가 네트워크 상태를 파악해서 폰트를 전환한다. 이때 웹폰트 로딩이 완료되더라도 네트워크가 좋지 않으면 캐시에만 저장하고 fallback폰트를 보여준다.(다음 방문때는 웹폰트가 적용됨)

이렇게 두가지 개선을 했는데 점수가 눈에 띄게 좋아졌다.

• performance 53점 → 72점
• FCP 5.1s → 0.5s
• LCP 5.7s → 3.7s
• Speed Index 3.4s → 1.0s
  
  

Best Pracitces 추가 보완

그리고 추가적으로 Best practice에서 document.write() 함수를 사용하지 않는 것을 권장했는데, 프로젝트 기능 중 위치를 지정하는 기능이 있어서 kakao map API를 사용했다.

화면을 그릴때 document.write() 라는 함수에서 외부 스크립트를 불러온 후 화면을 그리는 작업이 있기 때문에 이 시간을 기다려야하고 외부 스크립트를 가져오기 위해서 또 다른 네트워크 왕복이 발생한다. 이 과정이 페이지 렌더링 시간에 영향을 준다.

당장 외부 스크립트에 있는 코드가 바뀌진않을 것이기 때문에 다른 방식을 고민해보았다. 대수롭지않게 index.html에 스크립트를 넣어서 요청하는 방식으로 기능을 적용했었는데 이 방식은 모든 페이지에서 접근하면(새로고침하면) 이 스크립트를 요청한게된다.
사실 회사 프로젝트에서 kakao map API를 단 한 페이지에서만 사용한다. 그렇다면 처음 화면에 진입할 때 스크립트를 사용하는 곳을 제외하고는 모든 페이지에서 콘텐츠 표시를 지연시킬 필요는 없다고 생각했고 해당 페이지에서만 스크립트를 요청하는 방식으로 개선하기로 했다.

그래서 useEffect를 사용해서 화면을 다시 그려주기로했다.
카카오 developer에서 찾아보니 목적은 비슷한 질문들이 몇 개 올라와있었다.
단순 useEffect를 사용해서 스크립트를 요청하면 document. null 이라는 오류가 발생한다.
결국에는 map을 그려주는 document가 그려지지 않은 상태에서 kakao map 함수를 쓰게 되서 문제가 생긴다고 한다..!

sdk.js 요청 → kakao.js → map 화면 그려짐 이 과정이 순차적으로 이루어져야한다는 것이다.

외부 스크립트를 불러온 뒤 스크립트가 로드되었다면 kakao map을 불러오고 이 두 작업이 완료되었을 때 화면을 렌더링하는 형식으로 변경했고 Best Pracitce가 조금 더 향상된 것을 확인할 수 있었다. (해당 페이지에서는 여전히 문제가 생기겠지만,,)

참고 ) https://developer.chrome.com/ko/docs/lighthouse/best-practices/no-document-write/
https://levelup.gitconnected.com/how-to-deal-with-document-write-in-react-and-next-js-31f0c1215e43 (document.write()를 피해야 하는 이유)

→ document.write()를 사용하면 페이지 콘텐츠 표시가 수십 초 지연될 수 있으며 연결 속도가 느린 사용자에게 특히 문제가 됩니다. 그러므로 Chrome은document.write()의 실행을 차단합니다.