Optimalizace výkonu webových částí na stránkách moderního webu SharePointu

Stránky moderního webu SharePointu obsahují webové části, které můžou přispívat k celkové době načítání stránek. Tento článek vám pomůže pochopit, jak určit, jak webové části na vašich stránkách ovlivňují latenci vnímanou uživatelem a jak řešit běžné problémy.

Poznámka

Další informace o výkonu na moderních portálech SharePointu najdete v tématu Výkon v moderním prostředí SharePointu.

Analýza webových částí pomocí nástroje Diagnostika stránky pro SharePoint

Nástroj Diagnostika stránek pro SharePoint je rozšíření prohlížeče pro nové prohlížeče Microsoft Edge (https://www.microsoft.com/edge) a Chrome, které analyzuje moderní portál SharePointu i klasické stránky webu publikování. Nástroj poskytuje sestavu pro každou analyzovanou stránku, která ukazuje, jak si stránka vede s definovanou sadou kritérií výkonu. Pokud chcete nainstalovat nástroj Diagnostika stránek pro SharePoint a získat o tom informace, přečtěte si článek Použití nástroje Diagnostika stránky pro SharePoint.

Poznámka

Nástroj Diagnostika stránky funguje jenom pro SharePoint v Microsoftu 365 a nedá se použít na stránce systému SharePointu.

Když analyzujete stránku sharepointového webu pomocí nástroje Diagnostika stránky pro SharePoint, uvidíte informace o webových částech, které překračují standardní metriku, v části Webové části mají vliv na čas načítání stránky v podokně Diagnostické testy .

Mezi možné výsledky patří:

• Vyžadována pozornost (červená): Jakákoli vlastní webová část, která je viditelná v zobrazení (viditelná část stránky, která se načte jako první), která trvá déle než dvě sekundy. Všechny vlastní webové části mimo oblast zobrazení, které se načtou déle než čtyři sekundy. Celková doba načítání se zobrazuje ve výsledcích testů a je rozdělená podle zatížení modulu, opožděného zatížení, inicializaci a vykreslení.
• Příležitosti ke zlepšení (žlutá): Položky, které můžou mít vliv na dobu načítání stránky, se zobrazují v této části a měly by se kontrolovat a monitorovat. To může zahrnovat webové části Microsoftu "out of the box" (OOTB). Výsledky pro všechny webové části microsoftu zobrazené v této části se automaticky hlásí společnosti Microsoft, takže není nutná žádná akce. Lístek podpory pro šetření byste měli protokolovat pouze v případě, že dochází k pomalému výkonu na stránce a všechny webové části Microsoftu na stránce se zobrazí ve výsledcích v části Příležitosti ke zlepšení . Budoucí aktualizace nástroje Diagnostika stránek pro SharePoint dále rozdělí výsledky na základě konkrétní konfigurace webové části Microsoftu.
• Nevyžaduje se žádná akce (zelená): Vrácení dat žádné webové části trvá déle než dvě sekundy.

Pokud se výsledek doby načítání stránky týká webových částí v části Požadované pozornosti nebo Možnosti vylepšení výsledků, vyberte výsledek a podívejte se na podrobnosti o tom, které webové části se načítají pomalu. Budoucí aktualizace nástroje Diagnostika stránek pro SharePoint můžou zahrnovat aktualizace pravidel analýzy, proto se ujistěte, že máte vždy nejnovější verzi nástroje.

Mezi dostupné informace ve výsledcích patří:

• Autor ukazuje, jestli je webová část vlastní nebo Microsoft OOTB.

• Název a ID zobrazují identifikační informace, které vám můžou pomoct najít webovou část na stránce.

• Total (Celkem ) zobrazuje celkovou dobu načítání, inicializace a vykreslení modulu pro webovou část. Jedná se o celkovou relativní dobu, kterou webová část trvá vykreslení na stránce od začátku do konce.

• Načtení modulu ukazuje čas potřebný ke stažení, vyhodnocení a načtení javascriptových souborů rozšíření a souborů CSS. Pak spustí proces Init.

• Opožděné načtení zobrazuje čas odloženého načítání webových částí, které se nezobrazují v hlavní části stránky. Existují určité podmínky, kdy existuje příliš mnoho webových částí pro vykreslení a jsou ve frontě pro vykreslení, aby se minimalizovala doba načítání stránky.

• Init zobrazuje čas potřebný k inicializaci dat ve webové části.

  Jedná se o asynchronní volání a inicializační čas je výpočet času pro funkci onInit při vyřešení vráceného příslibu.

• Vykreslení zobrazuje čas potřebný k vykreslení uživatelského rozhraní (uživatelského rozhraní) po načtení modulu a dokončení init.

  Je to doba spuštění JavaScriptu pro připojení dom v dokumentu (na stránce). Dokončení vykreslování asynchronních prostředků, například obrázků, může trvat delší dobu.

Tyto informace pomáhají návrhářům a vývojářům při odstraňování problémů. Tyto informace by měly být poskytnuty týmu návrhu a vývoje.

Náprava problémů s výkonem webové části

Postupujte podle pokynů v této části a identifikujte a opravte problémy s výkonem webových částí uvedených ve webových částech, které mají vliv na výsledky doby načítání stránky .

Existují tři kategorie možných příčin nízkého výkonu webových částí. Následující informace vám pomůžou určit, které problémy se týkají vašeho scénáře, a napravit je.

• Velikost skriptu webové části a závislosti
  • Optimalizujte počáteční skript, který vykresluje hlavní scénář pouze pro režim zobrazení.
  • Přesuňte méně časté scénáře a kód režimu úprav (jako je podokno vlastností) do samostatných bloků pomocí příkazu import().
  • Zkontrolujte závislosti souboru package.json a úplně odeberte veškerý nedostupný kód. Přesuňte všechny závislosti pouze pro testování nebo sestavení do devDependencies.
  • K optimálnímu stahování statických prostředků se vyžaduje použití Office 365 CDN. Veřejné zdroje CDN jsou vhodnější pro soubory js/css . Další informace o používání Office 365 CDN najdete v tématu Použití Office 365 Content Delivery Network (CDN) se SharePointem.
  • Opakovaně používejte architektury, jako jsou React a importy prostředků infrastruktury, které jsou součástí SharePoint Framework (SPFx). Další informace najdete v tématu Přehled SharePoint Framework.
  • Ujistěte se, že používáte nejnovější verzi SharePoint Framework, a upgradujte na nové verze, jakmile budou k dispozici.
• Načítání a ukládání dat do mezipaměti
  • Pokud se webová část při načítání dat pro zobrazení spoléhá na další volání serveru, ujistěte se, že jsou tato serverová rozhraní API rychlá, nebo implementujte ukládání do mezipaměti na straně klienta (například použití localStorage nebo IndexedDB pro větší sady).
  • Pokud se k vykreslení důležitých dat vyžaduje více volání, zvažte dávkování na serveru nebo jiné metody konsolidace požadavků na jedno volání.
  • Případně pokud některé prvky dat vyžadují pomalejší rozhraní API, ale nejsou důležité pro počáteční vykreslování, oddělte je na samostatné volání, které se spustí po vykreslení důležitých dat.
  • Pokud stejná data používá více částí, využijte společnou datovou vrstvu, abyste se vyhnuli duplicitním voláním.
• Doba vykreslování
  • Všechny zdroje médií, jako jsou obrázky a videa, by měly být dimenzované na limity kontejneru, zařízení nebo sítě, aby se zabránilo stahování nepotřebných velkých prostředků. Další informace o závislostech obsahu najdete v tématu Použití Office 365 Content Delivery Network (CDN) se SharePointem.
  • Vyhněte se voláním rozhraní API, která způsobují přeformátování, složitá pravidla CSS nebo složité animace. Další informace najdete v tématu Minimalizace přeformátování prohlížeče.
  • Nepoužívejte zřetězených dlouho běžících úloh. Místo toho rozdělte dlouhotrvající úlohy do samostatných front. Další informace najdete v tématu Optimalizace spouštění JavaScriptu.
  • Vyhraďte odpovídající prostor pro asynchronní vykreslování médií nebo vizuálních prvků, abyste se vyhnuli vynechání snímků a koktání (označovaných také jako jank).
  • Pokud určitý prohlížeč nepodporuje funkci používanou při vykreslování, načtěte polyfill nebo vylučte spuštění závislého kódu. Pokud tato funkce není kritická, vyřaďte prostředky, jako jsou obslužné rutiny událostí, abyste se vyhnuli nevrácení paměti.

Než provedete revize stránky za účelem nápravy problémů s výkonem, poznamenejte si ve výsledcích analýzy dobu načítání stránky. Spusťte nástroj znovu po revizi, abyste zjistili, jestli je nový výsledek v rámci standardního standardu, a zkontrolujte dobu načítání nové stránky, abyste zjistili, jestli nedošlo k vylepšení.

Poznámka

Doba načítání stránky se může lišit v závislosti na různých faktorech, jako je zatížení sítě, denní doba a další přechodné podmínky. Čas načítání stránky byste měli otestovat několikrát před provedením změn a po provedení změn, které vám pomůžou s průměrem výsledků.

Související články

Ladění výkonu SharePointu

Výkon v moderním prostředí SharePointu

Sítě pro doručování obsahu

Použití Office 365 Content Delivery Network (CDN) se SharePointem