index.md

문제상황

• 순차적 리소스 요청으로 인한 병목

  1. 진입 시 font.css를 다운받음 (s3 cdn에 존재)
  2. 드롭 다운을 여는 순간 (초기 리소스 로딩 요청: 249건, 1012MB)
  3. 왜 드롭다운 열었을 때 많은 리소스 요청이 발생하나요?
  • 브라우저는 font-family가 지정된 css 스타일을 만나면 해당 폰트를 로드하려고 시도
  • 드롭 다운의 각 옵션 항목이 폰트 이름을 이용해 스타일을 지정하고 있어서, 드롭다운이 열리는 순간 브라우저는 모든 폰트를 로드하려고 함
  4. 다량의 폰트를 한 번에 다운로드 하려고 하기 때문에 당장 적용하려고 하는 폰트의 다운로드 상태가 pending

고려 사항

• 폰트 관련 자원을 불러오는 과정들이 다원화 되지 않았으면 했고, 폰트 종류 수정 시 코드 단의 수정이 없었으면 좋겠음

• dropdown의 font preview는 이미지로 보여주고, hover 혹은 click 시에 하나씩 lazy 하게 로딩하고 싶음.

  • 실제 관심이 있는 폰트에 대해서만 다운로드

• 하드코딩 된 순서를 가지고 싶지 않음

  • 리스트의 순서, 유무에 따라 확장성 있게 가져가고 싶음

  • 고려했던 사항

    • 모든 폰트 이미지를 하나의 png로 가지고 있어, 좌표값을 지정해 clipping 후 렌더하려 했음 (예시: naver home)
    
    • 위 방법은 이미지에 있는 폰트 순서에 의존적, 수정과 확장에 용이하지 않음
    • 남은 TODO : 대신 기존 png 이미지를 webp로 변환, 경량화

클릭 시 다운로드 함에 따라 발생하는 문제상황

• 자원 로드 측면
  • 동일한 리소스인데, 이벤트 발생 시 매번 로드하는게 불필요하다고 생각
  • 로컬에서 메모리에 캐싱 정보 들고 있고, 없을 때만 패치해오자
    • 클릭할 때마다 폰트 미리보기 이미지와 + 폰트 파일이 다운로드됨
      • 폰트는 주로 정보가 변하기 어려운 static 자원 → 캐싱 무방
      • 캐시 이용하자! FontFace 객체 자체를 메모리에 캐시, 한 세션동안 유지될 수 있게하자
• 사용자 경험 측면
  • 클릭 시 폰트 파일 로드를 시작, 로딩 완료까지 사용자가 어떤 상태인지 알 수 없는 이슈 발생 → 로딩 및 패칭 실패에 대해 안내할 수 있는 UI 추가

최종정리

• 첫 진입 시 리소스 로드 용량
  • 1012MB → 301KB
• 첫 진입 시 리소스 요청 건수
  • 249건 → 46건 (현재 보이는 폰트 이미지에 대해서만 요청)
• dropdown preview에는 이미지를 사용, 이미지 Lazy loading

개선 전

• 한 번에 전체 이미지를 가져오고, 일부 pending 상태가 유지된다.

  

개선 후

• 스크롤을 내릴 때마다 lazy 하게 이미지를 가져온다.

  

• 인메모리 캐싱 (캐싱된 폰트에 한해서는 다시 로드하지 않음 (네트워크 탭 참고))

  

• 로딩 / 패칭 실패 시 사용자 경험 개선