웹페이지 성능 최적화 - 웹사이트 로딩시간을 6.3초에서 0.6초로 줄이기

웹페이지 성능 최적화 - 웹사이트 로딩시간을 6.3초에서 0.6초로 줄이기

목차 1. 문제 2. 분석 및 해결 3. 결과 문제 프론트엔드 개발에서 사용자 경험은 매우 중요하다. 이를 향상시키기 위해서 'Lighthouse'라는 도구를 활용할 수 있다. 이 도구는 현재 구현 중인 웹사이트를 분석하여 개선이 필요한 부분을 알려주고, 어떤 점을 개선해야 할지 알려준다. (성능 참.. 처참하다...) 결론을 먼저 보여주자면 단순히 숫자로 보면 성능점수가 2배로 증가했다. 다른 것보다 LCP가 6.3초에서 0.6초로 끌어올렸다. 분석 및 해결 사실 앞의 문제와 결론을 보면 약간의 어그로성이 있다..^^ 누군가는 나랑 비슷한 상황이 있을 것 같아서, 이런 방법을 초기에 생각하지 못해서 도움이 될까 블로그에 작성했다. 환경 Next v13.5.6 tailwind S3 - 이미지 관리 위에 ..

  • format_list_bulleted 시작/TIL(Today I Learned)
  • · 2024. 4. 19.
  • textsms
Next 13 공식문서 읽기 (2)

Next 13 공식문서 읽기 (2)

Next.js 프로젝트 구조 최상위 파일 및 폴더, 구성파일 및 라우팅 규칙에 대한 내용을 설명한다. 최상위 폴더 app : 앱라우터 pages : 페이지 라우터 public : 서비스의 정적 자산(데이터) src : 애플리케이션 원본 폴더 (선택사항 ) 최상위 파일 next.config.js : Next.js에 대한 구성 파일 package.json : 프로젝트 종속성 및 스크립트 instrumentation.ts : OpenTelementry / instrumentation file (이 부분에 대한 개념은 아직... 애플리케이션의 모니터링을 위한 것 같다.) middleware.ts : Next.js 요청 미들웨어 .env : 환경변수 .env.local : 로컬 환경변수 .env.productio..

  • format_list_bulleted FrontEnd/NEXT
  • · 2023. 11. 5.
  • textsms
230918 - NEXT.JS 사용하기

230918 - NEXT.JS 사용하기

오늘 내가 배운 것 1. NextJS란? 2. Next의 특징 3. 설치하기 1. NextJS란? Next.js는 React를 기반으로 만들어진 웹 프레임워크이다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR) 등 다양한 렌더링 방식을 지원한다. 2. Next의 특징 SSR과 SSG 지원 : 서버사이드 렌더링과 정적 사이트 생성을 쉽게 구현할 수 있어서 검색 엔진 최적화(SEO)에 유리하다. 빠른 성능 : 코드 스플리팅, 레이지 로딩, 프리페칭 등을 자동으로 지원하여 애플리케이션 성능을 최적화한다. API Routes : 'pages/api' 디렉토리를 이용하여 API 엔드포인트를 생성할 수 있다. (프론트 서버의 개념) 동적 라우팅 : 파일과 폴더 구조를 ..

  • format_list_bulleted 시작/TIL(Today I Learned)
  • · 2023. 9. 18.
  • textsms
728x90