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.
Nouvelles attentes
Nouveaux usages
Impact direct
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
- 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
Résultat
localStorage
- Les ressources ne sont pas chargées lors de navigations ultérieures
- Technique utilisée par Google, entre autres
Résultat
L'avenir
Resource Priorities
<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
- Nouveau header HTTP
- Largeur, hauteur, densité de pixels
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
- Slides sur thib.me/talks/