속도 최적화 배운점

[airman5573]

• css파일에 @import 로 폰트를 로딩하면 dependency tree가 생겨서 사이트 로딩이 느려진다. preconnect 를 사용해 미리 서버와 연결하고 css파일 대신 head에 link로 리소스를 불러오기 + swap을 해야 로딩이 빨라진다.
• Largest Contentful Paint 점수를 높이려면 이미지 파일 최적화를 해야한다.
• js 엔진의 짐을 덜어주기 위해 js코드는 가급적 minification 하고 불필요한 파일은 로드하지 않는다.
• http1.1 X http2/3 O. 병렬리소스 다운로드가 사용자경험에 상당히 많은 부분을 차지한다.
• 사이트 첫 진입시 viewport에 보이는 이미지는 lazyload하면 안된다. LCP점수가 떨어진다. 사용자가 불편해 한다.
• viewport밖의 iframe은 lazyload를 해야 페이지 로딩 속도가 올라간다.

이런저런 실험을 많이 했으나, 결국 pretendard를 css파일에서 import한게 속도 저하의 가장 큰 원이이었다.

[yoonminsang]

이전에 폰트를 가져올 때 @font-face를 사용한적이 있어서 이것도 문제인가? 했는데 다행히 이거는 괜찮네요.

swap을 사용하면 깜빡이는 이슈가 있을텐데 폰트별로 크기가 다른걸 대응한다던가 하는 식의 처리도 하셨나요?
이미지 파일 최적화는 어떻게 하셨나요? ex) webp, resize, cdn 등등