Skip to content
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

Jump to bottom

최적화 #64

Open
junhobaik opened this issue Jul 20, 2020 · 6 comments
Open

최적화 #64

junhobaik opened this issue Jul 20, 2020 · 6 comments
Assignees
@junhobaik
Labels
Improvement

Comments

@junhobaik
Copy link
Owner

@junhobaik junhobaik self-assigned this Jul 20, 2020
junhobaik added a commit that referenced this issue Jul 23, 2020
@junhobaik
redux, 기존 방식에서 hooks로 변경 #64
50eea39
junhobaik added a commit that referenced this issue Jul 23, 2020
@junhobaik
fontawesome config 제거, #35 #64
fb1232f 
- 기존 아이콘들이 로드시 크게 출력되는 문제로 추가했었으나 해당 코드를 제거해도 문제가 나타나지 않음에 따라 해당 코드 제거
junhobaik added a commit that referenced this issue Jul 23, 2020
@junhobaik
fontawesome config 제거, #41 #64
775c3e8 
- 기존 아이콘들이 로드시 크게 출력되는 문제로 추가했었으나 해당 코드를 제거해도 문제가 나타나지 않음에 따라 해당 코드 제거
junhobaik added a commit that referenced this issue Jul 28, 2020
@junhobaik
seo, 코드 개선 #64
da1e34c
junhobaik added a commit that referenced this issue Jul 28, 2020
@junhobaik
개발 환경 관련 수정 #64
6b9266f 
- 패키지 정리
- eslint, tsconfig 수정
junhobaik added a commit that referenced this issue Jul 28, 2020
@junhobaik
코드 개선 #64
c5819db 
- eslint 추가에 따른 수정
- config 파일명 변경에 따른 수정
- config 파일 require => import
- 불필요한 interface의 export 제거
- 불필요한 React.memo 제거 (성능 개선효과가 없고 역효과 가능성에 제거)
- ...
@junhobaik
Copy link
Owner Author

junhobaik added a commit that referenced this issue Jul 29, 2020
@junhobaik
PostList 리스트 렌더링 방식 개선 #64
a85b4f3 
기존 모든 list를 만든 후, 스타일을 이용해 숨기고 표시해주는 방식으로 인피니티 스크롤을 구현.
개선: 스타일이 아닌 렌더링 개체를 줄이는 방식으로 수정, 생성되는 DOM이 적어지는 개선 효과.

기타.
- sort 위치 수정
-  useCallback 사용
- ...
@junhobaik
Copy link
Owner Author

junhobaik commented Jul 29, 2020 •
edited
Loading

현재 레이아웃에 도입하기에는 무리라고 판단, a85b4f3 로 대신 개선

@junhobaik
Copy link
Owner Author

junhobaik commented Jul 29, 2020 •
edited
Loading

index(PostList) 페이지 개선 종료

  • a85b4f3 에서 PageSpeed Insights 점수 20점 가량 증가.
  • PageSpeed Insights의 부족한 사항은 Google Fonts 사용 및 정적 이미지 파일 관련 된 내용으로 현재 개선 불가.

@junhobaik junhobaik removed the ICE-BOX label Jul 29, 2020
junhobaik added a commit that referenced this issue Jul 29, 2020
@junhobaik
gatsby-remark-images lazy loading option 추가 #64
6a2b0bd
junhobaik added a commit that referenced this issue Jul 29, 2020
@junhobaik
Post, Comment 컴포넌트 분리 및 Lazy load 적용 #64
50b8e1a 
포스트 페이지 로드에 disqus 생성이 함께 되면서 느림,
따라서 스크롤을 하여 포스트 내용의 아래에 도달하게 된 시점에 React.lazy를 이용하여 컴포넌트를 불러오게 되는 방식으로 개선
@junhobaik
Copy link
Owner Author

junhobaik commented Jul 29, 2020 •
edited
Loading

Post 페이지,
disqus 댓글 로딩 관련 개선 사항으로 React.lazy(), Suspense 관련 구현인 50b8e1a 로,
PageSpeed Insights 점수 15~20의 향상

junhobaik added a commit that referenced this issue Jul 29, 2020
@junhobaik
Post, lodash import 개선 #64
da81456
junhobaik added a commit that referenced this issue Aug 8, 2020
@junhobaik
코드 개선 #64
e4afebb 
- useCallback, useMemo 등을 활용한 코드 개선 주
junhobaik added a commit that referenced this issue Aug 8, 2020
@junhobaik
Google Fonts, static file로 폰트 변경 등 #64
928a835 
- 정적 파일로 제공함으로 속도 향상
- font-display: swap; 를 이용 로드 중에도 텍스트가 표시되도록 수정
junhobaik added a commit that referenced this issue Aug 8, 2020
@junhobaik
gatsby-plugin-preact 설치 및 적용 #64
86a5ae9
junhobaik added a commit that referenced this issue Aug 8, 2020
@junhobaik
Layout, top 바로가기 표시 스크롤 이벤트 수정 #64
78bcaf7
@junhobaik
Copy link
Owner Author

현재 개선 상황

데스크탑 기준 점수

image

image

@seongkyu-lim
Copy link

준호님 덕분에 블로그 이쁘게 만들어서 잘 이용하고 있습니다!

wiki 영어 한국어 설명서가 반대로 링크가 걸려있네요!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@junhobaik junhobaik

Labels
Improvement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@junhobaik @seongkyu-lim