Skip to content

[성능 베이스캠프 미션] 병민(윤병인) 미션 제출합니다. #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lokba merged 32 commits into from
Sep 7, 2022
Merged

[성능 베이스캠프 미션] 병민(윤병인) 미션 제출합니다. #39

Show file tree
Hide file tree
Changes from 23 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
08bb90f
save
airman5573 Sep 2, 2022
de7d9ee
이미지 용량을 줄였다
airman5573 Sep 2, 2022
a5d9140
이미지 확장자명 변경
airman5573 Sep 2, 2022
b288088
검색 페이지 lazy loading 적용
airman5573 Sep 2, 2022
8854693
aggresive webpack plugin 적용
airman5573 Sep 2, 2022
f537499
css를 파일로 추출한다
airman5573 Sep 2, 2022
1866a85
cursor 성능 개선
airman5573 Sep 2, 2022
20d92db
css 압축 적용
airman5573 Sep 2, 2022
280b570
input을 비제어 컴포넌트로 변경한다
airman5573 Sep 2, 2022
6b30115
GifItem에 메모를 적용한다
airman5573 Sep 2, 2022
ab562c3
path animation 성능 개선
airman5573 Sep 2, 2022
14114d8
trending api에 cache를 적용했다
airman5573 Sep 2, 2022
e4a6d32
MemoryCache 개선
airman5573 Sep 3, 2022
804519c
api관련 미션 내용 변경
airman5573 Sep 3, 2022
c9387e5
Home도 code spliting 적용
airman5573 Sep 3, 2022
72ad55c
cache time 기본값 설정
airman5573 Sep 3, 2022
18926ae
import type 적용
airman5573 Sep 4, 2022
bc88dd1
font preload 적용
airman5573 Sep 4, 2022
0dd0d9b
사용하지 않는 플러그인 제거
airman5573 Sep 4, 2022
80edbf2
이미지 최적화
airman5573 Sep 4, 2022
ca79ac8
reflow 최소화
airman5573 Sep 4, 2022
5986c2c
사용하지 않는 코드 삭제
airman5573 Sep 4, 2022
89f1129
로그 삭제
airman5573 Sep 4, 2022
1167829
불필요한 주석 제거
airman5573 Sep 7, 2022
38b364f
Suspense 위치 이동
airman5573 Sep 7, 2022
cadfde4
2byte 절약하기
airman5573 Sep 7, 2022
c2770a8
레티나 디스플레이 대응
airman5573 Sep 7, 2022
d91ca57
빌드 파일명 수정
airman5573 Sep 7, 2022
9ca8935
분명한 네이밍 적용
airman5573 Sep 7, 2022
569dd4d
unicode-range 제거
airman5573 Sep 7, 2022
60cffe5
footer layout shift 개선
airman5573 Sep 7, 2022
c4810fb
사용하지 않는 파일 삭제
airman5573 Sep 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 34 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,43 @@
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="./public/favicon.ico" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet"
rel="preload"

@lokba lokba Sep 6, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a : 폰트를 preload하니, 확실히 FOUT에서 오는 불편함이 해소되기는 하네요.👍

질문 드리고 싶은게 있습니다.
프로젝트 상으로는, 두 개의 웹 폰트(normal, italic)를 로드하고 있습니다.
컨텐츠를 많이 보여주는 사이트인 경우, 페이지에서 다양한 웹 폰트를 사용할 수도 있다고 생각하는데요. 이 경우 웹 폰트 로드 전략은 어떻게 가져가실 건지 궁금합니다.

만약 모든 폰트를 preload하지 않는다고 한다면, preload하지 않은 폰트가 적용된 텍스트는 어떤식으로 UX를 개선할지 궁금합니다.

@airman5573 airman5573 Sep 7, 2022

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  1. 사실 가능하면 폰트를 적게 사용하는게 가장 좋긴 합니다
  2. 한글폰트인 경우에는 공원의 강의때 처럼, 갆 같은 폰트는 한글 폰트에서 제외할것 같아요
  3. 다만, textarea나 input이 있는 경우에는 간호사라는 말을 입력할때 갆을 한번 거치는데 이때 이 글자가 안보일것이기 때문에 이런 경우에는 그냥 한글 폰트 최적화 안하고 그냥 사용할것 같아요
  4. 물어보신 다양한 웹 폰트를 사용하는 경우에는 어쩔수 없이 모든 폰트를 로드할것 같아요.
  5. preload하지 않은 폰트가 적용된 텍스트가 있다면, "기존 폰트를 보여주고 로드가 되면 새로운 폰트로 갈아끼우기" 라는 전략이 있는걸로 알고 있는데, 저는 갑자기 뺙 하고 폰트가 변하는것이 사용자에게 더 안좋은 경험을 끼칠 수 있다고 생각해요. 그래서! 폰트가 로드되기 전에는 안보여주고 다 로드가 되면 그때 폰트가 나오도록 할것 같습니다 :D

혹시 록바가 생각하는 좋은 아이디어가 있나요?

@lokba lokba Sep 7, 2022 •
edited
Loading

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

폰트를 preload하니, 확실히 FOUT에서 오는 불편함이 해소되기는 하네요.👍

지금 다시보니 잘못 작성했네요~ FOUT(flash of unstyled text) -> FOIT(flash of invisible text) 였네요.

상황별로 자세하게 적어주셔서 감사합니다.
갑자기 뺙 하고 폰트가 변하는것이 사용자에게 더 안좋은 경험을 끼칠 수 있다고 생각해요.
저도 공감합니다. 폰트 관련해서 기술 블로그를 보다가 좋은 라이브러리가 존재하더라고요.
Font Face Observer라는 라이브러리인데, 해당 라이브러리를 사용하면 웹 폰트가 로드가 완료되는 시점을 파악할 수 있어요.

const font = new FontFaceObserver('Josefin Sans');
const headRef = useRef<HTMLHeadingElement>(null);

useEffect(() => {
   font.load().then(function () {
      // 폰트가 로드 완료되는 시점
      headRef.current?.classList.add('font-loaded');
    });
}, []);

return (
   <h1 ref={titleRef}>memegle</h1>
);

폰트가 로드가 완료되었을 경우, 해당 DOM 요소에 class를 주고
font-loaded가 되었을 때 스무스하게 폰트가 적용되는 transition을 적용하면 갑자기 뺙 하고 폰트가 변하지는 않을 것 같네요.

관련 블로그

href="static/josefin-sans-400-700-normal.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"

@lokba lokba Sep 6, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a : 하나 배워갑니다.

스크린샷 2022-09-07 오전 1 49 26

정말 crossorigin 속성을 제거하니, 브라우저에서 2번 폰트를 요청하게 되네요. 폰트 하나를 적용하는데도 신경 많이 쓴것이 코드에서 보이네요.

관련 포스트

/>
<link
rel="preload"
href="static/josefin-sans-400-700-italic.woff2"
as="font"
type="font/woff2"
crossorigin="anonymous"
/>
<style>
/* font */

@lokba lokba Sep 6, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

r : 불필요한 주석이라고 생각합니다. @font-face로 충분히 작성자에게 정보를 제공한다고 생각합니다. 어떻게 생각하시나요?

@airman5573 airman5573 Sep 7, 2022

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

동의합니다! 👍

@airman5573 airman5573 Sep 7, 2022

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수정했습니다 :D

1167829

@font-face {
font-family: 'Josefin Sans';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(static/josefin-sans-400-700-normal.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,

@lokba lokba Sep 6, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a : unicode range...까지 적용하셨네요.😎
제 생각에는 유의미한 효과는 못봤을 것 같은데, 적용한 이유가 궁금합니다.

@airman5573 airman5573 Sep 7, 2022

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

제가 설정한것은 아니고 구글에서 설정한것을 그대로 복붙한겁니다 ㅎㅎ
그런데 생각해보니 저는 어차피 preload를 했기 때문에 폰트를 쓰던 안쓰던 불러는 올것 같네요!
지워도 될것 같습니다 :D

sc_ 303

https://stackoverflow.com/a/65424718/9279003

@airman5573 airman5573 Sep 7, 2022

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수정했습니다 :D
569dd4d

@lokba lokba Sep 7, 2022

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인했습니다~

U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Josefin Sans';
font-style: italic;
font-weight: 400 700;
font-display: swap;
src: url(static/josefin-sans-400-700-italic.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
<title>memegle - gif search engine for you</title>
</head>

Expand Down
Loading