SharePoint 최신 및 클래식 게시 사이트 페이지에서 iFrame 최적화

아티클
05/03/2024

IFrames는 비디오나 기타 미디어와 같은 풍부한 콘텐츠를 미리 보는데 유용할 수 있습니다. 그러나 iFrame은 SharePoint 사이트 페이지 내에서 별도의 페이지를 로드하므로 iFrame에서 로드된 콘텐츠에는 전체 페이지 로드 시간을 유발하고 페이지에서 제어할 수 없는 대형 이미지, 비디오 또는 기타 요소가 포함될 수 있습니다. 이 문서는 페이지의 iFrame이 어떻게 사용자가 인식하는 대기 시간에 미치는 영향을 미치는지와 일반적인 문제를 해결하는 방법을 이해하는데 도움을 줄 것입니다.

참고

SharePoint 최신 사이트의 성능에 대한 자세한 내용은 최신 SharePoint 환경의 성능을 참조하세요.

SharePoint 용 페이지 진단 도구를 사용한 iFrames를 사용하는 웹 파트 분석

SharePoint용 페이지 진단 도구는 SharePoint 최신 포털과 클래식 게시 사이트 페이지를 모두 분석하는 새로운 Microsoft Edge(https://www.microsoft.com/edge) 및 Chrome 브라우저에 대한 브라우저 확장입니다. 이 도구는 정의된 성능 기준의 집합 대비 페이지 수행 방식을 보여주는 분석된 각 페이지에 대한 보고서를 제공합니다. SharePoint용 페이지 진단 도구를 설치하고 알아보려면 SharePoint용 페이지 진단 도구 사용을 참조하세요.

참고

페이지 진단 도구는 SharePoint에서만 작동하며 SharePoint 시스템 페이지에서 사용할 수 없습니다.

Sharepoint용 페이지 진단 도구를 사용하여 Sharepoint 사이트 페이지를 분석 시 진단 테스트 창에서 iFrames를 포함하는 웹 파트에 대한 정보를 확인할 수 있습니다. 기준 메트릭은 최신 페이지와 클래식 페이지 모두 동일합니다.

잠정 결과는 다음과 같습니다:

주의 필요 (빨간색):이 페이지에는 iFrame을 사용하는 세 개 이상의 웹 파트가 포함되어 있습니다.
개선 기회 (노란색):이 페이지에는 하나 또는 두 개의 iFrame을 사용하는 웹 파트가 포함되어 있습니다.
조치가 필요하지 않음 (녹색): 페이지에 iFrame을 사용하는 웹 파트가 포함되어 있지 않음

검색된 iFrame을 사용하는 웹 파트 결과가결과의 개선 기회 또는 주의 필요 섹션에 표시되는 경우 결과를 클릭하여 iFrame을 포함하는 웹 파트를 확인할 수 있습니다.

페이지 진단 도구 결과입니다.

iFrame 성능 문제 해결

페이지 진단 도구를 사용하여 검색된 iFrames를 사용하는 웹 파트 결과를 활용하여 iFrames를 포함하는 웹 파트를 판단하고 페이지의 로드 시간을 느리게 할 수 있는 웹 파트를 판단합니다.

iFrame은 javascript, CSS 및 framework 요소와 같은 모든 관련 콘텐츠를 포함하는 별도의 외부 페이지를 로드하여 두 개 이상의 요소로 사이트 페이지의 오버헤드를 잠재적으로 증가시키기 때문에 근본적으로 느립니다.

iFrame의 최적화된 사용을 보장하기 위해 아래 지침을 따르세요.

가능 하면 미리 보기가 시작하기에 작거나 상호 작용형이 아닌 경우 iFrame 대신 이미지를 사용합니다.
iFrame을 사용 해야 하는 경우에는 수치를 최소화 하고 뷰포트에서 이동시킵니다.
Word, Excel 및 PowerPoint와 같은 포함된 Office 파일은 상호 작용형이지만 로드 속도가 느립니다. 전체 문서로의 링크가 포함된 이미지 섬네일은 종종 성능이 더욱 좋습니다.
포함된 YouTube 비디오와 Twitter 피드는 iFrame에서 성능이 더욱 뛰어나지만 이러한 유형은 신중 하게 사용해야 합니다.
분리된 웹 파트는 합리적인 예외 사항이지만, 뷰포트에서 그들의 수와 배치를 최소화해야 합니다.
iFrame이 뷰포트 외부에 있는 경우 iFrame이 보기로 들어올 때까지 iFrame의 렌더링을 지연하기 위해IntersectionObserver의 사용을 고려합니다.

성능 문제를 개선하기 위해 페이지를 수정하기 전에 분석 결과에 페이지 로드 시간을 기록해 둡니다. 수정 후에 다시 도구를 실행하여 새 결과가 기준선 표준에 포함되는지 확인하고 새 페이지 로드 시간을 확인하여 개선이 되었는지 확인합니다.

페이지 로드 시간 결과입니다.