inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2

4-4) 이미지 지연(lazy) 로딩 (react-lazyload)

lazy load 의 layout shift에 대하여

해결된 질문

339

Jon

작성한 질문수 53

1

이강의에서는 이전강의에서 layout shift 에 대한 처리를 해서 현재는 발생하지 않고있지만, 보통이라면 lazy loading 을 할때 layout shift 가 반드시 따라올것같은데 image lazy loading시에는 선작업으로 무조건 layout shift를 없애주어야하는것일까요?

react devtools

답변 1

0

유동균

안녕하세요, Jon 님,

lazy loading과 layout shift의 관계에 대해서 질문을 주셨는데요,

선후를 따지기는 애매한 부분이 있겠지만,
말씀하신대로 lazy loading을 하게되면 layout shift가 어쩔 수 없이 따라오게 됩니다.
없던 요소를 늦게 넣는 거니까요.

그래서 lazy loading 을 적용할 때는 layout shift에 대해서 고려를 해주셔야 합니다.

때에 따라서는 해당 layout에 크게 영향을 주지 않는 경우도 있지만,
아주 중요한 위치에서 layout shift가 발생하게되어 사용성에 큰 문제를 줄 수도 있습니다.

물론, layout shift에 대응을 할 건지 말 건지는 개발자의 결정이겠지만,
사용성을 위해 가능하면 대응을 해주는게 좋겠죠?

답변이 도움되셨길 바라며, 강의에 관심을 가져주셔서 감사합니다.

예제 프로젝트 관련 질문입니다.

0

75

1

개발환경에 대한 안내

1

163

2

layout shift가 아주 약간 일어나는 부분에 대해

0

313

2

3-4) 이미지 사이즈 최적화 과정에서 img 태그 작동 안되는 문제

0

299

2

Material--icons_4.0.0.woff2

0

211

1

코드 실행 시 에러 관련 질문드립니다!!

1

581

1

npm run serve가 동작하지 않아요

0

705

1

lighthouse 측정에 관해 질문드려요

2

1008

1

webp 확장자질문

1

424

1

이미지 지연 로딩 질문 있습니다!

2

448

1

폰트 포멧에 대한 질문입니다.

1

390

2

궁금한 점이 있어요

1

350

1

css font-face unicode-range

1

362

1

woff2 포멧 IE에서 사용가능 여부

1

422

2

3-3 이미지 지연 로딩 코드 어디서 보나요?

1

328

1

img 태그가 작동이 되지 않습니다.

1

407

1

질문있습니다~

2

224

1

이미지 오류 요청 오류

1

399

1

안녕하세요~ 질문드립니다

1

305

1

궁금한점이 있습니다.

1

229

1

강의자료

1

208

2

안녕하세요 리액트 최적화 관련하여 질문드립니다.

2

1463

1

선생님 질문이 하나 있는데요~~

1

379

2

정말유익해요

2

219

1