프론트엔드 개발 · 기초
지연 로딩(Lazy Loading)이란 무엇이며, 어떤 종류의 콘텐츠에 주로 적용되며 웹 성능에 어떤 영향을 미치나요?
힌트 · 지연 로딩은 사용자의 뷰포트에 들어오기 전까지 이미지나 비디오 등의 리소스 로드를 지연시키는 기술입니다. 초기 로딩 시간을 단축하고 대역폭을 절약합니다.
지연 로딩성능 최적화초기 로딩 시간가시 영역리소스 효율성
모범답안
지연 로딩은 웹 페이지 초기 로딩 속도를 개선하기 위한 중요한 기술 중 하나입니다. 사용자가 현재 보고 있는 화면, 즉 뷰포트 안에 들어오기 전까지 이미지나 비디오 같은 리소스들의 로딩을 미루는 방식을 말합니다.
주로 이미지나 비디오, 긴 목록 등 화면 아래쪽에 위치한 콘텐츠에 적용하면 효과적입니다. 사용자가 스크롤을 내려 해당 영역에 접근할 때 리소스를 로드하기 때문에, 초기 페이지 로딩 시간을 단축하고 불필요한 데이터 전송을 줄여 대역폭을 절약할 수 있습니다.
결과적으로 사용자 경험을 향상시키고 웹 페이지 성능을 최적화하는 데 기여합니다. 특히 모바일 환경처럼 네트워크 환경이 좋지 않은 경우에 더욱 효과적입니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 웹 성능 최적화 면접 질문
- CDN(Content Delivery Network)은 웹 성능 향상에 어떤 역할을 하며, 어떤 상황에서 주로 사용되나요?
- 이미지 최적화(Image Optimization)를 위해 어떤 방법들을 사용할 수 있으며, 각각의 장점은 무엇인가요?
- CSS와 JavaScript 파일을 압축(Minification)하고 번들링(Bundling)하는 것이 웹 성능에 어떤 이점을 주나요?
- 웹 페이지 렌더링 성능 최적화를 위해 Critical Rendering Path (CRP)를 이해하고 개선하는 것이 중요합니다. CRP의 주요 단계들을 설명하고, 이 경로를 단축하거나 최적화하기 위한 구체적인 방법들을 제시해 보세요.
- `<script>` 태그에 `async`와 `defer` 속성을 사용하는 것이 웹 페이지 성능에 어떤 영향을 미치는지 설명하고, 각각 어떤 상황에서 사용해야 하는지 구체적인 예시와 함께 비교 설명해 주세요.
- 웹 페이지에 많은 이미지가 사용될 때 발생할 수 있는 성능 문제를 해결하기 위한 이미지 최적화 전략들을 3가지 이상 설명하고, 각 전략이 어떤 원리로 성능을 개선하는지 설명해 주세요.