Navigateurs et performance


Le chemin critique


Par Thibaud Colas, partage en CC0

Sources d'information

Points abordés

  • L'enjeu

  • Le défi

  • Moteurs de rendu

  • Le chemin critique

  • L'avenir

L'enjeu

Pourquoi ?

  • Impact direct sur le business.
  • Impact direct sur le référencement.
  • Nous ne sommes plus patients et n'hésitons pas à aller ailleurs.

Source : llaumgui.com

Nouvelles attentes

Source : StrangeLoop

Nouveaux usages

Source : StrangeLoop

Impact direct

Source : StrangeLoop

La vitesse est une
fonctionnalité

Le défi

Diminuer l'attente

  • Affichage des pages en moins de 1000ms
  • Réponse aux interactions en 100ms


Source : Ilya Grigork, Optimizing the Critical Rendering Path

Objectif :
affichage en moins d'une seconde

Moteurs de rendu

Source : Patrick Hamann, CSS And The Critical Path

Source : Patrick Hamann, CSS And The Critical Path

Source : Patrick Hamann, CSS And The Critical Path

Source : Patrick Hamann, CSS And The Critical Path

Source : Patrick Hamann, CSS And The Critical Path

Source : Patrick Hamann, CSS And The Critical Path

  • Lookup DNS : 200ms
  • Connexion TCP (SYN, ACK) : 200ms
  • Handshake TLS (HTTPS) : 200ms
  • Requête HTTP : 200ms
  • Ne parlons même pas de redirection...


Source : Ilya Grigork, Optimizing the Critical Rendering Path

Sans HTTPS, il reste 400ms pour le traitement serveur, l'envoi de la réponse et le rendu client.


... en théorie.

TCP Slow Start

  • TCP n'utilise pas toute la bande passante disponible
  • C'est une feature, pas un bug


Source : Ilya Grigork, Optimizing the Critical Rendering Path

Exemple : 40kb en TCP

  • = 700ms !
  • + DNS, TLS, etc
  • -> Un round-trip = 14kb


Source : Ilya Grigork, Optimizing the Critical Rendering Path

Déprimant, mais

  • Seul le rendu du contenu visible est nécessaire
  • HTML est parsé de manière incrémentale
  • CSS est bloquant mais JavaScript peut être déferré

Objectif :
afficher le contenu visible,
critique

Le chemin critique

Le chemin de rendu critique relie les échanges réseau à l'affichage du contenu visible sur l'écran. Above the fold


  • Le HTML est envoyé incrémentalement, la partie visible en 14kb
  • Traitement sans redirection, on peut s'en passer
  • Le CSS critique doit être inliné
  • Le JavaScript doit être asynchrone

Above the fold

Source : Patrick Hamann, CSS And The Critical Path

Résultat

Source : Patrick Hamann, CSS And The Critical Path

localStorage

  • Les ressources ne sont pas chargées lors de navigations ultérieures
  • Technique utilisée par Google, entre autres

Résultat

Source : Patrick Hamann, CSS And The Critical Path

L'avenir

Resource Priorities

Editor's Draft W3C


<html>
	<head>
		
		
		
	</head>
</html>
					
  • Using the lazyload attribute on a resource will signal to the User Agent that in cases of network resource contention, it may lower the download priority of that resource.
  • Using the postpone attribute, developers can specify which resources the User Agent should not download until they are visible to the user.

Client Hints

Draft IETF par Ilya Grigorik

  • Nouveau header HTTP
  • Largeur, hauteur, densité de pixels

Source : Patrick Hamann, CSS And The Critical Path

SPDY/HTTP 2.0

Draft en cours de finalisation

  • Une connexion par origine
  • Latence plus faible sur mobile
  • Et bien plus

Merci !


Par Thibaud Colas, partage en CC0