SharePoint Online에서 이미지 및 JavaScript 로드 지연
이 문서에서는 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/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 &&
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 작업 영역 <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를 참조해야 합니다. 다음 예제에서는 초기 페이지 로드에서 이미지가 하나만 로드되었지만 페이지에 여러 개 더 있다는 것을 확인할 수 있습니다.
다음 스크린샷은 보기로 스크롤한 후 다운로드되는 나머지 이미지를 보여 줍니다.
JavaScript를 사용하여 이미지 로드를 지연하는 것은 성능을 높이는 데 효과적인 기술이 될 수 있습니다. 그러나 이 기술이 공개 웹 사이트에 적용되는 경우 검색 엔진은 정기적으로 형성된 이미지를 크롤링하는 것과 같은 방식으로 이미지를 크롤링할 수 없습니다. 이는 페이지가 로드될 때까지 이미지 자체의 메타데이터가 실제로 존재하지 않기 때문에 검색 엔진의 순위에 영향을 줄 수 있습니다. 검색 엔진 크롤러는 HTML만 읽으므로 페이지에 이미지가 콘텐츠로 표시되지 않습니다. 이미지는 검색 결과에서 페이지 순위를 지정하는 데 사용되는 요소 중 하나입니다. 이 작업을 해결하는 한 가지 방법은 이미지에 입문 텍스트를 사용하는 것입니다.
GitHub 코드 샘플: JavaScript를 삽입하여 성능 향상
GitHub 제공된 JavaScript 삽입에 대한 문서 및 코드 샘플을 놓치지 마세요.
참고 항목
Office 2013 및 엔터프라이즈용 Microsoft 365 앱 지원되는 브라우저