본문 바로가기

페이지 로딩에 대한 최적화 방법 개선 방법

웹 페이지의 로딩 속도는 사용자 경험과 전환율에 큰 영향을 미치며, 검색 엔진 랭킹에도 영향을 줍니다. "페이지 로딩"은 웹 개발에서 중요한 과제 중 하나입니다. 이 기사에서는 페이지 로딩 속도를 개선하기 위한 다양한 방법과 프론트엔드 성능 최적화 과정, 그리고 로딩 페이지 구현 및 데이터 호출 처리 방법에 대해 알아보겠습니다.

Gzip에 관하여

 

페이지 로딩 속도 개선 방법

이미지 최적화

  • 웹용 이미지 형식(PNG, JPEG, GIF, WebP 등)에 맞게 이미지 압축 및 크기 조절
  • 이미지 CDN 사용하여 로딩 속도 향상

 

코드 최적화

  • HTML, CSS, JavaScript 파일에서 불필요한 스페이스, 주석 등 제거
  • CSS 및 JavaScript 최소화(Minify) 도구 활용하여 파일 크기 감소

 

브라우저 캐싱 활용

  • 서버 응답 헤더에 캐싱 설정 추가하여 사용자 브라우저에 리소스 저장
  • 다음 방문 시 로드 시간 단축

 

어셋 병렬 다운로드

  • HTTP/2 프로토콜 이용하여 여러 자원 병렬 다운로드 설정
  • 페이지 로드 시간 크게 감소

 

CDN(Content Delivery Network) 사용

  • 전 세계 데이터 센터에 콘텐츠 복제하고 빠르게 제공하는 CDN 서비스 활용

 

지연 로딩(Lazy Loading) 적용

  • 초기 페이지 로드 시 이미지, 비디오, 스크립트 등 자원 로드하지 않음
  • 사용자가 해당 영역 스크롤 시 자원 로드하여 초기 로딩 속도 개선

 

서버 응답 시간 최적화

  • 웹호스팅 성능이 로딩 속도에 영향
  • 적절한 서버 및 관리자 역할로 서버, 데이터베이스 성능 최적화
  • 필요 시 스케일링 고려

 

위 방법들을 통해 페이지 로딩 속도 개선이 가능하며, 이로 인해 사용자 경험과 전환율 향상, 검색 엔진 랭킹 개선 가능성이 높아집니다.

 

프론트엔드 성능 최적화 과정

    1. 성능 문제 인식:
      • 프로젝트 배포 시 페이지 느리고 버벅거리는 현상 확인
      • 페이지 로딩 및 랜더링 성능 개선 필요성 인식

 

    1. 성능 개선 방향 설정:
      • 기본적인 최적화 기술 활용 계획
      • lighthouse 사용해 성능 점검
      • 성능 개선 방법 습득을 위한 학습

 

    1. Gzip 압축 적용:
      • 텍스트 파일 Gzip 압축 적용 필요성 인지
      • Gzip 사용 방법에 대한 자료 참고하여 학습
      • 용량이 큰 자바스크립트 파일을 압축하여 용량 감소

 

    1. Lazy Loading 구현:
      • 필요 없는 페이지에서는 라이브러리 로딩 방지 위해 Lazy Loading 적용
      • 필요 시에만 로딩하도록 구현

 

    1. 서버 설정 변경으로 Gzip 적용:
      • 프론트엔드 서버 역할을 하는 Java 코드에서 Gzip 압축 설정 적용
      • 텍스트 파일을 Gzip으로 압축하여 제공

 

    1. 이미지 프리로딩으로 성능 개선:
      • 캐로셀에서 발생하는 이미지 로딩 지연 문제 인지
      • 이미지 프리로딩 함수 생성하여 컴포넌트 마운트 후 미리 이미지 다운로드

 

    1. 이미지 프리로딩 결과 확인:
      • 이미지 프리로딩으로 인해 네트워크 딜레이 감소 확인
      • 이미지가 미리 다운로드되어 캐시를 이용해 로딩되어 성능 개선

 

    1. 캐로셀 라이브러리 변경:
      • react-flicking 라이브러리의 용량 문제 인식
      • framer-motion으로 캐로셀 재구현 계획
      • 용량 감소 및 성능 개선 목표

 

    1. 최적화 결과 확인:
      • Gzip 적용, Lazy Loading, 이미지 프리로딩, 라이브러리 교체 등 성능 최적화 작업 결과 확인
      • 전체 프로젝트 용량 및 로딩 시간 등 성능 개선 확인

 

  1. 추가 작업 및 향후 계획:
  • gzip으로 압축 및 lazy loading을 적용한 결과 확인 후 추가 작업 계획
  • gpu 사용 애니메이션 등으로 레이아웃 변경 시 성능 개선 작업 계획
  • 병목 코드 및 개선 사항에 대한 트러블슈팅 계획

 

결과적으로 프론트엔드 성능 최적화 작업을 통해 페이지 로딩 속도 및 사용자 경험 개선을 실현하였으며, 효율적인 웹 애플리케이션 운영을 목표로 하였습니다.

 

마무리

웹 페이지의 로딩 속도와 사용자 경험은 웹 개발의 핵심적인 부분입니다. 이미지 최적화, 코드 최적화, 브라우저 캐싱, 어셋 병렬 다운로드, CDN 사용 등 다양한 방법을 활용하여 페이지 로딩 속도를 개선할 수 있습니다. 또한 프론트엔드 성능 최적화 과정을 통해 웹 애플리케이션의 성능을 향상시킬 수 있습니다. 마지막으로 로딩 페이지의 구현과 데이터 호출 처리 방법을 활용하여 사용자에게 더 나은 로딩 경험을 제공할 수 있습니다.

Gzip에 관하여

W3Schools