SharePoint Online에서 JavaScript로 이미지 로드 시간 감소

이 문서에서는 JavaScript를 사용해 이미지 로드를 지연하고 필수가 아닌 JavaScript 로드는 페이지 로드 이후로 대기시킴으로써 SharePoint Online 페이지의 로드 시간을 줄일 수 있는 방법에 대해 설명합니다.

이미지는 SharePoint Online의 페이지 로드 속도를 저하시킬 수 있습니다. 기본적으로 대부분의 최신 인터넷 브라우저는 HTML 페이지를 로드할 때 이미지를 미리 가져옵니다. 이 경우, 사용자가 아래로 스크롤하기 전까지는 화면에 이미지가 표시되지 않는다면 페이지 로드 속도가 불필요하게 느려질 수 있습니다. 이미지로 인해 페이지 중 표시되는 부분을 로드하지 못할 수 있습니다. 이 문제를 해결하려면 JavaScript를 사용하여 이미지가 먼저 로드되는 것을 건너뛰도록 만들면 됩니다. 또한 필수가 아닌 JavaScript를 로드하는 것도 SharePoint 페이지상의 로드 시간을 악화시킬 수 있습니다. 이 항목에서는 JavaScript를 사용하여 SharePoint Online의 페이지 로드 시간을 개선할 수 있는 몇 가지 방법을 설명합니다.

JavaScript를 사용하여 SharePoint Online 페이지의 이미지 로드를 지연시켜 페이지 로드 시간 개선

JavaScript를 사용하여 웹 브라우저의 이미지 미리 가져오기를 방지할 수 있습니다. 그러면 전체 문서 렌더링 속도가 향상됩니다. 이렇게 하려면 <img> 태그에서 src 특성의 값을 제거하고 이 자리에 데이터 특성에 포함된 파일 경로(예: data-src)를 입력합니다. 예를 들면 다음과 같습니다.

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

이 방법을 사용하면 브라우저에서 이미지를 즉시 다운로드하지 않습니다. 이미지가 이미 뷰포트에 있는 경우 JavaScript는 데이터 특성에서 URL을 검색하여 src 특성에 대한 값으로 URL을 삽입하도록 브라우저에 지시합니다. 이미지는 사용자의 스크롤로 인해 보기 범위에 들어올 때만 로드됩니다.

이 모든 동작이 이루어지려면 JavaScript를 사용해야 합니다.

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

function isElementInViewport(el) {
  if (!el)
    return false;
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    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 Online의 경우 #s4-workspace <div> 태그의 scroll 이벤트에 다음 함수를 추가해야 합니다. 이렇게 하는 이유는 리본이 페이지 위쪽에 유지되도록 하기 위해 window 이벤트가 재정의되기 때문입니다.

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

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

delayLoadImages.js 작성을 완료한 후에는 파일 내용을 SharePoint Online의 마스터 페이지에 추가할 수 있습니다. 마스터 페이지의 머리글에 스크립트 링크를 추가하면 됩니다. 마스터 페이지에 추가된 JavaScript는 해당 마스터 페이지 레이아웃을 사용하는 SharePoint Online 내의 모든 페이지에 적용됩니다. 사이트의 한 페이지에만 사용하려는 경우에는 스크립트 편집기 웹 파트를 사용하여 JavaScript를 페이지에 포함합니다. 자세한 내용은 다음 항목을 참조하세요.

예: SharePoint Online   의 마스터 페이지에서 JavaScript delayLoadImages.js 파일 참조

이 작업을 위해서는 마스터 페이지에서 jQuery도 참조해야 합니다. 다음 예제에서는 페이지에 더 많은 이미지가 있지만 한 개의 이미지만 로드되는 초기 페이지 로드를 볼 수 있습니다.

페이지에 로드된 하나의 이미지를 나타내는 스크린샷

다음 스크린샷은 사용자의 스크롤로 인해 보기에 포함된 후에 다운로드되는 나머지 이미지를 보여 줍니다.

페이지에 로드된 여러 이미지를 나타내는 스크린샷

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

GitHub 코드 샘플: JavaScript 삽입으로 성능 향상

GitHub에서 제공되는 문서와 JavaScript injection(JavaScript 삽입) 관련 코드 샘플을 놓치지 마세요.

참고 항목

Office 2013 및 Office 365 ProPlus에서 지원되는 브라우저

방법: SharePoint 2013에서 마스터 페이지를 사이트에 적용

방법: SharePoint 2013에서 페이지 레이아웃 만들기

Office 기술 확장
교육 살펴보기
새로운 기능 우선 가져오기
Office Insider 참여

이 정보가 유용한가요?

의견 주셔서 감사합니다!

피드백을 주셔서 감사합니다. Office 지원 에이전트와 연락하는 것이 도움이 될 것 같습니다.

×