Librairie javascript PerformanceNavigationTiming

[ortolojf]

Bonjour

Je veux mesurer éventuellement les chemins critiques de mon site : https://www.pronostics-courses.fr

Il semblerait que l'interface window.performance soit obsolète.

Est-ce que ces données ci-dessous sont fiables ?

Merci beaucoup.

Amicalement.

Fonctions ou variables de PerformanceNavigationTiming
*****************************************************

    Navigation Timing attributes
    ****************************

    [Exposed=Window]
    interface PerformanceNavigationTiming : PerformanceResourceTiming {
      readonly attribute DOMHighResTimeStamp unloadEventStart;
      readonly attribute DOMHighResTimeStamp unloadEventEnd;
      readonly attribute DOMHighResTimeStamp domInteractive;
      readonly attribute DOMHighResTimeStamp domContentLoadedEventStart;
      readonly attribute DOMHighResTimeStamp domContentLoadedEventEnd;
      readonly attribute DOMHighResTimeStamp domComplete;
    readonly attribute DOMHighResTimeStamp loadEventStart;
      readonly attribute DOMHighResTimeStamp loadEventEnd;
      readonly attribute NavigationType type;
      readonly attribute unsigned short redirectCount;
      [Default] object toJSON();
    };


Initialisation
**************

    =>    PerfNavTime = window.PerformanceNavigationTiming;
        *************************************************

4.     Process
    *******

If the navigation is aborted for any of the following reasons, abort these steps.

The navigation is aborted due to the sandboxed navigation browsing context flag, the sandboxed top-level navigation without user activation browsing context flag or the sandboxed top-level navigation with user activation browsing context flag, a preexisting attempt to navigate the browsing context, or the user canceling the navigation.

The navigation is caused by fragment identifiers within the page.

The new resource is to be handled by some sort of inline content.

The new resource is to be handled using a mechanism that does not affect the browsing context.

The user refuses to allow the document to be unloaded.

I)    DOM objects initialization
    **************************

1) Create a new PerformanceNavigationTiming object and add it to the performance entry buffer.

2) Set name to the DOMString "document".

    => PerfNavTime.name = document;

3) Set entryType and initiatorType to the DOMString "navigation".

    => PerfNavTime.navigation.entryType = "navigation";
    => PerfNavTime.navigation.initiatorType = "navigation";

4) Set startTime to a DOMHighResTimeStamp with a time value of zero, and nextHopProtocol to the empty DOMString.

    => PerfNavTime.startTime = 0;
    => PerfNavTime.nextHopProtocol= '';



II)    Record the current navigation type.
    ***********************************

5) Record the current navigation type in type if it has not been set:

6) If the navigation was started by clicking on a link, or entering the URL in the user agent's address bar, or form submission, or initializing through a script operation other than the location.reload() method, let the navigation type be the DOMString "navigate".

    => PerfNavTime.navigation.type = "navigate";

6) If the navigation was started either as a result of a meta refresh, or the location.reload() method, or other equivalent actions, let the navigation type be the DOMString "reload".

    => PerfNavTime.navigation.type = "reload";

7) If the navigation was started as a result of history traversal, let the navigation type be the DOMString "back_forward".

    => PerfNavTime.navigation.type = "back_forward";


III)    Previous timing
    ***************

8) If the previous document does not pass the timing allow check algorithm, set both unloadEventStart and unloadEventEnd to 0 then go to fetch-start-step. Otherwise, record unloadEventStart as the time immediately before the unload event.

    Remise à 0
    **********
    => PerfNavTime.unloadEventStart = 0;
    => PerfNavTime.unloadEventEnd = 0;

    Previous
    ******** 
    before the unload event
    ***********************
    => PerfNavTime.unloadEventStart;    // before the unload event.


9) Immediately after the unload event is completed, record the current time as unloadEventEnd. If the navigation URL has an active worker registration, immediately before the user agent runs the worker record the time as workerStart, or if the worker is available, record the time before the event named `fetch` is fired at the active worker. Otherwise, if the navigation URL has no matching service worker registration, set workerStart value to zero.

    After the unload event is completed
    ***********************************
    => PerfNavTime.unloadEventEnd = now;

    Active worker registered
    ***********************************
    => PerfNavTime.workerStart = now;
            OU
    worker is available
    ***********************************
    before fetch
    ************
    => PerfNavTime.workerStart = now;
            OU
    No matching service worker registration.
    ****************************************
    => PerfNavTime.workerStart = 0;


IV)    Fetch start
    ***********

[fetch-start-step] If the new resource is to be fetched using a "GET" request method, immediately before a user agent checks with the relevant application caches, record the current time as fetchStart. Otherwise, immediately before a user agent starts the fetching process, record the current time as fetchStart.


    before user agent checks with the cache
    ***************************************
    => PerfNavTime.fetchStart = now;

    before user agent starts fetching process
    *****************************************
    => PerfNavTime.fetchStart = now;


10) Let domainLookupStart, domainLookupEnd, connectStart and connectEnd be the same value as fetchStart.

    => PerfNavTime.domainLookupStart = PerfNavTime.fetchStart;
    => PerfNavTime.domainLookupEnd = PerfNavTime.fetchStart;
    => PerfNavTime.connectStart = PerfNavTime.fetchStart;
    => PerfNavTime.connectEnd = PerfNavTime.fetchStart;

11) Set name to a DOMString value of the address of the current document.

    => PerfNavTime.name = document.URL;

12) If the resource is fetched from the relevant application cache or local resources, including the HTTP cache [RFC7234], go to request-start-step.

13) If no domain lookup is required, go to connect-start-step. Otherwise, immediately before a user agent starts the domain name lookup, record the time as domainLookupStart.

    before the domain name lookup
    *****************************
    => PerfNavTime.domainLookupStart = now;

14) Record the time as domainLookupEnd immediately after the domain name lookup is successfully done. A user agent MAY need multiple retries before that. If the domain lookup fails, abort the rest of the steps.

    after the domain name lookup
    ****************************
    => PerfNavTime.domainLookupEnd = now;i



V)    Connect start
    *************

[connect-start-step] If a persistent transport connection is used to fetch the resource, let connectStart and connectEnd be the same value of domainLookupEnd. Otherwise, record the time as connectStart immediately before initiating the connection to the server and record the time as connectEnd immediately after the connection to the server or the proxy is established. A user agent MAY need multiple retries before this time. Once connection is established set the value of nextHopProtocol to the ALPN ID used by the connection. If a connection can not be established, abort the rest of the steps.


    Persistent transport connection
    *******************************
    => PerfNavTime.connectStart = PerfNavTime.domainLookupEnd;
    => PerfNavTime.connectEnd = PerfNavTime.domainLookupEnd;
                 OU
    before initiating the connection to the server
    **********************************************
    => PerfNavTime.connectStart = now;
    after the connection to the server is established
    *************************************************
    => PerfNavTime.connectEnd = now;

    After the connection is established
    ***********************************
    => PerfNavTime.nextHopProtocol = ALPN ID;


A user agent MUST also set the secureConnectionStart attribute as follows:

15) When a secure transport is used, the user agent MUST record the time as secureConnectionStart immediately before the handshake process to secure the connection.

    => PerfNavTime.secureConnectionStart = now;

16) When a secure transport is not used, the user agent MUST set the value of secureConnectionStart to 0.

    => PerfNavTime.secureConnectionStart = 0;




VI)    Request start
    *************

[request-start-step] Immediately before a user agent starts sending request for the document, record the current time as requestStart.

    before user agent sends request for the document.
    *************************************************
    => PerfNavTime.requestStart = now;

17) Record the time as responseStart immediately after the user agent receives the first byte of the response.

    after receiving first byte.
    ***************************
    => PerfNavTime.responseStart = now;    // after receiving first byte.

18) Record the time as responseEnd immediately after receiving the last byte of the response.

    after receiving last byte.
    **************************
    => PerfNavTime.responseEnd = now;    // after receiving last byte.

19) Return to connect-start-step if the user agent fails to send the request or receive the entire response, and needs to reopen the connection.

NOTE
****
When persistent connection [RFC7230] is enabled, a user agent MAY first try to re-use an open connect to send the request while the connection can be asynchronously closed. In such case, connectStart, connectEnd and requestStart SHOULD represent timing information collected over the re-open connection.

        should be updated
        *****************
    => PerfNavTime.connectStart = PerfNavTime.domainLookupEnd;
    => PerfNavTime.connectEnd = PerfNavTime.domainLookupEnd;

    => PerfNavTime.requestStart = now;


20) Set the value of transferSize, encodedBodySize, decodedBodySize to corresponding values.

    => PerfNavTime.transferSize = __;
    => PerfNavTime.encodedBodySize = __;
    => PerfNavTime.decodedBodySize = __;

21) If the fetched resource results in an HTTP redirect, then

If the timing allow check algorithm does not pass for the origin of the fetched resource, set redirectStart, redirectEnd, unloadEventStart, unloadEventEnd and redirectCount to 0. Then, return to fetch-start-step with the new resource.

    => PerfNavTime.redirectStart = 0;
    => PerfNavTime.redirectEnd = 0;
    => PerfNavTime.unloadEventStart = 0;
    => PerfNavTime.unloadEventEnd = 0;
    => PerfNavTime.redirectCount = 0;

22) Increment redirectCount by 1.

    => PerfNavTime.redirectCount = PerfNavTime.redirectCount + 1;

23) If the value of redirectStart is 0, let it be the value of fetchStart.

    => if(PerfNavTime.redirectStart == 0) {
        PerfNavTime.redirectStart = PerfNavTime.fetchStart;
       }

24) Let redirectEnd be the value of responseEnd.

    => PerfNavTime.redirectEnd = PerfNavTime.responseEnd;

25) Set all of the attributes in the PerformanceNavigationTiming object to 0 except startTime, redirectStart, redirectEnd, redirectCount, type, nextHopProtocol, unloadEventStart and unloadEventEnd. Set nextHopProtocol to the empty DOMString.

        Tous objets de PerfNavTime = 0
        ******************************
        sauf :
        ******

    => PerfNavTime.startTime
    => PerfNavTime.redirectStart
    => PerfNavTime.redirectEnd
    => PerfNavTime.redirectCount
    => PerfNavTime.type
    => PerfNavTime.nextHopProtocol
    => PerfNavTime.unloadEventStart
    => PerfNavTime.nextHopProtocol

********************************************************************************************

    => PerfNavTime.nextHopProtocol = '';

********************************************************************************************

26) Return to fetch-start-step with the new resource.

27) Record the time as domInteractive immediately before the user agent sets the current document readiness to "interactive".

    before the user agent sets the current document readiness to "interactive".
    ***************************************************************************
    => PerfNavTime.domInteractive = now;

28) Record the time as domContentLoadedEventStart immediately before the user agent fires the DOMContentLoaded event at the document.

    before the user agent fires the DOMContentLoaded event at the document.
    ***********************************************************************
    => PerfNavTime.domContentLoadedEventStart = now;

29) Record the time as domContentLoadedEventEnd immediately after the DOMContentLoaded event completes.

    after the DOMContentLoaded event completes.
    *******************************************
    => PerfNavTime.domContentLoadedEventEnd = now;

30) Record the time as domComplete immediately before the user agent sets the current document readiness to "complete".

    before the user agent sets the current document readiness to "complete".
    ************************************************************************
    => PerfNavTime.domComplete = now;

31) Record the time as loadEventStart immediately before the user agent fires the load event.

    before the user agent fires the load event.
    *******************************************
    => PerfNavTime.loadEventStart = now;

32) Record the time as loadEventEnd immediately after the user agent completes the load event.

    after the user agent completes the load event.
    **********************************************
    => PerfNavTime.loadEventEnd = now;

33) Set the duration to a DOMHighResTimeStamp equal to the difference between loadEventEnd and startTime, respectively.

    => PerfNavTime.duration = PerfNavTime.loadEventEnd - PerfNavTime.startTime;

34) Queue the new PerformanceNavigationTiming object.

 

[spout]

https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/

 

[ortolojf]

Bonjour spout

Merci beaucoup spout pour ton lien.

J'essaierai quand même de faire vaguement quelque chose pour mesurer ces temps d'accès à mon site.

Je vais voir prochainement avec ton lien.

Merci beaucoup.

Amicalement.

 

[colonies]

Tu pourrais accélérer encore un peu ton site en :
- utilisant CloudFlare pour gérer tes DNS (surtout si tu as autant de trafic en provenance d'Afrique que le suggère Alexa : https://www.alexa.com/siteinfo/pronostics-courses.fr)
- En configurant Tarteaucitron en mode CSS externe et en incluant la CSS de Tarteaucitron avec un <link>, afin que le navigateur la découvre dans le HTML et pas après avoir téléchargé et interprété le JS.
- En supprimant de tartaucitron.services.js ceux que tu n'utilises pas
- En minifiant les JS et la CSS de Tarteaucitron
- En plaçant ta CSS dans un fichier externe (qui sera téléchargé bien avant que Tarteaucitron ait terminé, et qui restera en cache au lieu d'être inclus dans chaque page)
- Et pour être vraiment très très maniaque, en convertissant ta favicon en un PNG optimisé.

Après, tu pourras encore réinventer la roue. Parce que tu pourrais très bien te contenter de
https://developers.google.com/speed...=https://www.pronostics-courses.fr&tab=mobile
Ton site a un bouton Afficher le résumé d... (de l'origine) qui donne de bons renseignements, et Google Analytics a aussi des infos correctes (même si très variables) dans Comportement > Vitesse du site.

 

[spout]

En configurant Tarteaucitron

Ne lui parle surtout pas de Tarteaucitron, il a mis genre 6 mois à le configurer. C'est pas comme s'il n'avait pas du pain sur la planche autre part

 

[ortolojf]

Bonjour colonies

J'ai pris note de tes suggestions, merci beaucoup de ton aide.

Je vais voir.

Très respectueusement et amicalement.

 

[colonies]

Attend, il y a peut-être plus simple... est-ce que ton Tarteaucitron ne sert qu'à demander le consentement pour Google Analytics ?

Parce que si tu n'as aucun service externe dans le corps de la page, il te suffit de décaler ce qui concerne tarteaucitron à la fin de ton HTML, juste avant la partie concernant Google Analytics, et l'affichage de ta page ne sera plus bloqué tant que Tarteaucitron n'est pas chargé.
Si tu peux faire ça, c'est la première chose à faire.

Après, tu peux toujours utiliser une CSS appelée séparément, minifier et tout, mais ça n'accélèrera plus que l'affichage de la demande de consentement au lieu de toute ta page, et c'est sacrément moins important.

Et sinon, si tu as beaucoup de visiteurs Africains... à la limite, tu pourrais vérifier le pays de l'IP des visiteurs (si tu y arrives très rapidement), pour carrément ne pas leur afficher Tarteaucitron. C'est un choix... tu peux te dire qu'ils ont le droit aux mêmes choix que les Européens, ou trouver que de toute façon, ces demandes sont super pénibles pour les visiteurs, et qu'après tout, il y a Ghostery. Et en plus tu utilises l'extension d'anonymisation d'IP d'Analytics, alors...

Si tu ne peux pas décaler tarteaucitron en bas de page, il te reste la possibilité :
— d'appliquer les recommandations précédentes (note que pour la CSS, elle n'est probablement pas bloquante et ne ralentit probablement que l'affichage du bandeau, mais pas de toute la page, donc l'externaliser n'est pas très important).
— envoyer le script par H2/Push pour les utilisateurs qui arrivent pour la première fois (et qui n'ont pas de cookie, donc). C'est radical : ça évite les allers-retour pour les ressources bloquantes qui ralentissent fortement ta page pour les utilisateurs avec une grosse latence.