다음을 통해 공유

SharePoint에서 이미지 및 JavaScript 로드 지연

  • 아티클

이 문서에서는 JavaScript를 사용하여 이미지 로드를 지연하고 페이지가 로드될 때까지 기본 JavaScript를 로드할 때까지 대기하여 SharePoint 페이지의 로드 시간을 줄이는 방법을 설명합니다.

이미지는 SharePoint의 페이지 로드 속도에 부정적인 영향을 줄 수 있습니다. 기본적으로 대부분의 최신 인터넷 브라우저는 HTML 페이지를 로드할 때 이미지를 프리페치합니다. 이 프로세스로 인해 사용자가 아래로 스크롤할 때까지 이미지가 화면에 표시되지 않으면 페이지 로드 속도가 느려질 수 있습니다. 이미지는 브라우저가 페이지의 표시되는 부분을 로드하지 못하도록 차단할 수 있습니다. 이 문제를 해결하려면 JavaScript를 사용하여 먼저 이미지 로드를 건너뛸 수 있습니다. 또한 중요하지 않은 JavaScript를 로드하면 SharePoint 페이지에서도 다운로드 시간이 느려질 수 있습니다. 이 문서에서는 SharePoint에서 JavaScript를 사용하여 페이지 로드 시간을 개선하는 데 사용할 수 있는 몇 가지 방법을 설명합니다.

JavaScript를 사용하여 SharePoint 페이지에서 이미지 로드를 지연하여 페이지 로드 시간 개선

JavaScript를 사용하여 웹 브라우저가 이미지를 프리페치하지 못하도록 할 수 있습니다. 이 기술은 전체 문서 렌더링 속도를 향상합니다. 이렇게 하려면 img> 태그에서 <src 특성 값을 제거하고 데이터 특성의 파일 경로(예: data-src)로 바꿉니다. 예시:

<img src="" data-src="/sites/NavigationBySearch/_catalogs/masterpage/media/microsoft-white-8.jpg" />

이 메서드에서 브라우저는 이미지를 즉시 다운로드하지 않습니다. 이미지가 뷰포트에 이미 있는 경우 JavaScript는 브라우저에 데이터 특성에서 URL을 검색하고 src 특성의 값으로 삽입하도록 지시합니다. 이미지는 사용자가 스크롤할 때만 로드되며 보기에 들어옵니다.

이 함수를 수행하려면 JavaScript를 사용해야 합니다.

텍스트 파일에서 isElementInViewport() 함수를 정의하여 요소가 사용자에게 표시되는 브라우저의 일부인지 여부를 검사.

function isElementInViewport(el) {
  if (!el)
    return false;
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &amp;&amp;
    rect.left >= 0 &amp;&amp;
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp;
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

다음으로 loadItemsInView() 함수에서 isElementInViewport()를 사용합니다. loadItemsInView() 함수는 사용자에게 표시되는 브라우저의 일부인 경우 data-src 특성에 대한 값이 있는 모든 이미지를 로드합니다. 텍스트 파일에 다음 함수를 추가합니다.

function loadItemsInView() {
  //Select elements by the row id.
  $("#row [data-src]").each(function () {
      var isVisible = isElementInViewport(this);
      if (isVisible) {
          if ($(this).attr("src") == undefined) {
              $(this).attr("src", $(this).data("src"));
          }
      }
  });
}

마지막으로 다음 예제와 같이 window.onscroll() 내에서 loadItemsInView()를 호출합니다. 이 함수는 뷰포트에 있는 모든 이미지가 사용자가 필요로 하지만 이전에는 로드되지 않도록 합니다. 텍스트 파일에 다음을 추가합니다.

//Example of calling loadItemsInView() from within window.onscroll()
$(window).on("scroll", function () {
    loadItemsInView();
});

SharePoint의 경우 리본이 페이지 맨 위에 연결된 상태로 유지되도록 창 이벤트가 재정의되므로 다음 함수를 #s4 작업 영역 <div> 태그의 스크롤 이벤트에 연결해야 합니다.

//Keep the ribbon at the top of the page
$('#s4-workspace').on("scroll", function () {
    loadItemsInView();
});

텍스트 파일을 확장명 .js JavaScript 파일로 저장합니다(예: delayLoadImages.js).

delayLoadImages.js 쓰기가 완료되면 master 페이지의 헤더에 스크립트 링크를 추가하여 SharePoint의 master 페이지에 파일 내용을 추가할 수 있습니다. master 페이지에 있으면 JavaScript는 해당 master 페이지 레이아웃을 사용하는 SharePoint 사이트의 모든 페이지에 적용됩니다. 또는 사이트의 한 페이지에서만 기능을 사용하려는 경우 스크립트 편집기 웹 파트를 사용하여 JavaScript를 페이지에 포함합니다. 자세한 내용은 다음 항목을 참조하세요.

예: SharePoint의 master 페이지에서 JavaScript delayLoadImages.js 파일 참조

이 예제가 작동하려면 master 페이지에서 jQuery를 참조해야 합니다. 다음 예제에서는 초기 페이지 로드에서 로드된 이미지가 하나만 있지만 페이지에 몇 가지가 더 있음을 확인할 수 있습니다.

페이지에 로드된 하나의 이미지를 보여 주는 스크린샷

다음 스크린샷은 보기로 스크롤한 후 다운로드되는 나머지 이미지를 보여 줍니다.

페이지에 로드된 여러 이미지를 보여 주는 스크린샷

JavaScript를 사용하여 이미지 로드를 지연하는 것은 성능을 높이는 데 효과적인 기술일 수 있습니다. 그러나 이 기술이 공개 웹 사이트에 적용되는 경우 검색 엔진은 정기적으로 형성된 이미지를 크롤링하는 것과 동일한 방식으로 이미지를 크롤링할 수 없습니다. 이 기술은 페이지가 로드될 때까지 이미지 자체의 메타데이터가 없기 때문에 검색 엔진의 순위에 영향을 줄 수 있습니다. Search 엔진 크롤러가 HTML만 읽으므로 페이지에서 이미지를 콘텐츠로 볼 수 없습니다. 이미지는 검색 결과에서 페이지 순위를 지정하는 데 사용되는 요소 중 하나입니다. 해결 방법은 이미지에 대한 소개 텍스트를 사용하는 것입니다.

GitHub 코드 샘플: 성능을 향상시키기 위해 JavaScript 삽입

GitHub에 제공된 JavaScript 삽입 에 대한 문서 및 코드 샘플을 놓치지 마세요.

참고 항목

Office 2013 및 엔터프라이즈용 Microsoft 365 앱 지원되는 브라우저

방법: SharePoint 2013의 사이트에 master 페이지 적용

방법: SharePoint 2013에서 페이지 레이아웃 Create