Optimera webbdelsprestanda i SharePoint moderna webbplatssidor online
SharePoint Moderna webbplatssidor online innehåller webbdelar som kan bidra till sidinläsningen. Den här artikeln hjälper dig att förstå hur webbdelar på sidorna påverkar användarens uppfattas fördröjning och hur du åtgärdar vanliga problem.
Anteckning
Mer information om prestanda i SharePoint moderna portaler finns i Prestanda i det moderna SharePoint upplevelse.
Använd siddiagnostikverktyget för SharePoint för att analysera webbdelar
Siddiagnostik för SharePoint är ett webbläsartillägg för nya Microsoft Edge ( och Chrome-webbläsare som analyserar både moderna SharePoint Online-portalen och klassiska https://www.microsoft.com/edge) publiceringswebbplatssidor. Verktyget innehåller en rapport för varje analyserad sida som visar hur sidan fungerar mot en definierad uppsättning prestandavillkor. Mer information om verktyget Siddiagnostik för SharePoint finns i Använda verktyget Siddiagnostik för SharePoint Online.
Anteckning
Verktyget Siddiagnostik fungerar bara för SharePoint Online och kan inte användas på en SharePoint systemsida.
När du analyserar en SharePoint-webbplatssida med verktyget Siddiagnostik för SharePoint kan du se information om webbdelar som överskrider baslinjemåttet i webbdelarna påverkar inläsningstiden för sidor i fönstret Diagnostiktest.
Möjliga resultat är:
- Obs! Obligatoriskt (rött): Alla anpassade webbdel som visas i visningsområdet (den del av sidan som läses in först) som tar längre tid än två sekunder att läsa in. Anpassade webbdelar utanför visningsområdet som tar längre tid än fyra sekunder att läsa in. Den totala inläsningstiden visas i testresultat och delas upp efter modulbelastning, lat inläsning, init och återgivning.
- Förbättringsmöjligheter (gult): Objekt som kan påverka sidinläsningstiden visas i det här avsnittet och bör granskas och övervakas. Det här kan inkludera Microsoft-webbdelar (out of the box) (OOTB). Resultat för alla Microsoft-webbdelar som visas i det här avsnittet rapporteras automatiskt till Microsoft, så ingen åtgärd krävs. Du bör bara logga ett support ärende för undersökning om du upplever mycket långsam prestanda på sidan och alla Microsoft-webbdelar på sidan visas i resultatet i avsnittet Förbättringsmöjligheter. Observera att en kommande siddiagnostik för SharePoint kommer att fortsätta dela upp resultaten baserat på den specifika konfigurationen av Microsoft-webbdelen.
- Ingen åtgärd krävs (grön): Ingen webbdel tar längre tid än två sekunder att returnera data.
Om webbdelarna påverkar inläsningstiden för sidan visas i avsnittet Affärsmöjligheter för uppmärksamhet eller Förbättring av affärsmöjligheter i resultatet klickar du på resultatet för att se information om vilka webbdelar som läses in långsamt. Framtida uppdateringar av siddiagnostik för SharePoint kan innehålla uppdateringar av analysregler, så se till att du alltid har den senaste versionen av verktyget.

Information som är tillgänglig i resultatet omfattar:
Skapad av visar om webbdelen är anpassad eller Microsoft OOTB.
Namn och ID visar identifieringsinformation som kan hjälpa dig att hitta webbdelen på sidan.
Summa visar den totala tiden för inläsning, initiering och återgivning av webbdelen. Det är den totala relativa tid som webbdelen tar för att återge på sidan, från början till slutet.
Modulladdning visar den tid det tar att ladda ned, utvärdera och läsa in tilläggen JavaScript- och CSS-filer. Sedan startas Init-processen.
I Lazy Load visas tiden för uppskjuten inläsning av webbdelar som inte visas i huvudavsnittet på sidan. Det finns vissa villkor där det finns för många webbdelar för att återges och de är i kö för att återges för att minimera inläsningstiden för sidan.
Init visar hur lång tid det tar för webbdelen att initiera data.
Det är ett asynkront samtal och inittid är beräkningen av tid för funktionen onInit när den returnerade lovat har lösts.
Återgivningen visar tiden det tar att återge användargränssnittet (användargränssnittet) när modulläsningen och Init har slutförts.
Det är JavaScript-körningstiden för att installera DOM i dokumentet (sidan). Återgivning av asynkrona resurser, till exempel bilder, kan ta ytterligare tid att slutföra.
Den här informationen finns för att hjälpa designers och utvecklare att felsöka problem. Den här informationen bör ges till din design- och utvecklingsteam.
Åtgärda prestandaproblem för webbdel
Följ instruktionerna i det här avsnittet för att identifiera och åtgärda prestandaproblem med webbdelar som listas i webbdelarna påverkar inläsningstiden för sidor.
Det finns tre kategorier av möjliga orsaker till dålig prestanda för webbdel. Använd informationen nedan för att avgöra vilka problem som gäller för ditt scenario och åtgärda dem.
- Webbdelsskriptstorlek och beroenden
- Optimera det första skriptet som återger huvudlinjescenariot endast för visningsläge.
- Flytta mindre vanliga scenarier och redigeringslägeskod (som egenskapsfönstret) för att dela upp delar med hjälp av import()-satsen.
- Granska beroenden för filen package.json för att ta bort all kod som finns helt och hållet. Flytta test-/build-beroenden till devDependencies.
- Användning av Office 365 CDN krävs för optimal nedladdning av statiska resurser. Offentliga CDN ursprung är bättre för js/css-filer. Mer information om hur du använder Office 365 CDN finns i Använda Office 365 Content Delivery Network (CDN) med SharePoint Online.
- Återanvänd ramverk som React och Fabric-import som ingår i SharePoint Framework (SPFx). Mer information finns i Översikt över SharePoint Framework.
- Kontrollera att du använder den senaste versionen av SharePoint Framework och uppgradera till nya versioner när de blir tillgängliga.
- Hämta/cachelagra data
- Om webbdelen förlitar sig på extra serveranrop för att hämta data för visning ska du se till att de server-API:erna är snabba och/eller implementera cachelagring på klientsidan (till exempel att använda lokalLagring eller IndexedDB för större uppsättningar).
- Om flera anrop krävs för att återge viktiga data kan det vara bra att batcha på servern eller andra metoder för att konsolidera förfrågningar till ett enda samtal.
- Om vissa dataelement kräver ett långsammare API, men inte är kritiska för den första renderingen, kan du avkoda dessa till ett separat anrop som körs när viktiga data har återgets.
- Om flera delar använder samma data använder du ett vanligt datalager för att undvika dubbletter.
- Renderingstid
- Alla mediekällor, till exempel bilder och videoklipp, bör ha en storlek som är lika stor som behållaren, enheten och/eller nätverket för att undvika nedladdning av onödiga stora tillgångar. Mer information om innehållsberoenden finns i Använda den Office 365 Content Delivery Network (CDN) med SharePoint Online.
- Undvik API-anrop som leder till flödesfördrång, komplexa CSS-regler eller komplicerade animeringar. Mer information finns i Minimera webbläsarens flödesomformning.
- Undvik att använda kedjeaktiviteter som körs länge. I stället kan du dela upp långvariga uppgifter i separata köer. Mer information finns i Optimera körning av JavaScript.
- Reservera motsvarande utrymme för asynkron rendering av media eller visuella element för att undvika överhoppade ramar och hackar (kallas även jank).
- Om en viss webbläsare inte har stöd för en funktion som används för rendering kan du antingen läsa in en polyfyll eller exkludera att köra beroende kod. Om funktionen inte är kritisk kasserar du resurser som händelsehanterare för att undvika minnesläckor.
Innan du gör sidändringar för att åtgärda prestandaproblem bör du anteckna inläsningstiden för sidan i analysresultatet. Kör verktyget igen efter ändringen för att se om det nya resultatet ligger inom baslinjestandarden och kontrollera inläsningstiden för den nya sidan för att se om det finns en förbättring.

Anteckning
Sidinläsningstiden kan variera beroende på en mängd faktorer, till exempel nätverksbelastning, tid på dagen och andra tillfälliga villkor. Du bör testa inläsningstiden några gånger före och efter ändringarna för att beräkna medelvärdet för resultatet.
Relaterade ämnen
Justera SharePoint onlineprestanda
Prestanda i modern SharePoint upplevelse
Använda Office 365 Content Delivery Network (CDN) med SharePoint Online