작년에 Chrome에 기본 이미지 지연 로딩 기능을 추가한 후 Google은 이제 개발자가 무거운 iframe을 지연 로드할 수 있도록 허용하고 있습니다. 더 자세히 알아보려면 계속 읽어보세요!
모바일 사용자와 연결 기능이 제한된 전 세계 사람들의 웹 트래픽이 증가함에 따라 회사와 개발자는 웹사이트 로딩 속도를 크게 최적화하게 되었습니다. 일반적으로 웹페이지를 탐색하면 이미지, 아이콘, GIF, 스타일, 스크립트 등 사용 가능한 모든 콘텐츠가 다운로드되어 표시됩니다. 상상할 수 있듯이 모든 항목을 로드하면 웹 사이트가 시작될 때 특히 연결 속도가 느린 사용자의 경우 지연이 발생합니다. Google은 한동안 이 문제를 해결하기 위해 노력해 왔습니다. 작년에 그들은 추가했습니다. 이미지 지연 로딩 기능 구글 크롬 76에서. 이제 Google은 동일한 기능을 iframe에 도입하고 있습니다.
지연 로딩은 요청 시 웹페이지의 콘텐츠를 로드합니다. 즉, 콘텐츠가 다운로드되지 않고 아래로 스크롤하여 보기에 표시될 때까지 표시되므로 초기 웹 사이트 시작이 줄어듭니다. 속도. 앞서 언급했듯이 이미지 지연 로딩은 작년부터 Chrome에서 사용할 수 있었지만 이제 개발자는 iframe에서도 동일한 방법을 사용할 수 있습니다. 자신의 웹사이트에 이를 구현하려면 다음을 추가하기만 하면 됩니다. 로딩="게으른" 이미지 및/또는 iframe 요소에 속성을 부여하세요. Firefox 및 Safari와 같은 브라우저는 이미 기본 이미지 지연 로딩 기능을 구현했습니다. iframe에 관해서는 여전히 몇 가지 버그를 수정하기 위해 노력하고 있습니다. Google은 또한 라이트 모드의 Android용 Chrome이 오프스크린 이미지와 iframe을 자동으로 지연 로드한다고 언급했습니다.
아이러니하게도 YouTube 동영상 삽입(iframe 기반)이 지연 로드 시 웹페이지 로딩 속도에 어떤 영향을 미치는지 테스트하는 동안 Chrome 팀은 "우리 페이지가 모바일 장치에서 얼마나 빨리 상호 작용할 수 있는지에 대해 10초를 절약했습니다." 말할 필요도 없이, 지연 로딩은 웹 페이지를 방문하자마자 전체 콘텐츠를 다운로드하는 전통적인 방법에 비해 실질적인 이점이 있습니다.
가격: 무료.
4.1.
원천: web.dev
을 통해: 테크도우