Comment rendre votre site plus rapidement avec l'API Performance

Ce didacticiel montre comment tirer parti de l'API Performance pour capturer des métriques de performances détaillées des utilisateurs réels en interaction avec votre application Web. Alors que le navigateur Devtools propose des informations sur les performances, ils ne reflètent pas avec précision les diverses conditions réelles que les utilisateurs éprouvent sur divers appareils, emplacements et connexions réseau.

Avantages clés de l'API de performance:

• Précision du monde réel: L'API de performance fournit une image beaucoup plus réaliste des performances de l'application par rapport aux tests de Devtools isolés.
• Métriques complètes: Il capture des mesures tout au long du cycle de vie de la page, y compris la navigation, le chargement des ressources, le rendu et les temps d'exécution de la logique d'application personnalisés.
• Du timing à haute résolution: En utilisant une minuterie à haute résolution, il enregistre des horaires jusqu'à des fractions d'une milliseconde, capturant des détails tels que la redirection et les temps de recherche DNS, impossibles avec des minuteries standard.
• Mesure personnalisable: permet une synchronisation précise des fonctions de votre application, en travaillant de manière transparente à travers JavaScript côté client, les travailleurs Web, le Deno et le Node.js.
• Analyse multiplateforme: permet la mesure des performances sur les périphériques et les réseaux utilisateur réels, simplifiant l'identification et l'optimisation des performances.
.

Comprendre l'API de performance:

L'API de performance utilise un tampon pour stocker les mesures de performance en tant qu'objets aux étapes clés du cycle de vie d'une page Web:

1. Navigation de page: Enregistre les redirections, les connexions, les poignées de main et les événements DOM.
2. Chargement des ressources: suit les temps de chargement des actifs comme les images, les CSS, les scripts et les appels ajax.
3. Métriques de peinture: Capture les informations de rendu du navigateur (par exemple, première peinture contente).
4. Performances personnalisées: Permet la mesure des temps de traitement des applications arbitraires pour identifier les fonctions lentes.

La prise en charge de l'API peut être vérifiée avec:

if ('performance' in window) {
  // Use Performance APIs
}

Remarque: La prise en charge de Safari pour toutes les méthodes n'est pas complète, malgré la mise en œuvre de la majorité de l'API. Les API de synchronisation personnalisées sont également disponibles dans Node.js (en utilisant le module perf_hooks) et Deno (nécessite --allow-hrtime).

au-delà de Date():

Alors que Date() peut mesurer le temps écoulé, sa précision en millisecondes et sa dépendance au temps du système (sensible aux ajustements de la SG) limitent sa précision. La minuterie haute résolution de l'API de performance et les mesures supplémentaires (comme la redirection et les temps DNS) fournissent des détails supérieurs.

Enregistrement et rapport des métriques:

Les données de performance côté client ont besoin d'une destination. Vous pouvez envoyer ces données à votre serveur pour analyse en utilisant AJAX, Fetch, XMLHTTPRequest ou l'API Beacon. De nombreuses plateformes d'analyse offrent également des API d'événements personnalisés pour l'enregistrement des horaires (par exemple, l'API de chronométrage des utilisateurs Google Analytics).

Timing de navigation de la page:

Les tests sur les connexions rapides ne reflètent pas les expériences des utilisateurs réels. L'API de synchronisation de navigation fournit un objet PerformanceNavigationTiming contenant des informations détaillées sur les redirections, les temps de chargement, les tailles de fichiers, les événements DOM, etc., comme observé par l'utilisateur.

Accédez à cet objet en utilisant:

if ('performance' in window) {
  // Use Performance APIs
}

ou

const pagePerf = performance.getEntriesByType('navigation');

Les deux renvoient un tableau avec un seul objet contenant des propriétés en lecture seule (par exemple, startTime, duration, domComplete, diverses métriques de synchronisation).

Timing des ressources de la page:

L'API de synchronisation des ressources fournit des objets PerformanceResourceTiming pour chaque actif chargé (images, CSS, scripts, etc.). Utilisation:

const pagePerf = performance.getEntriesByName(window.location);

Cela renvoie un tableau d'objets, chacun avec des propriétés de synchronisation similaires à la synchronisation de la navigation, mais sans données de navigation et DOM. Les ressources individuelles sont accessibles en utilisant getEntriesByName().

Exemple: Analyser les temps et tailles de chargement de fichiers CSS:

const resPerf = performance.getEntriesByType('resource');

Timing de peinture du navigateur:

L'API de synchronisation de peinture fournit des objets PerformancePaintTiming pour first-paint et first-contentful-paint, cruciaux pour évaluer les performances perçues. Accédez à eux avec:

const css = performance.getEntriesByType('resource')
  .filter(r => r.initiatorType === 'link' && r.name.includes('.css'))
  .map(r => ({
    name: r.name,
    load: r.duration + 'ms',
    size: r.decodedBodySize + 'bytes'
  }));

CHIMING UTILISATE L'API Performance permet un synchronisation personnalisée des fonctions d'application à l'aide de

,

et performance.now(). .mark() fournit des horodatages haute résolution. .measure() crée des marqueurs nommés dans le tampon de performance, et performance.now() calcule la durée entre les marqueurs. .mark() permet l'observation asynchrone des entrées de performance. .measure() PerformanceObserver

API autoproclamée:

L'API autoproclamée (toujours en cours de développement) simplifie l'analyse des performances en échantillonnant automatiquement l'exécution, en identifiant les goulots d'étranglement potentiels sans placement de marqueur manuel.

Conclusion:

L'API de performance permet aux développeurs de mesurer et d'améliorer avec précision les performances des applications Web en fonction des données de l'utilisateur réel, permettant une optimisation ciblée et une expérience utilisateur supérieure. N'oubliez pas de consulter la documentation détaillée pour les informations les plus à jour et les détails de la propriété spécifiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!