Talk sur la "Performance Web : Enjeux, techniques et méthodologie" pour @RennesJS
Rappel du programme :
"Après la découverte de quelques success stories sur la performance web - des éléments pour se convaincre et savoir convaincre de l'importance de la webperf - nous aborderons les techniques élémentaires pour mettre vos pages web au régime (compression, optimisation des images, politique de cache, etc).
Ce sera aussi l'occasion d'aborder HTTP/2 : les bonnes pratiques de performance ne sont peut être plus celles que vous croyez et vos habitudes vont devoir changer, nous verrons pourquoi !
Nous n'oublierons pas d'évoquer les différents indicateurs de performance (speedindex, start render, etc), et il est fort possible que je m'égare à l'occasion sur d'autres outils de qualité front-end, comme la Content Security Policy...
En conclusion, on parlera de budget. Pas celui de la soirée, mais du budget de performance, à appliquer sur vos projets, pour créer une véritable culture de la performance web dans votre équipe !"
9. Avant AMP...
Red Slow Label
février 2015
Slow To Load
juin 2015
source :
Google : « Slow To Load » en cours de test
10. 10
Impacts rapidité sur le web
Acquisition Conversion
Référencement,
Coût adwords,
Taux de rebond,
Tenue de charge,
Referral
Image de marque,
Panier moyen,
Taux de
conversion,
Sécurité
11. « 80-90% of the end-user response time
is spent on the frontend. Start there. »
Steve Souders
Performance Golden Rule
19. Minification JS/CSS
Minfication vs compression
En savoir plus :
http://blog.dareboost.com/fr/2014/07/la-minification-css/
Traitements Taille finale
Aucun (CSS brut) 132 ko
Compression Gzip 19,4 ko
Minification 109,5 ko
Minification puis
Compression Gzip
18 ko
7 %
24. Above the fold !
Le Javascript, comme le CSS sont bloquants
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
Bloque le téléchargement
d'autres ressources
jusqu'à la fin de
l'exécution
25. Déporter le Javascript
Solution 1 : script inline
<html>
<head>
<script type="text/javascript">
/* Pour un script très court et indispensable */
</script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
26. Déporter le Javascript
Solution 2 : script async
<html>
<head>
<script async type="text/javascript" src="script.js"></script>
</head>
<body>
<div>
Hello, world!
</div>
</body>
</html>
Pas de garantie d'ordre. IE >= 10
27. Déporter le Javascript
Solution 3 : différer l'appel
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else
window.onload = downloadJSAtOnload;
</script>
</body>
Code proposé par Google sous licence Apache 2.0
28. Erreurs et redirections
29% des sites comportent une erreur 4XX ou 5XX
Source :
Httparchive.org – septembre 2016
9% des sites avec 5 redirections ou plus
40. Se fixer des objectifs
« le site doit être rapide »
« la page doit faire moins de 1Mo »
« le serveur doit répondre en 150ms »
Budget de performance
Article détaillé :
Budget de performance : un indispensable à la rapidité des sites web
61. Real User Monitoring
(monitoring passif)
« la vraie vie »
2 approches de surveillance
Google Analytics et temps de chargement : bénéfices et limites du Real User Monitoring