SharePoint Online에서 이미지 및 JavaScript 로드 지연
마지막으로 수정된 항목: 2015-01-19
요약: JavaScript를 사용하여 이미지 로드를 지연시키고 중요하지 않은 JavaScript의 로드를 페이지 로드 이후로 미루어 SharePoint Online 페이지의 로드 시간을 줄이는 방법을 설명합니다.
이미지는 SharePoint Online의 페이지 로드 시 속도가 저하될 수 있습니다. 기본적으로 대부분의 최신 인터넷 브라우저는 HTML 페이지를 로드할 때 이미지를 미리 가져옵니다. 이로 인해 아래로 스크롤할 때까지 이미지가 화면에 표시되지 않을 경우 페이지를 로드할 때 불필요하게 느려질 수 있습니다. 이미지는 브라우저에서 페이지의 보이는 부분을 로드하지 못하게 차단할 수 있습니다. 이 문제를 해결하려면 JavaScript를 사용하여 먼저 이미지 로드를 건너뛰면 됩니다. 또한 필수적이지 않은 JavaScript를 로드하면 SharePoint 페이지의 로드 시간이 느려질 수 있습니다. 이 항목에서는 SharePoint Online에서 JavaScript를 사용하여 페이지 로드 시간을 향상시키는 데 사용할 수 있는 몇 가지 방법에 대해 설명합니다.
JavaScript를 사용하여 SharePoint Online 페이지의 이미지 로드를 지연시켜 페이지 로드 시간 개선
JavaScript를 사용하여 웹 브라우저가 이미지를 미리 가져오지 못하게 할 수 있습니다. 그러면 전체 문서 렌더링 속도가 향상됩니다. 이렇게 하려면 <img> 태그에서 src 특성 값을 제거한 후 data-src와 같은 데이터 특성의 파일 경로로 바꿉니다. 예를 들면 다음과 같습니다.
<img src="" data-src="/sites/NavigationBySearch/_catalogs/masterpage/Images/microsoft-white-8.jpg" />
이 방법을 사용하면 브라우저에서 이미지를 즉시 다운로드하지 않습니다. 이미지가 이미 뷰포트에 있으면 JavaScript는 데이터 특성에서 URL을 검색하고 src 특성 값으로 삽입하도록 브라우저에 지시합니다. 스크롤해야만 이미지가 로드되어 화면에 보입니다.
이러한 모든 과정을 진행하려면 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> 태그에 다음 함수를 연결해야 합니다. 리본이 페이지 맨 위에 연결된 상태를 유지하기 위해 창 이벤트가 재정의되기 때문입니다.
//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를 참조해야 합니다. 다음 예는 초기 페이지 로드에서 이미지가 하나만 로드되었으나 페이지에 여러 이미지가 더 있는 상황을 보여줍니다.
.png "페이지에 로드된 하나의 이미지를 보여 주는 스크린샷")
다음 스크린샷에는 보기로 스크롤한 후에 다운로드되는 나머지 이미지가 나와 있습니다.
.png "페이지에 로드된 여러 페이지를 보여 주는 스크린샷")
JavaScript를 사용하여 이미지 로드를 지연시키는 방식은 성능이 향상되는 효과적인 방법이 될 수 있지만, 이 방법을 공용 웹 사이트에 적용하면 검색 엔진이 일반적인 형식의 이미지를 크롤링할 때와 같은 방식으로 이미지를 크롤링할 수 없습니다. 이 경우 이미지 자체의 메타데이터가 페이지를 로드할 때까지는 실제로 존재하지 않으므로 검색 엔진의 순위에 영향을 줄 수 있습니다. 검색 엔진 크롤러는 HTML만 읽으므로 이미지가 페이지의 콘텐츠로 표시되지 않습니다. 이미지는 검색 결과에서 페이지 순위를 매기는 데 사용되는 요소 중 하나입니다. 이 문제를 해결하는 한 가지 방법은 이미지에 대한 소개 텍스트를 사용하는 것입니다.
GitHub 코드 샘플: JavaScript를 삽입하여 성능 향상
GitHub에 제공되는 JavaScript 삽입에 대한 문서 및 코드 샘플을 반드시 읽어보세요.
참고 항목
Office 2013 및 Office 365 ProPlus에서 지원되는 브라우저
방법: SharePoint 2013의 사이트에 마스터 페이지 적용
방법: SharePoint 2013에서 페이지 레이아웃 만들기