[FE] 성능 개선 : Preconnect to requered origins #771
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jinhokim98
approved these changes
Oct 22, 2024
| @@ -2,8 +2,6 @@ import {css} from '@emotion/react'; | |||
|
|
|||
| // reset css -> index css | |||
| export const GlobalStyle = css` | |||
| @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); | |||
There was a problem hiding this comment.
폰트 요청 두 번 보내는 것 이상하다고 여겼는데 행디에서 문제가 있었네요. 발견 감사합니다~
Comment on lines
+35
to
+37
| <link rel="preconnect" href="https://cdn.jsdelivr.net" /> | ||
| <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" /> | ||
| <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet" /> |
There was a problem hiding this comment.
저는 index.html에 넣어서 개선하는 방식 좋은 것 같아요. 어느 페이지든 폰트는 필요하니깐요!
There was a problem hiding this comment.
혹시 인덱스에 link태그를 넣는게 문제가 될게 어떤 것들이 있나요?
There was a problem hiding this comment.
link 태그를 넣는게 문제여서 고민되었다기 보다는 대부분의 코드가 react로 작성되었기 때문에 코드 통일성을 해칠까봐 고민되었어요! 문제될만한 것들은 없습니다!
There was a problem hiding this comment.
간단하게 개선할 수 있는 방법이라 좋은 것 같아요!
대부분이 react 코드로 작성된다고 하더라도, 결국엔 index.html에서 시작되는 코드들이니까요~!
pakxe
approved these changes
Oct 22, 2024
Comment on lines
+35
to
+37
| <link rel="preconnect" href="https://cdn.jsdelivr.net" /> | ||
| <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" /> | ||
| <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet" /> |
There was a problem hiding this comment.
혹시 인덱스에 link태그를 넣는게 문제가 될게 어떤 것들이 있나요?
| @@ -2,8 +2,6 @@ import {css} from '@emotion/react'; | |||
|
|
|||
| // reset css -> index css | |||
| export const GlobalStyle = css` | |||
| @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); | |||
Todari
requested changes
Oct 23, 2024
Comment on lines
4
to
7
| export const GlobalStyle = css` | ||
| @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); | ||
|
|
||
| *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { | ||
| all: unset; | ||
| display: revert; |
There was a problem hiding this comment.
designSystem의 GlobalStyle을 한번 더 호출했던 이유는 오류가 아니라, storybook에서도 적용해 주기 위함이었어요.
storybook에서는 다른 부분의 코드를 가져오지 않기 때문에 font가 제대로 적용되지 않던 오류가 있었어요.
이부분에서 제거해 줄 거라면, .storybook 디렉토리의 파일들에서 선언해 줘도 괜찮을 것 같네요!!
There was a problem hiding this comment.
스토리북에서 폰트가 적용되지 않는 것을 확인했습니다!
수정해서 올렸어용!
Comment on lines
+35
to
+37
| <link rel="preconnect" href="https://cdn.jsdelivr.net" /> | ||
| <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" /> | ||
| <link href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" rel="stylesheet" /> |
There was a problem hiding this comment.
간단하게 개선할 수 있는 방법이라 좋은 것 같아요!
대부분이 react 코드로 작성된다고 하더라도, 결국엔 index.html에서 시작되는 코드들이니까요~!
|
변경사항 확인했습니다~! approve 🚀🚀🚀🚀 |
Todari
approved these changes
Oct 23, 2024
Merged
Todari
pushed a commit
that referenced
this pull request
Oct 23, 2024
* refactor: 성능개선 Preconnect to requered origins (font) * fix: storybook에서 pretendard 폰트가 적용되도록 스토리북 preview.tsx 수정
Todari
added a commit
that referenced
this pull request
Oct 24, 2024
* refactor: 랜딩 페이지 디렉토리 구조 변경 (#767) * refactor: 랜딩 페이지 디렉토리 구조 변경 * refactor: nav 관련 스타일 nav로 이동 * remove: 사용하지 않는 컴포넌트 제거 * style: div => section, article 태그로 변경 * style: 컴포넌트 이름 조금 더 의미있게 변경 * refactor: App을 제외한 페이지 컴포넌트 lazy loading * refactor: QueryClient가 필요하지 않은 랜딩 페이지에서 tanstack-query script 제거 * refactor: tree shaking을 deep하게 적용하기 위해 package.json에 sideEffects false 적용 * feat: prod build 파일에서 sourcemap과 license 파일 제거 * feat: 문의하기 페이지 구현 (#772) * feat: 문의하기 구글 forms 페이지 링크 연결 * fix: chromatic 에러 해결 * refactor 성능 개선 : Preconnect to requered origins (#771) * refactor: 성능개선 Preconnect to requered origins (font) * fix: storybook에서 pretendard 폰트가 적용되도록 스토리북 preview.tsx 수정 * refactor: 성능 개선 : 랜딩 페이지 이미지를 필요한 만큼만 불러오기 (#774) * feat: intersection api를 이용해서 특정 영역이 관측될 때 이미지 src를 채우는 hook 구현 * feat: useImageLazyLoading 훅 적용 * feat: 이미지 alt 값을 한국말로 변경 * fix: feature4,5 이미지를 4 불러올 때 한 번에 불러오는 방식으로 변경 * feat: threshold를 0.1에서 0.05로 조금 더 빨리 불러오도록 변경 * feat: alt 행댕이를 행댕이 - 행동대장 마스코트 라고 자세하게 설명 * feat: threshold default value 0.1 -> 0.05로 변경 * feat: 0.1 -> 0.05 놓친 부분 수정 * refactor: 성능 개선 : Kakao script를 필요한 곳에서 다운로드 받기 (#776) * feat: Kakao script 동적으로 불러올 수 있는 함수 작성 * feat: 드롭다운 버튼 베이스 onClick 메서드 추가 * feat: 모바일 환경에서 초대버튼 눌렀을 때 카카오 스크립트를 불러오도록 설정 * feat: KakaoInitializer 제거 * refactor: v2.1.1에서 구현한 랜딩페이지 개선 (#777) * feat: 랜딩페이지 개선 * fix: 첫 스크롤이 이상하게 되던 오류 수정 * design: image가 꽉차게 보이도록 변경 * move: CreatorSection 파일 위치 변경 * fix: IOS 환경에서 svg 렌더를 위해 object tag 로 변경 * fix: import 잘못된 오류 수정 * style: lint 적용 * fix: `useMainPageYScroll.ts`를 FeatureSection 내부에서 호출하도록 변경 * refactor: avatar style 분ㄹ * fix: avatar를 button이 아니라 a태그로 감싸도록 변경 * style: lint 적용 및 사용하지 않는 주석과 코드 제거 * refactor: Avatar 부분 리스트 렌더링으로 변경 * style: fix 적용 * fix: object tag에 alt property 제거 * fix: 이벤트 홈 페이지에 있을 땐 토큰이 있어도 지출 상세로 접근 불가하도록 수정 (#781) * fix: cypress에서는 sideEffects를 tree shaking하지 않음 * refactor: 성능 개선 : Serve images in next-gen formats (#784) * feat: 랜딩페이지 개선 * fix: 첫 스크롤이 이상하게 되던 오류 수정 * design: image가 꽉차게 보이도록 변경 * move: CreatorSection 파일 위치 변경 * fix: IOS 환경에서 svg 렌더를 위해 object tag 로 변경 * fix: import 잘못된 오류 수정 * style: lint 적용 * chore: webp포맷의 이미지 추가 * chore: webp타입 추가 * feat: 이미지 호스팅 경로를 생성하는 함수 구현 * feat: src, fallbackSrc를 지정해 대체 이미지를 보여줄 수 있는 Image 컴포넌트 구현 * feat: Image컴포넌트를 사용해 이미지를 불러오도록 수정 * feat: Avatar 컴포넌트에서 이미지 경량화를 위한 Image 컴포넌트를 사용 * chore: 사용하지 않고있는 토스 아이콘 제거 * feat: 용량 큰 이미지를 사용하는 곳에선 webp이미지를 사용하도록 수정 * feat: 이미지 경로를 받아오는 함수가 svg포맷도 받아들일 수 있도록 수정 * fix: 이미지 크기가 넘쳐버리지 않도록 width 속성 추가 * feat: 은행 목록 이미지를 webp로 이미지 호스팅 서버에서 가져오도록 수정 * chore: 사용하지 않는 이미지 제거 * feat: 흔듯콘을 webp로 불러오도록 함 * fix: 흔듯콘에 width부여 * design: 행동개시 행댕이의 크기가 너무 커지지 않도록 maxWidth 속성 추가 --------- Co-authored-by: 이태훈 <[email protected]> * feat: QR코드로 초대하기 기능 추가 (#783) * fix: DropDown에 Tap 글씨가 위에 있는 에러 수정 * feat: QR코드로 초대하기 페이지 디자인 구현 및 navigate 추가 * feat: qrcode.react 라이브러리를 활용하여 행사 접속 QR코드 생성 구현 * feat: 데스크탑 초대하기를 DropDown으로 변경하여 QR코드 초대 기능 추가하기 --------- Co-authored-by: Soyeon Choe <[email protected]> Co-authored-by: TaehunLee <[email protected]> Co-authored-by: Pakxe <[email protected]> Co-authored-by: 이태훈 <[email protected]>
Todari
added a commit
that referenced
this pull request
Oct 24, 2024
* refactor: 랜딩 페이지 디렉토리 구조 변경 (#767) * refactor: 랜딩 페이지 디렉토리 구조 변경 * refactor: nav 관련 스타일 nav로 이동 * remove: 사용하지 않는 컴포넌트 제거 * style: div => section, article 태그로 변경 * style: 컴포넌트 이름 조금 더 의미있게 변경 * refactor: App을 제외한 페이지 컴포넌트 lazy loading * refactor: QueryClient가 필요하지 않은 랜딩 페이지에서 tanstack-query script 제거 * refactor: tree shaking을 deep하게 적용하기 위해 package.json에 sideEffects false 적용 * feat: prod build 파일에서 sourcemap과 license 파일 제거 * feat: 문의하기 페이지 구현 (#772) * feat: 문의하기 구글 forms 페이지 링크 연결 * fix: chromatic 에러 해결 * refactor 성능 개선 : Preconnect to requered origins (#771) * refactor: 성능개선 Preconnect to requered origins (font) * fix: storybook에서 pretendard 폰트가 적용되도록 스토리북 preview.tsx 수정 * refactor: 성능 개선 : 랜딩 페이지 이미지를 필요한 만큼만 불러오기 (#774) * feat: intersection api를 이용해서 특정 영역이 관측될 때 이미지 src를 채우는 hook 구현 * feat: useImageLazyLoading 훅 적용 * feat: 이미지 alt 값을 한국말로 변경 * fix: feature4,5 이미지를 4 불러올 때 한 번에 불러오는 방식으로 변경 * feat: threshold를 0.1에서 0.05로 조금 더 빨리 불러오도록 변경 * feat: alt 행댕이를 행댕이 - 행동대장 마스코트 라고 자세하게 설명 * feat: threshold default value 0.1 -> 0.05로 변경 * feat: 0.1 -> 0.05 놓친 부분 수정 * refactor: 성능 개선 : Kakao script를 필요한 곳에서 다운로드 받기 (#776) * feat: Kakao script 동적으로 불러올 수 있는 함수 작성 * feat: 드롭다운 버튼 베이스 onClick 메서드 추가 * feat: 모바일 환경에서 초대버튼 눌렀을 때 카카오 스크립트를 불러오도록 설정 * feat: KakaoInitializer 제거 * refactor: v2.1.1에서 구현한 랜딩페이지 개선 (#777) * feat: 랜딩페이지 개선 * fix: 첫 스크롤이 이상하게 되던 오류 수정 * design: image가 꽉차게 보이도록 변경 * move: CreatorSection 파일 위치 변경 * fix: IOS 환경에서 svg 렌더를 위해 object tag 로 변경 * fix: import 잘못된 오류 수정 * style: lint 적용 * fix: `useMainPageYScroll.ts`를 FeatureSection 내부에서 호출하도록 변경 * refactor: avatar style 분ㄹ * fix: avatar를 button이 아니라 a태그로 감싸도록 변경 * style: lint 적용 및 사용하지 않는 주석과 코드 제거 * refactor: Avatar 부분 리스트 렌더링으로 변경 * style: fix 적용 * fix: object tag에 alt property 제거 * fix: 이벤트 홈 페이지에 있을 땐 토큰이 있어도 지출 상세로 접근 불가하도록 수정 (#781) * fix: cypress에서는 sideEffects를 tree shaking하지 않음 * refactor: 성능 개선 : Serve images in next-gen formats (#784) * feat: 랜딩페이지 개선 * fix: 첫 스크롤이 이상하게 되던 오류 수정 * design: image가 꽉차게 보이도록 변경 * move: CreatorSection 파일 위치 변경 * fix: IOS 환경에서 svg 렌더를 위해 object tag 로 변경 * fix: import 잘못된 오류 수정 * style: lint 적용 * chore: webp포맷의 이미지 추가 * chore: webp타입 추가 * feat: 이미지 호스팅 경로를 생성하는 함수 구현 * feat: src, fallbackSrc를 지정해 대체 이미지를 보여줄 수 있는 Image 컴포넌트 구현 * feat: Image컴포넌트를 사용해 이미지를 불러오도록 수정 * feat: Avatar 컴포넌트에서 이미지 경량화를 위한 Image 컴포넌트를 사용 * chore: 사용하지 않고있는 토스 아이콘 제거 * feat: 용량 큰 이미지를 사용하는 곳에선 webp이미지를 사용하도록 수정 * feat: 이미지 경로를 받아오는 함수가 svg포맷도 받아들일 수 있도록 수정 * fix: 이미지 크기가 넘쳐버리지 않도록 width 속성 추가 * feat: 은행 목록 이미지를 webp로 이미지 호스팅 서버에서 가져오도록 수정 * chore: 사용하지 않는 이미지 제거 * feat: 흔듯콘을 webp로 불러오도록 함 * fix: 흔듯콘에 width부여 * design: 행동개시 행댕이의 크기가 너무 커지지 않도록 maxWidth 속성 추가 --------- Co-authored-by: 이태훈 <[email protected]> * feat: QR코드로 초대하기 기능 추가 (#783) * fix: DropDown에 Tap 글씨가 위에 있는 에러 수정 * feat: QR코드로 초대하기 페이지 디자인 구현 및 navigate 추가 * feat: qrcode.react 라이브러리를 활용하여 행사 접속 QR코드 생성 구현 * feat: 데스크탑 초대하기를 DropDown으로 변경하여 QR코드 초대 기능 추가하기 --------- Co-authored-by: Soyeon Choe <[email protected]> Co-authored-by: TaehunLee <[email protected]> Co-authored-by: Pakxe <[email protected]> Co-authored-by: 이태훈 <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
issue
구현 목적
lighthouse를 실행한 결과 다음과 같은 진단이 나왔습니다.
이런 진단의 이유는 우리 서비스에서 사용하는 Pretendard 폰트가 preconnect 되지 않아서 발생한 것이었습니다. 따라서 Pretendard 폰트를 preconnect하여 320ms를 절감합니다.
개선 전/후
개선 전
개선 전의 네트워크 요청을 확인해보면 Pretendard.css는 뒤늦게 다운로드 되는 것을 확인할 수 있습니다.
개선 후
개선 후의 네트워크 요청을 확인해보면 Pretendard.css는 조기에 다운로드되는 것을 확인할 수 있습니다. 추가로 lighthouse 진단에서 발생하던
필수 원본 미리 연결하기가 사라진 것을 확인할 수 있습니다.개선 방법
이전에는 GlobalStyle.ts에서 import를 통해 font link를 불러오고 있었습니다. 또한, font import는 예전 디자인 시스템 GlobalStyle.ts과 src 하위 GlobalStyle.ts, 총 2번 호출하고 있었습니다. 현재는 디자인시스템을 따로 배포하여 사용하지 않기 때문에 두 GlobalStyle.ts에서 font import를 제거했습니다.
font를 preconnect와 dns-prefetch를 하기 위해 index.html에서 직접 font link를 import 했습니다. 기존 코드들과의 통일서을 위해서 React 컴포넌트 단에서 useEffect를 활용하여 font를 import하는 방법도 존재했습니다. 아니면 React 컴포넌트에서 head 태그에 접근하기 위해서 라이브러리를 활용하는 방법도 있었습니다. 다만 font를 preconnect 하기 위해 Helmet 라이브러리와 useEffect를 사용하는 것은 효율성이 좋지 않다고 판단했습니다.
따라서 index.html에 직접 font link를 import하게 되었습니다.
논의하고 싶은 사항
사실 index.html에 직접 link 태그를 넣어서 개선해도 괜찮나.. 고민이 됐습니다. React에서 할 수 있는 방법을 하고 싶었으나.. 찾은 내용들이 너무 비효율적이라고 판단해서 결국에는 index.html에 넣었습니다.. 이 방법이 괜찮으신지.. 여러분의 의견이 궁금합니다!