들어가기 앞서 🌱

스터디를 진행하면서 현재 1~3년 차 프론트엔드 개발자분들과 함께 스터디 교제에 관한 이야기를 나눌 수 있어서 좋았다. 또한 어떤 문제를 해결 중이거나 해결한 노하우를 공유하는데 너무 많은 것들을 깨닫는다. 기본적인 개념을 알지 못하면 어려운 문제를 해결하는 데 오래 걸릴 수 있다는 생각이 들었다. 마침 오늘 DP 문제를 풀며 bottom-up 사고를 연습하고 있는데 마찬가지라고 생각한다. 작은 문제로 나눠, 해결하다 보면 큰 문제도 당연히 해결될 것이라는 개념과 일맥상통한다고 느꼈다.

📕 결론적으로 결국 주니어 개발자에게 핵심은 기본기이다.

3-1장 정리

중요 포인트

1. 이미지 지연 로딩
2. 이미지 사이즈 최적화 : CDN을 활용하지 않고 서버에 저장된 정적 이미지를 최적화
3. 폰트 최적화

1. 이미지 지연 로딩

intersection observer를 사용해서 원하는 element가 특정 viewPort에 들어왔는지를 확인할 수 있는 객체가 있었다. 그로 인해 isintersection이 true일 때 사진을 로드하여 lazy하게 로딩할 수 있었다. 스터디를 통해 또 다른 방법을 알게 됐다. img 태그의 loading attribute를 사용할 수도 있다고 하셨다. img와 iframe 태그에 사용할 수 있고 간단하게 쓰기 좋다고 한다.

참고: 모질라 공식문서

이미지 최적화

• squoosh를 사용하여 이미지 변환

평균 7MB인 이미지들을 대략 30KB의 이미지로 최적화하였다. 1MB는 1024KB라는 것을 고려하면 약 240배 작게 만든 셈이다.

또한 webp 확장자로 이미지를 바꿀 수 있다. 이 경우에는 img 태그를 사용하지 않는 것이 좋다.

webp란?
웹을 위해 만들어진 이미지 포맷이다

참고: 나무위키

2021년 기준으로 인터넷 익스플로러를 제외한 모든 브라우저에서 호환할 수 있다고 하나, 호환성의 문제는 간간이 화두 되고 있다. 그래서 html의 image element를 사용하지 않고 picture tag를 사용한다. picture 태그는 다양한 타입의 이미지를 렌더링하는 컨테이너로 사용된다.

참고 : HTML W3C 공식문서

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

picture element는 하나 이상의 source 태그와 하나의 img 태그를 포함해야 한다.

브라우저는 개발자가 설정한 미디어 쿼리 뷰포트와 일치하는 source element를 찾고, 그에 해당하는 srcset 주소를 표시한다. 그리고 어떤 것에도 해당하지 않다면 마지막에 img element를 보여준다.

폰트 최적화

폰트의 변화로 발생하는 이 현상을 FOUT (Flash of Unstyled Text) 혹은 FOIT라고 한다.

FOUT는 Edge 브라우저에서 폰트를 로드하는 방식으로, 먼저 텍스트를 보여주고 다운로드되면 폰트를 적용하는 방식이다.

FOIT는 크롬,사파리,파이어폭스에서 로드하는 방식이며 폰트가 다운로드되기 전에 텍스트를 보여주지 않는 방식이다.

그런데 왜? 크롬인데도 불구하고 FOUT 현상이 일어나지?

크롬, 사파리, 파이어폭스에서 FOUT는 폰트의 크기가 커, 3초 이상의 로드 시간이 걸린다면, 약 1초에서 2초 사이에 텍스트가 보이고 그 위에 폰트가 덮어 씌게 됐다.

폰트 최적화 한눈에 보기

• FOUT, FOIT
  • FOUT (Flash of Unstyled Text)
  • FOIT (Flash of Invisible Text)
• 폰트 최적화 방법
  • 폰트 적용 시점 제어: font-display 설정, fade in animation
  • 폰트 사이즈 줄이기
    • 압축률 좋은 폰트 포맷 사용
    • 필요한 문자의 폰트만 로드 (서브셋 폰트)
    • data uri (base64 인코딩)

폰트 적용 시점을 제어

css의 font-display 속성을 이용하면 폰트가 적용되는 시점을 제어할 수 있다

auto: 브라우저 기본 동작
block : FOIT
swap : FOUT
fallback : FOIT (0.1s)// 3초 후, 불러오지 못하면 기본 폰트로 유지 이후 캐시
optional : FOIT (0.1s)

fallback의 경우 3초 후 폰트가 로드가 돼도 바뀌지 않고 캐시만 해둔다.

폰트 파일 크기 줄이기

1. 압축률 좋은 포맷 사용하기
2. 필요한 문자의 폰트만 사용할 것

EOT > TTF/OTF > WOFF > WOFF2

transFonter를 활용해 WOFF와 WOFF2로 변환할 수 있다.

스터디를 통해 모르고 있던 것을 알게 된 것.

1. intersection Observer (Web API)
2. 디바운스는 주로 검색에 사용되고 쓰로틀링은 주로 스크롤에 사용된다. 잊어버렸으니 다시 직접 구현해보면서 정리해보자.
3. 다국어 웹서비스에서 폰트 처리를 해본 적이 없기에 모르는 게 당연하지만, 어제 스터디들 통해 흥미가 생겨, 깊게 찾아보고 정리 예정.