Optymalizowanie wydajności składników Web Part na nowoczesnych stronach witryny usługi SharePoint Online

Nowoczesne strony witryny usługi SharePoint Online zawierają składniki Web Part, które mogą przyczyniać się do ogólnego czasu ładowania stron. Ten artykuł pomoże Ci zrozumieć, jak określić, w jaki sposób składniki Web Part na stronach wpływają na opóźnienie postrzegane przez użytkownika oraz jak rozwiązywać typowe problemy.

Uwaga

Aby uzyskać więcej informacji na temat wydajności w nowoczesnych portalach usługi SharePoint Online, zobacz Wydajność w nowoczesnym środowisku programu SharePoint.

Analizowanie składników Web Part za pomocą narzędzia Diagnostyka strony dla programu SharePoint

Narzędzie Diagnostyka strony dla programu SharePoint to rozszerzenie przeglądarki dla nowych przeglądarek Microsoft Edge (https://www.microsoft.com/edge) i Chrome, które analizują zarówno nowoczesny portal usługi SharePoint Online, jak i klasyczne strony witryny publikowania. Narzędzie udostępnia raport dla każdej analizowanej strony pokazujący sposób działania strony względem zdefiniowanego zestawu kryteriów wydajności. Aby zainstalować i dowiedzieć się więcej o narzędziu Diagnostyka strony dla programu SharePoint, odwiedź stronę Korzystanie z narzędzia diagnostyki strony dla usługi SharePoint Online.

Uwaga

Narzędzie diagnostyki strony działa tylko dla usługi SharePoint Online i nie może być używane na stronie systemu programu SharePoint.

Podczas analizowania strony witryny programu SharePoint za pomocą narzędzia Diagnostyka strony dla programu SharePoint można zobaczyć informacje o składnikach Web Part przekraczających metrykę punktu odniesienia w składnikach Web Part, które mają wpływ na wynik ładowania strony w okienku Testy diagnostyczne .

Możliwe wyniki obejmują:

• Wymagana uwaga (czerwona ): dowolny niestandardowy składnik Web Part widoczny w okienku widoków (widoczny na ekranie część strony, która jest ładowana jako pierwsza), który trwa dłużej niż dwie sekundy. Wszystkie niestandardowe składniki Web Part poza portem widoków, które mogą być ładowane dłużej niż cztery sekundy. Łączny czas ładowania jest wyświetlany w wynikach testu i jest podzielony na obciążenia modułów, obciążenie z opóźnieniem, init i renderowanie.
• Możliwości poprawy (żółty): Elementy, które mogą mieć wpływ na czas ładowania strony, są wyświetlane w tej sekcji i powinny być przeglądane i monitorowane. Może to obejmować składniki Web Part firmy Microsoft "po wyjętej z pudełka" (OOTB). Wyniki dla wszystkich składników Web Part firmy Microsoft pokazanych w tej sekcji są automatycznie zgłaszane do firmy Microsoft, więc nie jest wymagana żadna akcja. Bilet pomocy technicznej na potrzeby badania należy rejestrować tylko wtedy, gdy na stronie występuje bardzo niska wydajność, a wszystkie składniki Web Part firmy Microsoft na stronie są wyświetlane w wynikach w sekcji Możliwości poprawy . Pamiętaj, że przyszła aktualizacja narzędzia Diagnostyka strony dla programu SharePoint dodatkowo podzieli wyniki na podstawie określonej konfiguracji składnika Web Part firmy Microsoft.
• Nie jest wymagana żadna akcja (kolor zielony): zwracanie danych przez żaden składnik Web Part nie trwa dłużej niż dwie sekundy.

Jeśli składnik Web Part ma wpływ na wynik czasu ładowania strony , zostanie wyświetlony w sekcji Wymagania dotyczące uwagi lub Możliwości poprawy wyników, kliknij wynik, aby wyświetlić szczegółowe informacje o tym, które składniki Web Part ładują się powoli. Przyszłe aktualizacje narzędzia Diagnostyka strony dla programu SharePoint mogą obejmować aktualizacje reguł analizy, dlatego upewnij się, że zawsze masz najnowszą wersję narzędzia.

Informacje dostępne w wynikach obejmują:

• Wykonane przez pokazuje, czy składnik Web Part jest niestandardowy, czy microsoft OOTB.

• Nazwa i identyfikator zawierają informacje identyfikujące, które mogą pomóc w znalezieniu składnika Web Part na stronie.

• Suma przedstawia całkowity czas ładowania, inicjowania i renderowania składnika Web Part. Jest to całkowity względny czas renderowania składnika Web Part na stronie od początku do końca.

• Ładowanie modułu pokazuje czas potrzebny do pobrania, oceny i załadowania rozszerzeń plików JavaScript i CSS. Następnie rozpocznie się proces Init.

• Ładowanie z opóźnieniem pokazuje czas odroczonego ładowania składników Web Part, które nie są widoczne w sekcji głównej strony. Istnieją pewne warunki, w których istnieje zbyt wiele składników Web Part do renderowania i są one umieszczane w kolejce do renderowania w celu zminimalizowania czasu ładowania strony.

• Init pokazuje czas potrzebny składnikowi Web Part na zainicjowanie danych.

  Jest to wywołanie asynchroniczne i czas init jest obliczeniem czasu dla funkcji onInit po rozwiązaniu zwróconej obietnicy.

• Renderowanie pokazuje czas potrzebny na renderowanie interfejsu użytkownika po zakończeniu ładowania modułu i inicjowania.

  Jest to czas wykonywania języka JavaScript, aby zainstalować dom w dokumencie (strona). Renderowanie zasobów asynchronicznych, na przykład obrazów, może zająć więcej czasu.

Te informacje ułatwiają projektantom i deweloperom rozwiązywanie problemów. Te informacje należy przekazać zespołowi projektowemu i programistycznemu.

Korygowanie problemów z wydajnością składników Web Part

Postępuj zgodnie ze wskazówkami w tej sekcji, aby zidentyfikować i rozwiązać problemy z wydajnością składników Web Part wymienione w składnikach Web Part mają wpływ na wyniki czasu ładowania strony .

Istnieją trzy kategorie możliwych przyczyn niskiej wydajności składników Web Part. Skorzystaj z poniższych informacji, aby określić, które problemy dotyczą twojego scenariusza, i skorygować je.

• Rozmiar i zależności skryptu składnika Web Part
  • Zoptymalizuj skrypt początkowy, który renderuje scenariusz linii głównej tylko dla trybu wyświetlania.
  • Przenieś rzadziej używane scenariusze i edytuj kod trybu (na przykład okienko właściwości) do oddzielnych fragmentów przy użyciu instrukcji import( ).
  • Przejrzyj zależności pliku package.json, aby całkowicie usunąć utracony kod. Przenieś wszystkie zależności tylko do testowania/kompilacji do devDependencies.
  • Użycie Office 365 cdn jest wymagane do optymalnego pobierania zasobów statycznych. Publiczne źródła usługi CDN są preferowane w przypadku plików js/css . Aby uzyskać więcej informacji na temat korzystania z usługi Office 365 CDN, zobacz Korzystanie z Office 365 Content Delivery Network (CDN) w usłudze SharePoint Online.
  • Ponownie używaj struktur, takich jak React i importowanie sieci szkieletowej, które są częścią SharePoint Framework (SPFx). Aby uzyskać więcej informacji, zobacz Omówienie SharePoint Framework.
  • Upewnij się, że używasz najnowszej wersji SharePoint Framework i uaktualniasz je do nowych wersji w miarę ich udostępniania.
• Pobieranie/buforowanie danych
  • Jeśli składnik Web Part korzysta z dodatkowych wywołań serwera w celu pobrania danych do wyświetlenia, upewnij się, że te interfejsy API serwera są szybkie i/lub implementują buforowanie po stronie klienta (na przykład przy użyciu localStorage lub IndexedDB dla większych zestawów).
  • Jeśli do renderowania krytycznych danych jest wymaganych wiele wywołań, rozważ utworzenie partii na serwerze lub inne metody konsolidowania żądań do pojedynczego wywołania.
  • Alternatywnie, jeśli niektóre elementy danych wymagają wolniejszego interfejsu API, ale nie są krytyczne dla początkowego renderowania, należy je oddzielić od oddzielnego wywołania wykonywanego po renderowaniu krytycznych danych.
  • Jeśli wiele części używa tych samych danych, użyj wspólnej warstwy danych, aby uniknąć zduplikowanych wywołań.
• Czas renderowania
  • Wszystkie źródła multimediów, takie jak obrazy i filmy wideo, powinny mieć rozmiar do granic kontenera, urządzenia i/lub sieci, aby uniknąć pobierania niepotrzebnych dużych zasobów. Aby uzyskać więcej informacji na temat zależności zawartości, zobacz Korzystanie z Office 365 Content Delivery Network (CDN) z usługą SharePoint Online.
  • Unikaj wywołań interfejsu API, które powodują ponowne przepływy, złożone reguły CSS lub skomplikowane animacje. Aby uzyskać więcej informacji, zobacz Minimizing browser reflow (Minimalizowanie ponownego przepływu przeglądarki).
  • Unikaj używania długotrwałych zadań łańcuchowych. Zamiast tego podziel długotrwałe zadania na oddzielne kolejki. Aby uzyskać więcej informacji, zobacz Optymalizowanie wykonywania języka JavaScript.
  • Zarezerwuj odpowiednie miejsce na asynchroniczne renderowanie multimediów lub elementów wizualnych, aby uniknąć pominięcia ramek i jąkania (znanego również jako jank).
  • Jeśli określona przeglądarka nie obsługuje funkcji używanej w renderowaniu, załaduj wypełnienie lub wyklucz uruchomiony kod zależny. Jeśli funkcja nie jest krytyczna, należy usunąć zasoby, takie jak programy obsługi zdarzeń, aby uniknąć przecieków pamięci.

Przed wprowadzeniem poprawek strony w celu rozwiązania problemów z wydajnością zanotuj czas ładowania strony w wynikach analizy. Uruchom narzędzie ponownie po poprawce, aby sprawdzić, czy nowy wynik mieści się w standardowej linii bazowej, i sprawdź czas ładowania nowej strony, aby sprawdzić, czy nastąpiła poprawa.

Uwaga

Czas ładowania strony może się różnić w zależności od różnych czynników, takich jak obciążenie sieci, godzina dnia i inne przejściowe warunki. Czas ładowania strony należy przetestować kilka razy przed wprowadzeniem zmian i po nich, aby ułatwić uśrednienie wyników.

Tematy pokrewne

Dostrajanie wydajności usługi SharePoint Online

Dostrajanie wydajności Office 365

Wydajność w nowoczesnym środowisku programu SharePoint

Sieci dostarczania zawartości

Korzystanie z Office 365 Content Delivery Network (CDN) w usłudze SharePoint Online