#perfmatters: techniques pour les experts des performances
Connaître vos outils de développement est essentiel pour devenir un expert en performances. Colt a passé en revue les trois piliers de la performance: la mise en réseau, le calcul et le rendu, en présentant le problème clé dans chaque zone et les outils disponibles pour les trouver et les éliminer.
- Vous pouvez désormais profiler Chrome sur Android à l'aide des outils de développement que vous connaissez et appréciez sur ordinateur.
- La boucle d'itération pour le travail de performance est la suivante: recueillir des données, obtenir des informations et prendre des mesures.
- Privilégiez les assets qui se trouvent sur le chemin critique du rendu pour vos pages.
- Évitez de peindre ; c'est très cher.
- Évitez la saturation de la mémoire et l'exécution de code aux moments 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 des pages d'un site. C'est un pourcentage élevé, mais cela signifie également que toute amélioration que vous y apportez apportera d'énormes avantages à vos utilisateurs. Dans cette présentation, Ilya a passé en revue les dernières modifications apportées à Chrome qui vont 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é.
- Les protocoles SPDY / HTTP/2.0 offrent d'énormes améliorations de la vitesse de transfert. Il existe des modules SPDY matures pour nginx, Apache et Jetty (pour ne citer que trois).
- QUIC est un nouveau protocole expérimental basé sur UDP. Ce protocole n'en est qu'à ses débuts, mais il est probable que les utilisateurs gagnent en popularité.
#perfmatters: mise en page et rendu à 60 images par seconde
Atteindre 60 FPS dans vos projets est directement corrélé à l'engagement des utilisateurs et est crucial pour sa réussite. Dans cette présentation, Nat et Tom ont parlé du pipeline de rendu de Chrome, de certaines causes courantes d'abandons de frames et de la façon de les éviter.
- Un cadre dure 16 ms. Elle contient du code JavaScript, des calculs de style, des applications de peinture et de composition.
- La peinture est extremely chère. Une tempête de peinture consiste à répéter inutilement un travail de peinture coûteux.
- Les calques sont utilisés pour mettre en cache les éléments peints.
- Les gestionnaires d'entrée (écouteurs tactiles et à la molette de la souris) peuvent abandonner la réactivité. Évitez-les si vous le pouvez. Des sites qui ne peuvent pas être minimisés.
#perfmatters: applications Web mobiles instantanées
Le chemin d'affichage critique désigne tout ce dont le navigateur a besoin (JavaScript, HTML, CSS, images) pour commencer à peindre la page. Il est impératif de diffuser les éléments en priorité sur le chemin critique du rendu, en particulier pour les utilisateurs d'appareils limités en réseau, comme les smartphones sur des réseaux mobiles. Bryan a expliqué comment l'équipe Google a suivi le processus d'identification et de hiérarchisation des éléments du site Web PageSpeed Insights. Il est passé d'un temps de chargement de 20 secondes à un peu plus d'une seconde !
- Éliminez les fichiers JavaScript et CSS qui bloquent l'affichage.
- Donner la priorité au contenu visible.
- Chargez des scripts de manière asynchrone.
- Affichez l'affichage initial côté serveur au format HTML et augmentez-le avec JavaScript.
- Réduisez le nombre de fichiers CSS qui bloquent l'affichage. Fournissez uniquement les styles nécessaires à l'affichage de la fenêtre d'affichage initiale, puis diffusez le reste.
- Les URI de données volumineuses intégrés dans des CSS qui bloquent l'affichage nuisent aux performances d'affichage. Ils bloquent les ressources dont les URL d'image ne sont pas bloquantes.