반응형 이미지렌더링1 [Javascript] lazy loading, 이미지 로딩 시 부드럽게 표현하기 이미지 로딩 시간이 길면 구글 검색 알고리즘에 영향을 미칠 수 있다는 글을 보았습니다. 페이지에 이미지 렌더링 하는 시간을 어떻게 줄일 수 있을지 검색하다가 lazy loading이라는 방법을 확인했습니다. lazy loading은 사용자가 화면을 보기 직전 순간까지 이미지를 로드하지 않다가 필요할 때 로드하여, 초기 페이지 로드 시간을 줄이고 불필요한 데이터 전송량을 감소시켜 전체적인 웹사이트 성능을 개선하는 방법입니다. html 세팅은 다음과 같습니다. 태그에 attribute를 src 외에 data-src 하나 더 두는 것입니다. data-src는 src에 전달할 이미지 path를 잠시 담아두려는 목적을 갖고 있기 때문에 이름을 변경하셔도 괜찮습니다. 이렇게 html를 준비했다면, 사용자가 웹 페이.. 2024. 2. 20. 이전 1 다음 반응형
