SharePoint 최신 사이트 페이지에서 사용자 지정 확장 성능 최적화

아티클
08/02/2024

이 문서는 사용자 지정 확장이 사용자가 인식하는 대기 시간에 미치는 영향을 확인하는 방법 및 일반적인 문제를 해결하는 방법을 이해하는데 도움을 줄 것입니다.

SharePoint용 페이지 진단 도구를 사용하여 사용자 지정 확장 분석

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

참고

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

SharePoint용 페이지 진단 도구를 사용하여 SharePoint 사이트 페이지를 분석하는 경우 확장에서 기준 메트릭을 초과하는 사용자 지정 확장에 대한 정보가 로드 시간 및/또는 진단 테스트 창에서 너무 많은 확장 사용 결과에 영향을 미치는 것을 볼 수 있습니다.

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

주의 필요 (빨간색): 로드하는데 1초 보다 긴 시간이 걸리는 모든 사용자 지정 확장 테스트 결과에 표시되는 총 로드 시간은 모듈 로드 및 초기화로 나누어집니다. 또한 페이지에 너무 많은 확장이 있는 경우 페이지 로드 시간에 영향을 줄 수 있으며, 7개 이상의 확장이 페이지에서 사용되는 경우에는 강조 표시됩니다.
개선 기회 (노란색) 5개 이상의 확장을 사용하는 경우 7개 이상이 주의 필요로 강조 표시될 때까지 경고로 이 섹션에서 강조 표시됩니다.
필요한 작업 없음 (녹색): 로드하는데 1초가 넘게 걸리는 확장이 없습니다.

확장이 페이지 로드 시간에 영향을 주거나 페이지에 확장이 너무 많은 경우 결과는 결과의 주의 필요 섹션에 표시됩니다. 결과를 선택하여 느리게 로드되는 확장 또는 너무 많은 확장이 강조 표시된 확장에 대한 세부 정보를 확인합니다. SharePoint용 페이지 진단 도구에 대한 향후 업데이트에는 분석 규칙에 대한 업데이트가 포함될 수 있으므로 항상 최신 버전의 도구가 있는지 확인하세요.

페이지 로드 시간 결과를 보여 주는 스크린샷

결과로 제공되는 정보는 다음을 포함합니다:

이름 및 ID는 페이지에서 확장을 찾는데 도움이 될 수 있는 식별정보를 표시합니다.
합계 는 확장이 모듈 로드 및 초기화에 대한 총 시간을 보여줍니다. 확장이 페이지에서 실행하는 데 걸린 총 상대 시간(시작부터 끝까지)입니다.
모듈 로드 는 확장 JavaScript 및 CSS 파일을 다운로드, 평가 및 로드하는 데 걸린 시간을 보여 줍니다. 그러면 Init 프로세스가 시작됩니다.
Init 은 확장을 통해 데이터를 초기화하는 데 걸린 시간을 보여 낸다.

비동기 호출이며 init 시간은 반환된 프라미스가 해결될 때 onInit 함수에 대한 시간 계산입니다.

이 정보는 디자이너 및 개발자가 문제를 해결하는데 도움을 주기 위해 제공됩니다. 이 정보는 디자인 및 개발 팀에 제공해야 합니다.

확장 개요

SharePoint Framework (SPFx) 확장은 SharePoint 사용자 환경을 확장하는 데 사용될 수 있습니다. SharePoint Framework 확장을 사용하여 알림 영역, 도구 모음 및 목록 데이터 보기를 포함하여 SharePoint 환경의 여러 패싯을 사용자 지정할 수 있습니다.

확장은 필요한 작업을 수행하기 위해 CPU 및 네트워크 리소스를 사용하기 때문에 SharePoint 페이지의 성능에 좋지 않은 영향을 미칠 수 있습니다.

확장에는 다음과 같은 네 가지 유형이 있습니다.

응용 프로그램 사용자 지정자는 페이지에 스크립트를 추가하고 잘 알려진 HTML 요소 자리 표시자에 액세스하여 사용자 지정 렌더링으로 확장합니다.
필드 사용자 지정자는 목록 내에서 필드에 대한 데이터에 수정된 보기를 제공합니다.
명령 집합은 새 작업을 추가하기 위해 SharePoint 명령 표면을 확장하고 동작을 구현하는 데 사용할 수 있는 클라이언트 쪽 코드를 제공합니다.
검색 쿼리 한정자 (미리 보기만)는 검색 쿼리를 실행하기 직전에만 호출됩니다.

확장 성능 문제 해결

확장이 페이지 로드 시간 결과에 영향을 미칩니다에 나열된 확장의 성능 문제를 식별하고 해결하려면 이 섹션의 지침을 따릅니다.

참고

응용 프로그램 사용자 지정자는 페이지 수명 주기 동안 초기 단계에서 실행될 수 있으며 페이지의 다른 확장 성능에 영향을 미칠 수 있습니다.

페이지 진단 도구의 감사 결과는 잠재적인 성능 영향을 식별하는 데 도움이 될 수 있도록 확장을 실행하는 두 단계를 표시합니다.

모듈 로드 는 확장을 로드하는 데 걸리는 시간이기 때문에 확장의 크기에 따라 영향을 받으므로 확장에 필요한 라이브러리만 번들로 묶고 더 가벼운 라이브러리를 선택하는 것이 좋습니다.
초기화는 확장의 초기화 시간이며 확장 개발자는 확장이 불필요한 작업을 수행하고 있거나 초기화 단계에서 너무 많은 명령을 실행하고 있지 않는지 고려해야 합니다.

페이지 작성자는 또한 너무 많은 확장은 페이지 성능에 부정적인 영향을 미치기 때문에 감사 결과를 사용하여 페이지가 너무 많은 확장을 가지고 있지 않는지 확인할 수 있습니다.

확장 크기 및 종속성
- 최적의 정적 리소스 다운로드를 위해서는 Office 365 CDN을 사용해야 합니다. Js/css 파일에는 공개 CDN 출처의 사용을 선호합니다. Office 365 CDN 사용에 대한 자세한 내용은 SharePoint에서 Office 365 CDN(Content Delivery Network) 사용을 참조하세요.
- SharePoint 프레임워크 (SPFx)의 일부로 제공되는반응 및 패브릭 가져오기와 같은 프레임워크를 재사용합니다. 자세한 내용은 SharePoint 프레임워크 개요를 참조하세요.
- 최신 버전의 SharePoint Framework를 사용하고 있는지 확인하고 사용 가능한 새 버전으로 업그레이드합니다.
데이터 페칭/캐싱
- 확장에서 표시할 데이터를 가져오기 위해 추가 서버 호출을 사용하는 경우에는 해당 서버 API가 빠르고 클라이언트 쪽 캐싱을 구현하는지 확인합니다. (규모가 큰 집합에는 localStorage 혹은 IndexDB의 사용 등)
- 중요한 데이터를 제공하는데 여러 번의 호출이 필요한 경우 서버에서 일괄 처리를 하거나 요청을 단일 호출로 통합하는 다른 방법을 고려합니다.
- 또는 데이터의 일부 요소에 느린 API가 필요하지만 초기 렌더링에 중요하지 않은 경우 중요한 데이터가 렌더링된 후 실행되는 별도의 호출로 분리합니다.
- 여러 파트에서 같은 데이터를 사용하는 경우에는 공통 데이터 레이어를 활용하여 중복되는 호출을 방지합니다.
렌더링 시간
- 이미지 및 비디오와 같은 모든 미디어 소스는 컨테이너, 장치 및/또는 네트워크의 제한사항에 맞게 크기가 조정되어 불필요한 대규모 자산이 다운로드되지 않도록 합니다. 콘텐츠 종속성에 대한 자세한 내용은 SharePoint에서 Office 365 CDN(Content Delivery Network) 사용을 참조하세요.
- 리플로, 복잡한 CSS 규칙 또는 복잡한 애니메이션을 발생시키는 API 호출을 방지합니다. 자세한 내용은 브라우저 리플로우 최소화를 참조하세요.
- 일련의 장기 실행 작업을 사용하지 않습니다. 대신 장기 실행 작업은 개별적 큐로 분리합니다. 자세한 내용은 JavaScript 실행 최적화를 참조하세요.
- 프레임의 생략이나 끊김현상을 방지하기 위해 비동기식 렌더링 미디어나 시각적 요소에는 해당 공간을 비축해둡니다. (jank로도 알려짐)
- 특정 브라우저가 렌더링에 사용되는 기능을 지원 하지 않는 경우 polyfill을 로드하거나 종속 코드의 실행을 제외합니다. 이 기능이 중요하지 않은 경우 메모리 누수가 발생하지 않도록 이벤트 처리기와 같은 리소스를 삭제합니다.