#perfmatters: techniques d'utilisation des outils pour les ninjas de la performance
Maîtriser vos outils de développement est essentiel pour devenir un expert des performances. Colt a présenté les trois piliers des performances: le réseau, le calcul et le rendu, en expliquant les principaux problèmes de chaque domaine et les outils disponibles pour les identifier et les éliminer.
- Vous pouvez désormais profiler Chrome sur Android avec les outils pour les développeurs que vous connaissez et appréciez sur ordinateur.
- La boucle d'itération pour le travail sur les performances est la suivante: collecter des données, obtenir des insights, prendre des mesures.
- Priorisez les composants qui se trouvent sur le chemin de rendu critique de vos pages.
- Évitez de peindre, car c'est très cher.
- Évitez la rotation de la mémoire et l'exécution de code pendant les périodes critiques de votre application.
#perfmatters: optimiser les performances du réseau
Le réseau et la latence représentent généralement 70% du temps de chargement total d'une page d'un site. Il s'agit d'un pourcentage élevé, mais cela signifie également que toute amélioration que vous apporterez à cet aspect sera bénéfique pour vos utilisateurs. Dans cette présentation, Ilya a expliqué les modifications récentes apportées à Chrome pour améliorer le temps de chargement, ainsi que quelques modifications que vous pouvez apporter à votre environnement pour réduire au maximum la charge réseau.
- Chrome M27 dispose d'un nouveau planificateur de ressources amélioré.
- Chrome M28 a rendu les sites SPDY encore plus rapides.
- Le cache simple de Chrome a été remanié.
- SPDY / HTTP/2.0 offrent d'énormes améliorations de la vitesse de transfert. Des modules SPDY matures sont disponibles pour nginx, Apache et Jetty (pour n'en citer que trois).
- QUIC est un protocole nouveau et expérimental basé sur UDP. Il est encore à ses débuts, mais les utilisateurs en bénéficieront quoi qu'il en soit.
#perfmatters: mise en page et rendu à 60 fps
Atteindre 60 FPS dans vos projets est directement lié à l'engagement des utilisateurs et est essentiel à leur réussite. Dans cette conférence, Nat et Tom ont parlé du pipeline de rendu de Chrome, de certaines causes courantes de perte de frames et de la façon de les éviter.
- Un frame dure 16 ms. Il contient du code JavaScript, des calculs de style, de la peinture et du compositing.
- La peinture est extrêmement coûteuse. Une "tempête de peinture" est une répétition inutile de travaux de peinture coûteux.
- Les calques permettent de mettre en cache les éléments peints.
- Les gestionnaires d'entrée (écouteurs tactiles et de la molette de la souris) peuvent réduire la réactivité. Évitez-les si possible. où vous ne pouvez pas les réduire au minimum.
#perfmatters: applications Web mobiles instantanées
Le Critical Rendering Path désigne tout élément (JavaScript, HTML, CSS, images) dont le navigateur a besoin avant de pouvoir commencer à peindre la page. Il est essentiel de donner la priorité à la diffusion des éléments sur le chemin de rendu critique, en particulier pour les utilisateurs d'appareils soumis à des contraintes réseau, comme les smartphones sur les réseaux mobiles. Bryan a expliqué comment l'équipe Google a identifié et hiérarchisé les composants du site Web PageSpeed Insights, passant d'un temps de chargement de 20 secondes à un peu plus d'une seconde.
- Supprimez les codes JavaScript et CSS qui bloquent l'affichage.
- Priorisez les contenus visibles.
- Chargez les scripts de manière asynchrone.
- Rendre la vue initiale côté serveur au format HTML et l'enrichir avec JavaScript
- Minimisez le CSS bloquant le rendu. Ne transmettez que les styles nécessaires pour afficher la fenêtre d'affichage initiale, puis le reste.
- Les URI de données volumineux intégrés dans le CSS bloquant le rendu sont nuisibles aux performances de rendu. Ils bloquent des ressources là où les URL d'image ne le font pas.