Pages Web

Principe technique

Pages Web s'appuie sur le module Puppeteer du projet Google Chrome pour générer des pages web depuis notre plateforme. C'est ensuite à travers le protocole de communication de Chrome (DevTools Protocol) que les actions, captures et mesures de vos pages web sont récupérées.

Afin de vous fournir des indicateurs de haute précision, le fonctionnement de Page Web est couplé avec l'interface de programmation PerformanceEntry, décrite par la W3C (voir détail).

Pour garantir la sécurité des données, chaque exécution de page est réalisée dans une instance dédiée qui est détruite une fois terminée. Aucune donnée du contenu de la page n'est conservée.

Vivlab gère l'ensemble de ses modules et mécanismes pour vous fournir un outil puissant et simple à utiliser.

Émulation des appareils

Avant de publier votre site web, il est important de vérifier que ses pages s'adaptent parfaitement aux différentes résolution des appareils (smartphone, tablette, PC) pour offrir une expérience utilisateur optimale à vos visiteurs et potentiels clients.

Vivlab a conçu le module d'émulation des appareils pour vous donner très rapidement le rendu de vos pages, sur la plupart des appareils disponibles sur le marché. Notre liste d'appareils reprend les données officielles d'affichage des marques.

4 paramètres permettent de réaliser l'émulation des appareils :

  • La résolution de l'affichage (viewport)
  • Le facteur d'échelle vers la résolution en pixel
  • Le User-Agent pour représenter les caractériques de l'appareil
  • Les bandes de l'appareil (on-screen button, status bar)

Géolocalisation

Ajoutez des paramètres de géolocalisation pour indiquer au navigateur une position géographique. Vous pouvez sélectionner les paramètres de latitude et longitude dans la liste prédéfinie. Vous pouvez aussi les personnaliser.

La géolocalisation demande 2 données :

  • Latitude: valeur comprise entre -90 et 90, à 1 mètre de précision
  • Longitude: valeur comprise entre -180 et 180, à 1 mètre de précision

Pour des raisons de sécurité, quand une page web tente d'accéder aux données de localisation, le navigateur prévient l'utilisateur et demande son accord.

En spécifiant les paramètres, Vivlab acceptera automatiquement la demande d'accès aux données de géolocalisation.

Les sites géolocalisant par l'adresse IP sont insensibles aux paramétrages de géolocalisation.

Entêtes

L'ajout d'entêtes personnalisées peut être nécessaire pour vos besoins spécifiques comme pour l'authentification Basic ou Bearer. Les entêtes sont ajoutées dans chacune des requêtes initialisées par la page.

Renseignez un couple de clé/valeur pour ajouter une entête. Les couples avec une clé manquante sont ignorés.

🚀 Si toutes les pages d'un groupe ont des entêtes communes, utilisez l'environnement pour éviter de vous répéter.

Séquence d'actions

La plupart des actions manuelles (clic souris, saisie clavier) peuvent être automatisées avec la séquence d'actions. Cela est très utile pour manipuler la page web et en vérifier le bon fonctionnement.

3 champs sont requis :

  • Source — Le type d'action (cliquer, taper, presser, pause)
  • PropriétéSélecteur de chemin CSS
  • Valeur — Valeur à tester (casse sensible)

Le sélecteur de chemin CSS est nécessaire pour connaître l'élément sur lequel il faut interagir. Il peut être facilement récupéré depuis un navigateur avec l'outil d'inspection.

La procédure fonctionne sur la plupart des navigateurs :

  1. Cliquez-droit sur l'élément à tester de la page web.
  2. Sélectionnez Inspecter ou Examiner l'élement, la fenêtre d'inspection apparaît.
  3. Dans la fenêtre d'inspection, cliquez droit sur l'élément surligné.
  4. Sélectionnez Copier -> Copier Sélecteur/Sélecteur CSS.
  5. Vous avez à présent le Sélecteur CSS dans le presse-papier, prêt à être collé.

En reprenant l'exemple de la page Wikipedia, le sélecteur du lien Débuter sur Wikipedia correspond à #n-aboutwp > a. Pour ordonner un clic sur cet élément, il suffit de coller le sélecteur dans la boîte Propriété.

Cliquer

La source Cliquer permet de cliquer sur un élément de sélection que vous avez défini dans le champs Propriété.

  • Propriété — Attend un sélecteur de chemin qui correspond à l'élément avec lequel interagir.

Pour simuler un clic utilisateur, un délai de 50ms est appliqué entre la pression du pointeur et le relâchement.

Presser

La source Presser permet d'appuyer virtuellement sur une touche du clavier.

  • Valeur — Choisissez la touche à presser parmi la liste déroulante.
Taper

La source Taper permet de saisir un texte dans un élément de sélection que vous avez défini dans le champs Propriété.

  • Propriété — Attend un sélecteur de chemin qui correspond à l'élément avec lequel interagir.
  • Valeur — Attend le texte que vous souhaitez saisir.

Pour simuler une saisie utilisateur, un délai de 100ms est appliqué entre chaque pression du caractère de votre texte.

Pause

La source Pause permet de temporiser les actions. Cela est utile lorsqu'il faut attendre la fin d'une animation ou d'une transition avant de poursuivre la séquence d'action.

  • Valeur — Glissez sur une plage de valeur entre 50ms et 400ms.

Notre politique d'usage restreint le temps d'exécution d'une page web, pour éviter les abus ou une surconsommation involontaire des ressources de nos serveurs. Veillez à ce que vos séquences d'actions restent dans ces limites (voir limitations).

Rendu

La section Rendu fournit des indicateurs clés de performance issus des standards du web. Ces indicateurs permettent d'évaluer l'expérience utilisateur dans la phase de chargement d'une page.

Dans les phases de rendu, les 6 indicateurs sont les suivants :

  • First Paint — Premier pixel rendu par le navigateur
  • First Contenful Paint — Premier élément rendu par le navigateur
  • DOM Content Loaded — Page totalement chargée et analysée
  • DOM Complete — Tous les éléments HTML sont rendus
  • Load — Toutes les ressources dépendantes sont complètement chargées
  • Speed Index — Métrique de performance sur la vitesse de chargement d'une page (voir détail)

Il existe plusieurs techniques pour générer le web, tels que le rendu statique, le rendu côté serveur (voir SSR) et le rendu côté client (exemple du PWA).

Les méthodes de chargement (prefetch, asynchrone ou différé) peuvent rendre complexe la détection d'une page chargée avec le contenu utile. Nous avons donc mis en place un mécanisme de détection basé sur 3 conditions.

🚀 Lorsque les évènements Load et DOM Content Loaded sont déclenchés, et qu'aucune requête n'est en cours durant 500ms, Vivlab considère que la page est chargée.

Couverture JavaScript

La couverture JavaScript rassemble les informations sur les fonctions JavaScript utilisées par la page au fil du temps.

Dans cette section, 3 indicateurs sont disponibles :

  • Exécution JavaScript — Indique le temps total du traitement JavaScript sur la page
  • Event Listeners — Nombre d'écouteurs d'évènement (voir détail)
  • JavaScript coverage — Taux d'utilisation total du JavaScript

Le détail de la couverture par fichier et par bloc est également disponible.

Couverture CSS

La couverture CSS rassemble les informations sur les règles CSS utilisées par la page au fil du temps.

Dans cette section, 3 indicateurs sont disponibles :

  • Calcul CSS — Indique le temps total du traitement CSS sur la page
  • Indexation — Nombre d'écouteurs d'évènement (voir détail)
  • CSS coverage — Taux d'utilisation total des règles CSS

Le détail de la couverture par fichier et par bloc est également disponible.

Les requêtes

La section Requêtes est utile pour visualiser la chronologie de réception et d'émission des ressources web et API.

Dans cette section, 3 indicateurs sont disponibles :

  • Calcul CSS — Indique le temps total du traitement CSS sur la page
  • Indexation — Nombre d'écouteurs d'évènement (voir détail)
  • CSS coverage — Taux d'utilisation total des règles CSS

Le détail de la couverture par fichier et par bloc est également disponible.

La cascade apporte les informations suivantes :

  • URL — Adresse du chemin de la ressource demandée
  • Taille — Total d'octects reçus de la réponse brute et de ses entêtes
  • Type — Nature du média reçu
  • Délai — Durée entre la requête émise et la réponse reçue
  • Cascade — Chronologie des requêtes effectuées par le navigateur pour charger la page

La cascade donne un bon aperçu du nombre de ressources demandées par la page et de la rapidité du serveur à répondre aux demandes. On distingue 2 phases dans l'histogramme.

La phase de mise en attente (en blanc) représente la durée entre l'initialisation de la requête et son émission. Cette phase intervient lorsqu'il existe des requêtes avec une priorité plus forte, lorsque le maximum de 6 connexions TCP par origine en HTTP/1.0 et HTTP/1.1 est atteint et lorsque le navigateur tente d'allouer de l'espace dans le cache mémoire.

La phase de requête (en bleu) représente la durée entre l'émission de la requête et la réception de la réponse.
Cette mesure donne une indication sur la capacité de votre infrastructure à préparer et répondre aux sollicitations des ressources.

Cookies

La section cookies vous retourne l'ensemble des cookies de l'URL de la page.

Limitations

Notre plateforme a été conçue pour être très performante et traiter plusieurs exécutions en parallèle. Toutefois nous avons mis en place des limitations pour éviter certains problèmes et vous les remonter :

  • Le chargement de vos pages web n'aboutit pas et engendre un temps d'attente sans raison.
  • Les boucles de redirection surchargent et spamment inutilement notre plateforme.
  • Un script bloque involontairement une exécution.

Le temps d'exécution d'une page web est limité à 12 secondes. Ce temps est généralement largement suffisant pour générer une page web et sa séquence d'actions.

🚀 Créez plusieurs tests courts pour isoler les scénarios et les réproduire facilement. Une exécution avec une séquence d'actions trop longue sera plus difficile à comprendre et à debugger, et peut engendrer des indicateurs difficilement exploitables.