방구석 개발자의 놀이터

  • 홈
  • 태그
  • 방명록

Lazy loading 1

이미지 lazy loading을 통한 성능 개선

1. lazy loading 적용 전 아래의 사진은 고객사의 로고들이 있는 고객사례 컴포넌트이다. 해당 컴포넌트는 index 페이지에 포함되어있다. 즉, 고객이 최초에 홈페이지에 들어왔을 때 보여지는 화면에 포함되어있다. 하지만 해당 컴포넌트는 스크롤을 좀 내려야 볼 수 있다. 그렇다면 과연 고객이 처음 홈페이지에 들어왔을 때 해당 이미지들을 불러와야 할까? 현재는 처음 홈페이지 들어오면 아래 사진과 같이 해당 이미지들을 전부 불러온다. 고객은 최초에 홈페이지에 들어왔을 때 보이지 않는 컴포넌트의 40개 img load를 기다려야한다. 물론 이미지의 사이즈가 크지 않지만, 언제든 고객사 로고는 추가될 수 있으며 인터넷이 좋지 않은 상황에서는 더욱 차이가 날 수 있다. 2. lazy loading 적용 방..

Front-End/React 2023.06.26
이전
1
다음
더보기
프로필사진

게으른 사람들에게 편리함을 제공해 줄 수 있을 때 가장 기쁜 개발자

250x250
  • 분류 전체보기 (102)
    • JAVA (2)
    • Spring (17)
    • Python (14)
    • 회고록 (4)
    • Flutter (3)
    • Git (1)
    • Spring Boot (15)
    • Algorithm (3)
    • AWS (1)
    • Front-End (34)
      • HTML (1)
      • CSS (1)
      • SCSS (2)
      • JavaScript (12)
      • React (13)
      • React-query (1)
      • NextJS (0)
      • Test (1)
    • OpenSource (3)
    • 독서 (0)
    • 강의 (1)
    • Error (4)

Tag

opensource, javascript, spring boot, 프론트엔드, frontend, front-end, PYTHON, CSS, flutter, aspect, es6, springframework, react, component, 개발자, lombok, 회고록, springboot, spring, react-router-dom,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바