Front-End/프론트 최적화5 React Developer Tools https://jsramblings.com/how-to-check-if-your-component-rerendered-and-why/ How to check if your component rerendered - and why! If you're like me, you're probably using console.log a lot to check the React rendering lifecycle of your components 😅 When it rerendered, why - was it a setState or something else ?! - or even just to get a better handle of React fundamentals. This can jsramblings.com 2023. 7. 10. 3장 홈페이지 최적화 (2/2) [프론트엔드 성능 최적화 가이드] 체크 포인트 동영상 최적화 방법 1. 동영상 압축 2. 호환성을 고려한 태그 활용 동영상 최적화: 동영상 압축 동영상 콘텐츠 분석 동영상은 한번 요청으로 다운로드가 완성되지 않는다. : 파일 크기가 크기 때문에, 앞부분을 먼저 다운로드한 뒤 순차적으로 나머지 내용을 다운로드. 1. 동영상 압축 - 가로, 세로 사이즈 줄이기: 화질을 낮추는 작업 - 압축 방식 변경 https://www.media.io/ Media.io - Online Video, Audio, Image AI Tools Unlock the power of AI with our all-in-one online media processing tools for video, audio, and image. Perfect for content cr.. 2023. 7. 6. 3장 홈페이지 최적화 (1/2) [프론트엔드 성능 최적화 가이드] 체크포인트 1. 이미지 지연 로딩 - 뷰포트에서 보이지 않는 이미지를 나중에 다운로드 하는 방법 - 네트워크 탭으로 다운로드 순서 확인 - throttling으로 아주 느린 네트워크를 설정 (1) '이미지'를 감지하는 방법: Intersection Observer (2) callback 및 option 설정 (3) 이미지 태그의 dats-src라는 임시 속성에 이미지를 저장, observe될 때 src 속성에 대입 2. 이미지 파일 용량이 큰 기준? 웹 페이지에서 일반적으로 사용되는 이미지의 용량은 몇 십 킬로바이트(KB)에서 몇 백 킬로바이트(KB) 정도입니다. 9MB의 이미지는 네트워크로 전송하는데 많은 시간이 소요되며, 사용자의 인터넷 연결이 느릴 경우 로딩 시간이 길어지거나 이미지가 정상적으로 표.. 2023. 7. 3. 1장 블로그 서비스 최적화(2/2) [프론트엔드 성능 최적화 가이드] 지난 주 복습(지난주에 기억하지 못한 내용) FCP SI LCP TTI TBT First Large Interact block 책을 읽어나가면서 든 생각 글을 읽기 → 이 책을 읽는 목적을 다시 떠올리기 결국 최적화를 하는게 목적인데 (1) 무엇을 (2) 어떻게 해야하는지를 봐야할 것 같다. 그리고 Lighthouse에서 Oppertuntiny와 DIAGNOSTICS를 통해 최적화 가능성을 찾아야 한다. 제목이 굵은 글씨로 이번 소제목은 '병목 코드 최적화' 라는 것을 알려준다. 그래서 '병목 코드 최적화'를 하겠군. 하고 따라가다 보니 왜? '병목' 코드라는 것을 알 수 있었지? 해서 다시 처음으로 돌아왔던 것. 병목코드를 확인하자! 가 아니라, Lighthose가 어떤 DIAGNOSTICS를 제시하는.. 2023. 6. 22. CH1 블로그 서비스 (1/2) [프론트엔드 성능 최적화 가이드] 프로젝트 켜고(npm start/ npm run server), 크롬의 검사 탭 클릭 이미지 크기 확인: Elements 해당 요소 클릭 후, img의 src 요소에 마우스 올리기 실제 이미지 크기와 화면에 출력되는 이미지 크기는 다르다면, 화면에 출력되는 이미지 크기의 2배를 사용 정적(static) 이미지 API를 통해 받아오는 이미지 직접 이미지 크기 조절 CDN 활용 *CDN: Content Delivery Network로 물리적 거리를 해소 (1) 미국 서버에서 직접 다운로드 하는 대신 (2) 미국 서버를 복제한 한국 서버에서 다운로드 이미지 CDN: 이미지 리사이징, 포맷 변경 이미지 CDN 주소 예시 http://cdn.image.com?src=[img src]&width=크기&height=.. 2023. 6. 19. 이전 1 다음
