전체 글52 실전으로 배우는 웹 성능 최적화 for React 강의를 듣는 이유1. Next.js로 성능 개선을 하다보니까 웬만한 건 다 Next.js가 해주는 걸 알게됐다.=> 그럼 리액트는 ?2. 리액트에서 성능개선을 하는 법을 알고싶었다.3. 네트워크 탭, 성능 탭을 잘 이용하는 법을 배우고 싶었다. 1. 프론트 성능 최적화는 두개로 나눌 수 있다.1) 로딩 성능 최적화 : 브라우저에서 리소스를 불러올 때의 성능을 최적화 한다.2) 렌더링 성능 최적화 : 화면에 요소들이 그려질 때의 성능을 최적화 한다. 2. 성능 최적화 방법들1) 로딩성능 최적화이미지 사이즈 최적화 : 이미지의 크기를 줄인다.code spilit : 해당 페이지(ex. 메인페이지)에서 당장 필요없는 코드는 나중에 불러온다.텍스트 압축 : 사용하지 않는 텍스트는 일부분만 불러온다.2) 렌더.. 2024. 7. 20. next.js 사이트 성능개선기 (1) 요약 : 1. next.js로 만든 웹사이트의 성능을 개선하려고 했다.2. next.js는 Image 태그를 사용하면 자동으로 최적화가 되는데 나는 안됐다. 어째서?3. 나는 unoptimized 옵션으로 next.js의 최적화 기능을 사용 안하고 있었다 ^0^ 1. Next.js로 만든 웹사이트 성능최적화를 해보자 주인공은 이 웹사이트다2.결과 미리보기 처음엔 이랬다 개선 후 LCP가 확 줄어들었다 3. 개선기1. 문제파악하기 구글의 Light House는 최적화를 위한 방법들을 분석하고 제안해 준다. 그 예로 우리 사이트는 이렇다 3.6초나 차지하는 LCP 요소가 무엇일까?메인엔 이미지 밖에 없었다. 나는 이 이미지들을 로드하는데 시간이 많이 걸린다고 생각했다. 방법 1. 배너와 같은 관리자가 설.. 2024. 7. 13. 프론트엔드 성능 측정 방법 프론트 엔드, 성능측정 해야하는 이유아카마이(분산컴퓨팅 및 클라우트 컴퓨팅을 전문으로 하는 미국의기업)의 이커머스 업계 성능 현황 보고서에 따르면 지연속도가 늘어날 수록 이탈률이 급격하게 증가하고, 구매전환율 역시 감소한다고 한다.2초 지역시 62%의 이탈률 증거와 25%의 구매 전환률 감소를 하고있으며 이는 4명중 한명꼴로 꽤 큰 비율이다.성능은 서비스 이용률 및 기업의 이익에 영향을 미친다.⇒ 프론트엔드 성능 측정이 필요한 이유는 사용자 개선을 통해 사업의 이익 증대를 끌어내기 위해서이다.프론트엔드에서 측정해야 하는 성능은 무엇일까?로딩시간FCP(First Contentful Paint) : 첫 요소가 로드될 때까지 걸리는 시간FMP(First Meaningful Pain) : 사용자에게 의미 있는 .. 2024. 7. 6. 이전 1 2 3 4 5 ··· 18 다음
