#perfmatters: techniques d'outils pour les ninjas de la performance
Connaître ses outils de développement est essentiel pour devenir un expert des performances. Colt 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é de chaque domaine ainsi que les outils disponibles pour les détecter et les éliminer.
- Vous pouvez désormais profiler Chrome sur Android avec les outils de développement que vous connaissez et appréciez sur ordinateur.
- La boucle d'itération du travail axé sur la performance est la suivante: recueillir des données, obtenir des informations, prendre des mesures.
- Privilégiez les composants qui se trouvent sur le chemin critique du rendu sur vos pages.
- Évitez de peindre. c'est très cher.
- Évitez les saturations de la mémoire et l'exécution de code aux moments critiques dans votre application.
#perfmatters: Optimisation des 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. Il s'agit d'un pourcentage élevé, mais cela signifie également que les améliorations que vous y apportez apporteront d'énormes avantages à vos utilisateurs. Dans cette vidéo, Ilya a présenté les récentes modifications apportées à Chrome qui vont améliorer le temps de chargement, ainsi que quelques modifications que vous pouvez apporter à votre environnement pour maintenir la charge réseau à un minimum absolu.
- Chrome M27 dispose d'un nouveau planificateur de ressources amélioré.
- Chrome M28 rend les sites SPDY (encore) plus rapides.
- Le cache simple de Chrome a fait l'objet d'une refonte.
- SPDY / HTTP/2.0 offrent d'importantes améliorations de la vitesse de transfert. Il existe des modules SPDY matures disponibles pour nginx, Apache et Jetty (pour n'en citer que trois).
- QUIC est un nouveau protocole expérimental construit sur UDP. Ce n'est qu'un début, mais peu importe qu'on s'y attarde, les utilisateurs gagneront.
#perfmatters: mise en page et rendu à 60 ips
Atteindre 60 FPS dans vos projets est directement lié à 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 de perte de frames et de la manière de les éviter.
- Une trame dure 16 ms. Il contient JavaScript, les calculs de style, la peinture et la composition.
- La peinture coûte extrêmement cher. Une tempête de peinture consiste à répéter inutilement des travaux de peinture coûteux.
- Les calques sont utilisés pour mettre en cache des éléments peints.
- Les gestionnaires d'entrée (écouteurs tactiles et à la molette de la souris) peuvent arrêter la réactivité. évitez-les si vous le pouvez. Mais où vous ne pouvez pas le limiter.
#perfmatters: Applications Web pour mobile instantanées
Le chemin de rendu critique est constitué de tous les éléments (JavaScript, HTML, CSS, images) dont le navigateur a besoin pour commencer à peindre la page. Il est impératif de prioriser la diffusion des éléments sur le chemin critique du rendu, en particulier pour les utilisateurs d'appareils dont le réseau est limité, comme les smartphones connectés à des réseaux mobiles. Bryan a expliqué comment l'équipe Google a identifié et hiérarchisé les ressources du site Web PageSpeed Insights, en passant d'un temps de chargement de 20 secondes à un peu plus d'une seconde.
- Éliminez les fichiers JavaScript et CSS qui bloquent l'affichage.
- Privilégiez le contenu visible.
- Chargez les scripts de manière asynchrone.
- Affichez la vue initiale côté serveur au format HTML et ajoutez-la à du code JavaScript.
- Réduisez au maximum le code CSS qui bloque l'affichage ; diffuser uniquement les styles nécessaires à l'affichage de la fenêtre d'affichage initiale, puis diffuser le reste.
- Les URI de données volumineux intégrés dans du code CSS qui bloque l'affichage nuisent aux performances d'affichage. ils bloquent les ressources dont les URL d'image ne sont pas bloquantes.