Prestaties van webonderdelen optimaliseren in moderne SharePoint-sitepagina's

Moderne SharePoint-sitepagina's bevatten webonderdelen die kunnen bijdragen aan de algehele laadtijden van pagina's. In dit artikel leert u hoe u kunt bepalen hoe webonderdelen op uw pagina's de door gebruikers waargenomen latentie beïnvloeden en hoe u veelvoorkomende problemen kunt oplossen.

Opmerking

Zie Prestaties in de moderne SharePoint-ervaring voor meer informatie over prestaties in moderne SharePoint-portals.

Het hulpprogramma Paginadiagnose voor SharePoint gebruiken om webonderdelen te analyseren

Het hulpprogramma Paginadiagnose voor SharePoint is een browserextensie voor de nieuwe browsers Microsoft Edge (https://www.microsoft.com/edge) en Chrome waarmee zowel de pagina's van de moderne SharePoint-portal als de klassieke publicatiesite worden geanalyseerd. Het hulpprogramma biedt een rapport voor elke geanalyseerde pagina waarin wordt weergegeven hoe de pagina presteert op basis van een gedefinieerde set prestatiecriteria. Als u het hulpprogramma Paginadiagnose voor SharePoint wilt installeren en meer wilt weten over het hulpprogramma Paginadiagnose voor SharePoint, gaat u naar Het hulpprogramma Paginadiagnose voor SharePoint gebruiken.

Opmerking

Het hulpprogramma Paginadiagnose werkt alleen voor SharePoint en kan niet worden gebruikt op een SharePoint-systeempagina.

Wanneer u een SharePoint-sitepagina analyseert met het hulpprogramma Paginadiagnose voor SharePoint, ziet u informatie over webonderdelen die de metrische basislijn overschrijden in de webonderdelen die van invloed zijn op het laadtijdresultaat van de pagina in het deelvenster Diagnostische tests .

Mogelijke resultaten zijn:

• Aandacht vereist (rood): een aangepast webonderdeel dat zichtbaar is in de viewport (scherm zichtbaar gedeelte van de pagina, dat het eerst wordt geladen) dat langer duurt dan twee seconden om te laden. Alle aangepaste webonderdelen buiten de viewport die langer dan vier seconden duren om te laden. De totale laadtijd wordt weergegeven in de testresultaten en wordt uitgesplitst naar modulebelasting, luie belasting, init en render.
• Verbeteringsmogelijkheden (geel): items die van invloed kunnen zijn op de laadtijd van pagina's worden in deze sectie weergegeven en moeten worden gecontroleerd en gecontroleerd. Dit kan bestaan uit 'out of the box' (OOTB) Microsoft-webonderdelen. Resultaten voor Microsoft-webonderdelen die in deze sectie worden weergegeven, worden automatisch aan Microsoft gerapporteerd, dus er is geen actie vereist. U moet alleen een ondersteuningsticket registreren voor onderzoek als de prestaties op de pagina traag zijn en alle Microsoft-webonderdelen op de pagina worden weergegeven in de resultaten in de sectie Verbeteringsmogelijkheden . In een toekomstige update van het hulpprogramma Paginadiagnose voor SharePoint worden de resultaten verder opgesplitst op basis van de specifieke configuratie van het Microsoft-webonderdeel.
• Geen actie vereist (groen): het duurt niet langer dan twee seconden om gegevens te retourneren.

Als de webonderdelen van invloed zijn op het laadtijdresultaat van de pagina wordt weergegeven in de sectie Aandacht vereist of Verbeteringsmogelijkheden van de resultaten, selecteert u het resultaat om details te zien over welke webonderdelen langzaam worden geladen. Toekomstige updates van het hulpprogramma Paginadiagnose voor SharePoint kunnen updates van analyseregels bevatten. Zorg er dus voor dat u altijd de nieuwste versie van het hulpprogramma hebt.

De beschikbare informatie in de resultaten omvat:

• Gemaakt door laat zien of het webonderdeel aangepast of Microsoft OOTB is.

• Naam en id geven identificatiegegevens weer waarmee u het webonderdeel op de pagina kunt vinden.

• Totaal toont de totale tijd voor het webonderdeel voor het laden, initialiseren en weergeven van de module. Dit is de totale relatieve tijd die het webonderdeel nodig heeft om op de pagina weer te geven, van begin tot einde.

• Module laden toont de tijd die nodig is om de extensies JavaScript- en CSS-bestanden te downloaden, evalueren en laden. Vervolgens wordt het Init-proces gestart.

• Lazy Load geeft de tijd weer voor het uitstellen van het laden van webonderdelen die niet in de hoofdsectie van de pagina worden weergegeven. Er zijn bepaalde voorwaarden waarbij er te veel webonderdelen zijn om weer te geven en ze in de wachtrij worden geplaatst om te worden weergegeven om de laadtijd van de pagina te minimaliseren.

• Init toont de tijd die nodig is voor het webonderdeel om de gegevens te initialiseren.

  Het is een asynchrone aanroep en init time is de berekening van de tijd voor de functie onInit wanneer de geretourneerde belofte is opgelost.

• Weergeven toont de tijd die nodig is om de gebruikersinterface (gebruikersinterface) weer te geven zodra het laden van de module en Init zijn voltooid.

  Het is de uitvoeringstijd van JavaScript om de DOM in het document (pagina) te koppelen. Het weergeven van asynchrone resources, bijvoorbeeld afbeeldingen, kan meer tijd in beslag nemen.

Deze informatie wordt verstrekt om ontwerpers en ontwikkelaars te helpen bij het oplossen van problemen. Deze informatie moet worden verstrekt aan uw ontwerp- en ontwikkelingsteam.

Prestatieproblemen met webonderdelen oplossen

Volg de richtlijnen in deze sectie om prestatieproblemen te identificeren en op te lossen met webonderdelen die worden vermeld in de webonderdelen die van invloed zijn op de laadtijd van pagina's.

Er zijn drie categorieën mogelijke oorzaken voor slechte prestaties van webonderdelen. Gebruik de volgende informatie om te bepalen welke problemen van toepassing zijn op uw scenario en deze op te lossen.

• Scriptgrootte en afhankelijkheden van webonderdelen
  • Optimaliseer het eerste script dat het hoofdlijnscenario alleen voor de weergavemodus weergeeft.
  • Verplaats de minder frequente scenario's en bewerkingsmoduscode (zoals het eigenschappenvenster) om segmenten te scheiden met behulp van de instructie import().
  • Controleer de afhankelijkheden van het package.json-bestand om alle dode code volledig te verwijderen. Verplaats alle test-/buildafhankelijkheden alleen naar devDependencies.
  • Het gebruik van de Office 365 CDN is vereist voor het optimaal downloaden van statische resources. Openbare CDN-oorsprongen hebben de voorkeur voor js/css-bestanden . Zie Het Office 365 Content Delivery Network (CDN) gebruiken met SharePoint voor meer informatie over het gebruik van de Office 365 CDN.
  • Frameworks opnieuw gebruiken, zoals React en Fabric-importbewerkingen die deel uitmaken van de SharePoint Framework (SPFx). Zie Overzicht van de SharePoint Framework voor meer informatie.
  • Zorg ervoor dat u de nieuwste versie van de SharePoint Framework gebruikt en voer een upgrade uit naar nieuwe versies zodra deze beschikbaar zijn.
• Gegevens ophalen/opslaan in cache
  • Als het webonderdeel afhankelijk is van extra serveraanroepen om gegevens op te halen voor weergave, moet u ervoor zorgen dat die server-API's snel zijn en/of caching aan de clientzijde implementeren (zoals het gebruik van localStorage of IndexedDB voor grotere sets).
  • Als er meerdere aanroepen nodig zijn om kritieke gegevens weer te geven, kunt u overwegen om batches op de server of andere methoden voor het consolideren van aanvragen naar één aanroep te gebruiken.
  • Als sommige gegevenselementen een tragere API vereisen, maar niet essentieel zijn voor de eerste rendering, koppelt u deze los van een afzonderlijke aanroep die wordt uitgevoerd nadat kritieke gegevens zijn weergegeven.
  • Als meerdere onderdelen dezelfde gegevens gebruiken, gebruikt u een gemeenschappelijke gegevenslaag om dubbele aanroepen te voorkomen.
• Renderingtijd
  • Alle mediabronnen, zoals afbeeldingen en video's, moeten worden aangepast aan de limieten van de container, het apparaat en/of het netwerk om te voorkomen dat onnodig grote assets worden gedownload. Zie Het Office 365 CDN (Content Delivery Network) gebruiken met SharePoint voor meer informatie over inhoudsafhankelijkheden.
  • Vermijd API-aanroepen die reflow, complexe CSS-regels of gecompliceerde animaties veroorzaken. Zie Browserreflow minimaliseren voor meer informatie.
  • Vermijd het gebruik van geketende langlopende taken. In plaats daarvan kunt u langlopende taken opsplitsen in afzonderlijke wachtrijen. Zie JavaScript-uitvoering optimaliseren voor meer informatie.
  • Reserveer de bijbehorende ruimte voor asynchrone weergave van media of visuele elementen om overgeslagen frames en haperingen (ook wel jank genoemd) te voorkomen.
  • Als een bepaalde browser geen ondersteuning biedt voor een functie die wordt gebruikt in rendering, laadt u een polyfill of sluit u het uitvoeren van afhankelijke code uit. Als de functie niet kritiek is, verwijdert u resources zoals gebeurtenis-handlers om geheugenlekken te voorkomen.

Voordat u pagina-revisies aanbrengt om prestatieproblemen op te lossen, noteert u de laadtijd van de pagina in de analyseresultaten. Voer het hulpprogramma opnieuw uit na de revisie om te zien of het nieuwe resultaat binnen de basislijnstandaard valt en controleer de laadtijd van de nieuwe pagina om te zien of er een verbetering is opgetreden.

Opmerking

De laadtijd van pagina's kan variëren op basis van verschillende factoren, zoals netwerkbelasting, tijdstip van de dag en andere tijdelijke omstandigheden. U moet de laadtijd van de pagina een paar keer testen voor en na het aanbrengen van wijzigingen, zodat u het gemiddelde van de resultaten kunt berekenen.

Verwante artikelen

Afstemmen SharePoint prestaties

Prestaties van Office 365 afstemmen

Prestaties in de moderne SharePoint-ervaring

Netwerken voor contentlevering

Het CDN (Content Delivery Network) van Office 365 gebruiken met SharePoint