웹사이트 성능 최적화를 위한 지연 로딩

웹사이트 성능 최적화를 위한 지연 로딩

웹사이트의 성능을 최적화하고 싶다면 곧 지연 로딩이라는 용어를 발견하게 될 것입니다. 이 인기 있는 방법은 특히 이미지나 비디오와 같이 많은 양의 데이터가 포함된 사이트의 로드 시간을 개선하는데 도움이 됩니다. 웹사이트를 요청할 때 브라우저는 원하는 대로 페이지를 표시하는데 필요한 모든 리소스를 로드합니다. 이는 사용자에게 보이지 않는 모든 객체 요청을 의미합니다. 이로 인해 로딩 시간이 불필요하게 길어집니다. 이 문제를 해결하기 위해 개발자는 지연 로드를 사용합니다. lazyload와 같은 스크립트를 사용하면 브라우저는 브라우저 창에서 스크롤하거나 확대, 축소할 때와 같이 미리 보기 창에 있을 때만 이미지 및 기타 데이터를 로드합니다. 지연 로딩 방법은 이미지 객체의 예를 사용하여 가장 잘 설명할 수 있습니다. 지연 로딩을 사용하려면 img 태그의 태그를 수정해야 합니다. src 속성 대신이 메서드는 해당 소스 링크를 포함하는 데이터 속성을 사용합니다. 이미지가 표시되는 즉시 스크립트의 이미지를 나타내는 데이터 속성과 함께 src 속성을 추가합니다. 페이드 인 또는 슬라이드 인 효과를 사용하여 로드 프로세스의 모양을 개선할 수도 있습니다. 지연 로드를 웹 프로젝트에 통합하는 방법에는 여러 가지가 있습니다. 수년에 걸쳐 느린 로딩 통합 방법은 지속적으로 개선되고 개선되었습니다. 이제 웹사이트에 쉽게 통합할 수 있는 지연 로딩을 위한 많은 자바스크립트 템플릿이 있습니다. 예를 들어, 앞서 언급한 lazyload스크립 트을 사용할 수 있습니다. 이 2.4킬로바이트 스크립트를 사용하면 이미지, 비디오 및 iframe에 대한 기본 지연 로드를 설정할 수 있을 뿐만 아니라 특히 반응형 이미지도 지원합니다. lazyload의 대안으로 mika tuupola에서 개발한 lazy load remastered 스크립트를 사용할 수 있습니다. 그것은 jQuery를 사용하고 흐림 기술과 같은 좋은 효과를 제공한다는 점에서 lazyload와 다릅니다. 표준 지연 로드는 지연 로드 방법을 웹 프로젝트에 통합하는 가장 쉬운 방법입니다. 처음에는 구글 크롬 브라우저에서만 사용할 수 있었지만 이제는 이 방법이 파이어폭스, 에지 및 오페라에서도 작동합니다. 이 옵션을 사용하려면 웹사이트 콘텐츠에 적절한 업로드 속성을 추가하기만 하면 됩니다. 표준 지연 로드 사용의 장점은 브라우저가 추가 자바스크립트 라이브러리를 로드할 필요가 없다는 것입니다. 로드 시간을 개선하는 것 외에도 사용자가 자바 스크립트를 비활성화한 경우에도 브라우저가 지연 로드를 사용하여 미지를 로드하도록 합니다. 지연 로디오가 자바스크립트의 통합으로 인해 브라우저는 지속적으로 객체의 위치를 요청합니다. 이것은 복통과 같은 불쾌한 부작용을 초래할 수 있으며 서버에 추가 부담이 됩니다. 인터섹션 옵서버 API를 사용하는 경우 다르게 작동합니다. 인터페이스는 특정 상위 요소와 관련된 모든 요소의 변경사항을 추적합니다. 이 상위 요소는 일반적으로 뷰포트입니다. 객체가 부모 요소와 겹치거나 요소 사이의 거리가 일정량 변경되면 인터섹션 옵서버는 콜백 기능을 수행하여 해당 요소를 표시하 빈다. 워드프레스로 사이트를 만든 경우 a3 lazyload와 같은 플러그인을 사용하여 지연 로드를 쉽게 통합할 수 있습니다. 이 확장은 이미지 및 비디오 외에도 다른 포함된 콘텐츠에 대한 지연 로드 방법을 지원합니다. 웹사이트 운영자는 종종 픽셀을 사용하여 웹사이트에서 사용자 행동을 추적합니다. 경우에 따라 이러한 추적 픽셀은 보이지 않는 영역에만 포함됩니다. 모든 이미지에 지연 로드를 적용하면 브라우저는 추적 픽셀이 가시 영역에 있을 때만 로드됩니다. 결과적으로 클릭 및 전환에 대한 중요한 데이터가 손실됩니다. 사용되는 유형에 따라 페이지가 요청되면 추적 픽셀을 별도로 로드할 수도 있습니다.

공유하기 글 요소 저작자표시

from http://happydays-always.tistory.com/41 by ccl(A) rewrite - 2021-05-04 23:59:04