Comment Google mesure-t-il la performance et dans quelle mesure devez-vous vous en soucier.

Extention Chrome permettant d'identifier les contenus tiers dont l'indisponibilité peut entraîner des lenteurs, voire l'indisponibilité du site qui les appelle.

Article sur l'impact des scripts tiers sur certains sites (performance, disponibilité, sécurité des données...)

Où l'on apprend que la plupart des navigateurs chargent toutes les CSS possibles, même si les Media Queries précisent que c'est inutile... (sic)

Félicitations à l'équipe LeMonde.fr pour son lifting de performance sur le site. En appliquant des recettes connues mais parfois difficiles à mettre en oeuvre, ils ont stabilisé leurs performance, et les ont amélioré. Bon boulot.

GTMetrix a développé HAR Diff, une évolution du HAR Viewer de Jan Odvarko (https://github.com/janodvarko/harviewer), un outil permettant de comparer deux HAR deux à deux. Le résultat n'est pas encore pleinement convaincant (quelques bugs sont à signaler), mais l'initiative est intéressante.

Performance Web, un sujet à ne pas mettre de côté !

Le monde de la Web Performance est peuplé de mythes, surtout lorsqu'il est question de la performance d'exécution du code JavaScript. Certains peuvent être démontrés (comme l'utilisation d'index plutôt que de clés lors de l'utilisation du Local Storage), d'autres contredits (non, il n'est pas obligatoire de se passer d'expressions régulières)...

Les iFrames sont souvent utilisées pour charger du contenu tiers, de la publicité ou des widgets, car elles peuvent se charger parallèlement à la page dont elles sont issues. Elles ont cependant deux inconvénients : 1) les iFrame utilisent le même pool de connexion que la page et 2) la page attend le OnLoad des toutes les iFrames pour lancer le sien.

Si le premier problème reste à adresser le second est résolvable en utilisant une iFrame asynchrone dynamique. L'idée ? Initialiser dans le DOM une iFrame vide qui lance au moment de son propre OnLoad un script qui l'alimente. Ainsi, le OnLoad de l'iFrame arrive très rapidement et elle peut charger son contenu sans bloquer le reste de la page.

Bien que cette solution ne soit pas nouvelle, il est étonnant de voir qu'elle n'est pas encore massivement utilisée.

L'optimisation des performance Web passe souvent par l'optimisation des performances Front-End qui représentent la plus grande part des gains possibles. Mais il faut avouer que le sujet est bien connu désormais, et que les optimisations Front-End sont quasiment les mêmes sur tous les sites.

Il peut donc être intéressant de lancer aussi des chantiers d'optimisations back-end, même s'ils sont souvent plus coûteux tant dans la détection que dans la compréhension et la résolution. Mais il ne faut pas oublier qu'un problème au niveau back-end peut entraîner des augmentations de temps de réponses exponentiels, là où les problématiques Front-End sont plus souvent linéaires.

Conserver l'histoire du Web, c'est d'une part en conserver le contenu. Mais il est important de garder aussi une trace de la façon dont ce contenu a été construit et délivré. Http Archive fournit ces éléments, en agissant comme dépôt permanent d'informations sur la performance Web comme le poids des pages, les requêtes en erreur et les technologies utilisées.

A noter que la base de données est téléchargeable et requêtable.

On l'a déjà dit et redit mais une piqûre de rappel ne fait jamais de mal : utiliser des JS provenant de CDN dans l'espoir que ces JS soient déjà dans le cache des clients n'est pas une optimisation satisfaisante en termes de performances Web. Exemple ici avec jQuery sur les Google Apis...

Plateforme permettant de comparer l’exécution de plusieurs portions de code javascript (au sein d'un environnement HTML commun), pour savoir laquelle est la plus performante suivant les navigateurs.

"As our pages/apps become more interactive, the complexity of CSS increases, and browsers start to support more and more “advanced” CSS features, CSS performance will probably become even more important. The existing tools are only scratching the surface." Let's try Opera's new ones.

Le chargement asynchrone des scripts tiers est certes en pas en direction de la performance Web, mais la plupart du temps il n'est pas suffisant. En effet, l'utilisation des méthodes d'écriture de DOM asynchrones que sont le document.write d'un script, l'insertBefore ou l'appendChild retarde window.onload. Et si le script charge un autre script, ce délai est prolongé (8 fichiers pour le bouton Like Facebook, 6 pour Twitter...).

Présentation sur l'accélération du chargement des JS en utilisant les attributs ASYNC, DEFER, ou des composants externes comme LabJS. Le slide 46, notamment, résume bien le contenu de la présentation et est suivi de quelques portions de code réutilisable concernant les Third Parties sociaux (Twitter, Facebook, Google Plus...).

Construction d'une interface de Web App efficace et performante en HTML5.

Mobile Perf Bookmarklet permet d’avoir accès, dans n’importe quel contexte (Desktop, Mobile…) à un ensemble d’outils JS (Firebug Lite, Resources, DOM Monster, YSlow, Zoompf…) et d’exporter les données sur JDrop pour les consulter plus tard.