Archives de la catégorie : Performance

Les horloges de webpagetest

Ce billet est un premier billet (et j’espère pas le dernier) d’un auteur différent. C’est donc Armel Fauveau qui écrit ci-dessous et non l’auteur habituel. Bienvenu à lui. — Éric. Préambule Suite à la proposition d’Éric, je vais vous relater une petite curiosité technique rencontrée dans le cadre de l’administration quotidienne des serveurs WebPagetest Parisiens. […]

Pause

J’ai toujours déclaré que je suivrai le rythme d’écriture qui me plait, ne me forçant pas à écrire quand je n’en ai pas envie. Ces derniers mois il y a donc eu peu de billets, traduisant une situation personnelle qui occupe suffisamment mon esprit pour que je ne me disperse pas trop. Il est temps […]

Automatisation de Yslow

La prise de conscience sur le sujet des performances web évolue. Beaucoup d’équipes ont désormais appliqué quelques recettes de base, ou ont au moins un item dédié dans la liste des choses à faire. Il reste toutefois à passer une phase d’industrialisation. Lancer Yslow tous les mois à la main n’est pas toujours idéal. Cela […]

Experience de voici.fr

J’aime bien apporter un peu de retours d’expérience, pour montrer que toute la théorie fonctionne aussi en pratique. Certes il y a Yahoo!, Google, Amazon, mais ce sont des trop gros sites pour que le développeur moyen se sente impliqué. Alors voilà, Charles-Christian Croix nous parle un peu de ce qui a été réalisé sur […]

Priorisation des onglets sur Firefox

Je ne donne pas de nouvelles mais je suis toujours de près toutes les actualités liées à la performance. En ce moment il y a peu d’articles techniques qui font de réelles avancées. L’innovation vient plutôt du navigateur, et Mozilla fait un sacré travail. Il y a une dizaine de jours j’ai vu l’annonce d’une […]

Pngrewrite sous linux

Je fais encore le tour des outils de compression d’image pour faire la comparaison et trouver le bon compromis entre ressources consommées et efficacité. Un de mes problème c’est punypng qui annonce des performances exceptionnelles mais qui ne détaille pas son fonctionnement et ne propose même pas d’API. Je vérifierai leurs affirmations et tenterai de […]

Performance ressentie avec Mozilla

Ici je m’attache beaucoup aux chiffres : temps de chargement complet, latence, nombre de composants, etc. J’ai besoin de convaincre et seuls les chiffres ont l’objectivité nécessaire pour pouvoir travailler avec des gens non convaincus. Toutefois, une fois dépassé ce stade il faudrait se détacher un peu des chiffres pour parler de performance ressentie et […]

Page lente = taux d’abandon important

On en parlait il y a deux semaines dans le résumé de Steve Souders mais il semble que la statistique mise en avant avait peut être quelques défauts. On en a reparlé entre temps avec un joli graphique en camembert, et on a encore reparlé de la pertinence de la statistique. Il nous reste deux […]

Punypng, un smushit-like

Smushit a disparu, ou presque. On nous parlait d’ouvrir le code source. Il y avait une API pour faire des tests automatisés. Il était possible d’optimiser tout un site web. Le site a été repris sur un hébergement interne à Yahoo! et depuis il y a eu des indisponibilités et plus de régressions que d’améliorations. […]

Optimiser vos images avec Photoshop

Nous avons parlé plus d’une fois d’optimisation d’images. Dans des billets sur les outils comme pngcrush les commentaires ont parfois dérivé (avec plaisir) sur les techniques d’optimisations et l’importance de gérer la qualité et la compression de l’image dès la création. Souvent ce n’est plus possible pour ceux qui s’occupent des performances mais si vous […]

Pourquoi partez-vous ?

À ceux qui demandent des armes contre des graphistes peu concernés par les performances, voici un superbe camembert qui nous vient d’un site de designers : En demandant à un panel d’utilisateurs ce qui les fait partir d’un site web trois réponses principales ont été individualisées. Votre graphiste sera très content de voir que les […]

Compte rendu des conférences Velocity – Steve Souders

S’il y a une série de conférences auxquelles vous devez assister sur les performances, ce sont les conférences Velocity. La seconde édition a eu lieu en juin dernier, je regrette que l’éloignement m’ait contraint à ne pas espérer y aller, mais heureusement il y a des présentations en ligne et des résumés. C’est le résumé […]

Astuce EzPublish pour optimiser les images

Je vous avais parlé de plugins pour wordpress et symfony en janvier, puis de nouveau en mars. Ces plugins ne sont généralement pas parfaits. Ils ajoutent un filtre PHP au téléchargement des ressources statiques, ou utilisent des conversions avec perte sur les images (si je soutiens l’idée de dégrader un peu les images, le faire […]

Améliorer le code javascript

Malgré le rappel de Douglas Crockford sur le fait que le code javascript lui-même représente au mieux 15% des performances de la page, il est parfois utile d’y jeter un oeil. Nicholas Zakas, de Yahoo!, propose un bon aperçu pour ceux que ça intéresse dans sa présentation « Writing Efficient javascript » aux conférences Velocity 2009. Variables […]

Corrélation entre le temps de rendu et la complexité CSS

On en a parlé plusieurs fois. Le temps de reflow d’un navigateur est dépendant de la complexité des feuilles de style, et particulièrement de la complexité des sélecteurs CSS. Google Page Speed y fait référence mais si vous voulez être convaincus il faut aller voir la présentation de Steve Souders aux conférences Velocity 2009. À […]

Even Faster : 2 – Reactive web app

Le second chapitre de « Even Faster Web Sites » m’a plus satisfait que le premier.Second chapitre. Il est nommé « créer des applications web réactives » et rédigé par Ben Galbraith and Dion Almaer, les fondateurs de ajaxian (vous connaissez forcément pas mal de mes liens pointent là bas). Il n’y a plus de phrase qui accroche le […]

Quelle cible de performance ?

Il faut surveiller les performances, mais quelles limites se poser ? Quelle cible doit avoir votre application pour être considérée statisfaisante ? L’année dernière je reprenais ici même les chiffres de Jackob Nielsen, lui même les reprenant d’autres études qui remontent jusqu’en 68. On ne parle pas en effet que de site web. Puisque ces […]

Even Faster : 1 – ajax

Je vous avais dit que je ferai un retour sur le dernier livre de Steve Souders, « Even Faster Web Sites ». On commence par un chapitre qui n’est pas rédigé par Steve lui même, mais par Douglas Crockford, « Ajax Performance ». De l’Ajax par Douglas Crockford, ça donne envie. En fait Douglas y parle plutôt de compromis […]

Petit exemple de mise en pratique

Voici un petit exemple de comment mettre en place les bonnes pratiques de cache et de concaténation des fichiers javascripts. L’article date de 2006 mais n’a pas pris une ride. On y retrouve une réflexion sur comment regrouper les fichiers javascripts entre eux et comment les compresser. La note sur mod_gzip est toutefois assez contestable. […]

Point trop n’en faut

En ce moment se tiennent les conférences Velocity en Californie. C’est une période où les experts parlent entre eux et où les bonnes remarques et bons sujets à propos des performances web sont publiés plusieurs fois par jour. Suite à plusieurs de ces publications à propos des sprites CSS, il est temps de faire ici […]

Le mythe des 24Mb/s

Il semble qu’il faille parler un peu de bande passante. Nos meilleurs fournisseurs d’accès Internet promettent une bande passante de 24Mb/s. Monsieur tout le monde a l’impression de profiter d’une bande passante extraordinaire. L’internaute averti sait lui que ce n’est pas toujours le cas mais il va jusqu’à choisir son appartement en fonction de la […]

Optimisation JPEG (encore)

je vous ai parlé plus d’une fois de recompression des images PNG. Mais … et les jpeg ? Les jpeg ont aussi des métadonnées importantes et des informations inutiles dans un contexte web. Vous y trouverez plusieurs version de l’image à différentes résolutions pour gérer des miniatures, ou même des pistes audio. Stoyan Stefanov a […]

DNS Prefetch

J’adore le principe du préchargement. Il s’agit tout simplement de charger par avance les informations dont on pense avoir besoin plus tard pour pouvoir les utiliser instantanément à ce moment là. Quand plus rien ne fonctionne, le préchargement peut encore améliorer les choses. Firefox faisait déjà du préchargement, intelligemment, et ça sera probablement spécifié dans HTML […]

Even Faster Web Sites

Le second livre de Steve Souders sur la performance web, Even Faster Web Sites, est paru il y a une semaine aux éditions O’Reilly. Il est disponible en papier et en PDF (avec pour le même prix une version ebook pour lire dans le métro). Je ne l’avais pas caché, je n’ai pas aimé l’organisation […]

Pngcrush ou Optipng ?

Je reprend mon test précédent, plus de 7000 images PNG de taille diverses, beaucoup de 1 à 5 ko, d’autres jusqu’à 250 ko pour un total de 450 Mo. Faut-il utiliser pngcrush ou optipng pour recompresser ses images png ? PNGcrush me donnait 403 Mo (10% de gain) pour 75 minutes avec les options par défaut, et […]

Résultats de PNGcrush

Je fais depuis quelques jours des tests avec différents outils d’optimisation pour images PNG en vue de réimplémenter un smushit-like libre en ligne de commande. Je vous avais déjà parlé de pngcrush, mais sans plus de détails. Ce billet est là pour répondre à la question « dois-je utiliser les options pour pousser l’outil à bout […]

Google Page Speed

L’équipe performance de Yahoo! a fait un boulot extraordinaire concernant la performance web, et continue à le faire. On lui doit beaucoup de recherches inédites, les premières publications à la masse de développeurs, Yslow, Smushit… Google ne pouvait pas être en reste, surtout que Steve Souders, le monsieur performance de Yahoo!, est passé à Google depuis […]

Latence et CDN

La latence est une des composantes qui pénalise le plus les performances actuellement. Les connexions Internet françaises se font plutôt à haut débit, et même un mauvais wifi laisse finalement passer assez de trafic pour que ce soit viable. Par contre, avec l’explosion du nombre de composants par page, la latence est probablement le facteur […]

Statistiques Yslow

La collecte de statistiques réaliste est difficile. Je m’y essaie en ce moment pour l’écriture d’un livre sur les performances mais le résultat n’est pas à la hauteur de mes espérances. Show slow a lancé une initiative intéressante sur ce terrain. Le site propose à tous ceux qui ont installé Yslow d’envoyer automatiquement les résultats […]

Séparer en plusieurs domaines ?

L’année dernière je parlais du nombre de requêtes simultanées vers un même domaine. L’année dernière Internet Explorer 6 et 7 (2 requêtes simultanées) étaient fortement majoritaire, Firefox 3 (6 requêtes simultanées) était moins répandu que maintenant. L’étude de Yahoo! a été faite il y a deux ans, sur des bases encore moins favorables. Avec ces […]

Préchargement des images CSS avec Jquery

Dans le préchargement l’idée est de faire travailler le navigateur avant que l’utilisateur ne demande les documents pour que ce soit quasiment instantané ensuite. On attend la fin de chargement de la page, et on lance par avance le téléchargement de plusieurs liens dont on pense qu’ils serviront plus tard. C’est très intéressant pour quelques […]

Mesurer la performance avec Jiffy

Jiffy est un projet mené par Netflix et présenté aux conférences Velocity 2008 (en ligne, pdf, vidéo) par Bill Scoot (tiens, encore un ancien Yahoo!). Personne n’a l’air d’en avoir parlé depuis mais le projet est suffisamment intéressant pour mériter de s’y arrêter.

Encore des outils

Je vous avais parlé il y a quelques temps d’un plugin wordpress pour smushit et d’un script en php pour gérer cache, minimisation et concaténation des fichiers statiques. Voici d’autres briques du même type. Plus que les outils eux-même, qui n’ont rien de révolutionnaires, c’est la prise de conscience des questions de performance par les […]

Cache central des bibliothèques javascript

On m’a posé quelques fois la question alors voici la réponse : Oui. Oui il faut, quand vous le pouvez, utiliser les liens centralisés de Google ou de Yahoo pour vos bibliothèques javascript. Je parle de ne pas recopier jquery ou yui directement sur vos serveurs, mais d’utiliser les liens centralisés proposés par les deux […]

Google SDCH et HTTP

On vous a dit de compresser vos échanges HTTP avec gzip ou deflate, des les identifier avec des ETag, mais pouvons nous faire mieux ? C’est la question abordée par certaines équipes de Google (slides disponibles) en juin dernier aux conférences Velocity 2008. Ils partent du principe qu’une page web est composée de plusieurs éléments, […]

Introduction avec AOL Pagetest

Je vous avais parlé il y a quelques temps de webpagetest.org, la version en ligne de AOL Pagetest. C’est un des outils de base pour la mesure de performance dans le navigateur, avec des résultats très complets. Il ne s’agit pas de revenir sur l’outil, mais de vous signaler une vidéo (en anglais) qui détaille […]

Vidéo de la phase de rendu du navigateur

Que fait le navigateur pendant le rendu ? pourquoi est-ce si long ? La question est complexe à répondre pour qui n’a pas touché au moteur d’un navigateur. Pour vous donner un premier aperçu, vous avez toutefois trois vidéo (faites par Satoshi Ueyamai pour une présentation au Japon). Elles vous montrent les différentes étapes de […]

Plugin wordpress et outils automatiques

Parler de la performance web c’est d’abord convaincre que c’est important, puis rappeler qu’il y a quelques actions très simples à mettre en oeuvre qui ont un effet immédiat. En général je parle du cache sur les ressources statiques, et de la compression des contenus.

Aperçu de Yslow 2.0

J’avais déjà présenté Yslow, et de toutes façons tous ceux qui lisent ce blog doivent maintenant connaître cet outil indispensable. Stoyan Stefanov, de l’équipe performande de Yahoo!, a fait en chine la première présentation sur ce qui arrive avec la version 2.0 de Yslow. Pour tout vous dire j’avais le secret espoir que l’annonce de […]

Vidéo de Performances Web à l’AFUP

Je vous en parlais le mois dernier, désormais c’est la vidéo de mon intervention au forum PHP AFUP 2008 qui est disponible en ligne. Les slides eux sont toujours dans mon précédent billet. Je vous laisse donc regarder la vidéo performance web sur PHPTV, qui a enregistré ça le jour des conférences et publié à […]

Encore sur le cache de l’iPhone

L’iPhone a changé la donne sur la consultation du web par les mobiles. Avant nous luttions pour faire comprendre que les performances des sites web devaient aussi être adaptées à une consultation avec une grande latence et une très faible bande passante. Maintenant nous voyons même apparaître des sites spécifiques iPhone. Apple lui même met […]

Quelques outils en ligne

Je vous avais présenté quelques outils, aujourd’hui en voilà trois autres, en ligne. Le concept de ces outils est le même : on prend une URL, on lance la page, et on trace la cascade des requêtes HTTP avec quelques statistiques. C’est là qu’on voit le temps pris par chaque composant, par la somme des […]

Quel avenir ?

Vouloir optimiser le code et régler les performances, est-ce un sujet qui sera obsolète bientôt ? La question peut-être posée autrement : n’est-on pas en train de compenser les défauts des navigateurs dans quelques millions de sites avec des résultats discutables au lieu de fixer les quelques navigateurs ? Sus au navigateur ! Ma première […]

Questions de rendu

Ce lien on me l’a donné plus d’une douzaine de fois, et c’est vrai que c’est intéressant. Je regrette même de ne pas avoir eu une intervention similaire pour Paris Web 2008. De quoi je parle ? de l’intervention de David Baron aux Tech Talks de Google le 18 novembre dernier. David Baron c’est un […]

Velocity 2009 – Appel à participation

Plusieurs de mes billets ont pris comme base des présentations données aux conferences Velocity de 2008. Il s’agit d’un événement organisé par O’Reilly où on y parle performance en long en large et en travers. Alors voilà, ils viennent de publier un appel à participation pour l’année prochaine en Californie, juin 2009 exactement. Si vous […]

Un livre sur les performances web

Pour l’instant il n’existe que quelques ressources sur les performances web vues du client. La plupart sont des blogs assez similaires au mien, avec des liens et des articles épars. En fait mon égo me fait croire que le mien est non seulement le seul en français mais le plus complet toutes langues confondues. Il […]

Votre problème n’est pas sur la page HTML elle-même

Parlez de performance de sites web à un ingénieur standard, le voilà déjà tentant d’optimiser son code PHP ou son code Java, et de lancer des sondes sur son serveur de bases de données. Oh, c’est important et des fois l’applicatif est vraiment mal fait, mais généralement ce n’est pas ce qui pose problème, mais […]

Performances, un sujet pas si récent que ça

On entend sérieusement parler des performances des sites web depuis quoi, un an ? deux ans pour les plus débrouillards ? Pourtant j’ai remonté les archives pour vous. Histoire de prendre une figure connue j’ai pris Jakob Nielsen. Jakob est peut être le dinosaure de l’utilisabilité (ou usabilité, je vous laisse choisir votre terme). Il […]

Éviter les événements trop fréquents

Les bons développeurs javascript utilisent les événements, à toutes les sauces. En fait quasiment tout ce qui est fait en javascript est en réaction à un événement. On arrive à deux problématiques qui ont un un impact plus ou moins important sur les performances :

Performance des sélecteurs CSS, encore un mot

On reparle des performances CSS. Souvenez-vous, je vous avais parlé d’un document de Mozilla faisant état des sélecteurs plus ou moins performants. S’était ensuivi une discussion à propos de la pertinence de tels sujets vu la différence de performance mise en oeuvre. Je vous invite à relire ce second billet, qui résume assez bien. Si […]

Une version mobile pour les PC classiques ?

Alors voilà, je pensais sauter le billet du vendredi. Je suis un Turquie pour donner deux conférences éclair et mon accès Internet est irrégulier. Pas de quoi modérer les commentaires. Par contre je me retrouve pile dans l’usage où la performance est nécessaire, indispensable. Au milieu du CEBIT, une borne wifi est ouverte. J’en profite […]

Vérifiez vos images

Il y a encore peu de temps pour vérifier les images d’un site je prenais Firebug, je téléchargeais toutes les images une à une, puis je tentais de retirer les méta données avec PNGcrush ou un équivalent (en fait plusieurs parce que les images donnent parfois de meilleurs résultats sur un outil parfois sur un […]

Prenez vos cours avec Steve Souders

Le saviez-vous ? Certaines universités ont des cours très pointus et pertinents sur les technologies web client, y compris sur les performances. Ne vous emballez pas, ce n’est pas demain la veille que ça arrivera en France. Chez nous c’est déjà bien si on enseigne du HTML conforme aux normes et si on parle programmation […]

Expires et Cache-Control, une date limite de consommation pour vos contenus

Je parle de détails et de ce que je rencontre dans mes lectures, et j’en oublie le principal. alors voilà, si vous ne devez retenir qu’une chose c’est d’utiliser des dates d’expiration explicites sur vos contenus. Il s’agit d’informer le navigateur que votre contenu est valable pendant une certaine durée. Cela peut être dix minutes, […]

Mode de rendu des tableaux

Pour ceux qui doutes Microsoft en parle dans son article sur les performances, mais ce point là est généralement bien accepté car la différence de performance est parfois flagrante. Sitepoint en parle aussi d’ailleurs : Le mode de rendu des tableaux impacte les performances.

Erreurs de syntaxe

J’ai beaucoup parlé de CSS, de réseau, de javascript, et j’entend parfois dire que le HTML lui n’a aucune importance. Ce n’est malheureusement pas vrai. Il y a au moins trois points à regarder dans le HTML : la qualité syntaxique du code, le mode de rendu des tableaux, et le nombre de noeuds DOM. […]

Précharger les vidéos, oui mais…

Qui aime attendre pour charger une vidéo ? probablement personne. Du coup quand vous arrivez sur une page avec une vidéo, le lecteur précharge le début au cas où vous voudriez la jouer. Même une fois en lecture, votre logiciel tente d’avoir toujours une avance confortable sur le chargement de la vidéo afin de vous […]

Des chiffres à vous rendre malade

La taille des pages a plus que triplé en 5 ans, passant de 90Ko à 310Ko. Dans le même temps on a aussi doublé le nombre de composants externes par page (de 25 à 50). Cette progression ne faiblit pas, bien au contraire. Attention, je bourre le reste de l’article de chiffres, et certains font […]

Présentation au W3Café

Je vous en avais parlé il y a une semaine, voici donc le contenu de notre présentation sur les performances avec Mathieu Pillard et Anthony Ricaud au dernier W3Café. J’espère que nous aurons l’occasion de faire un suivi dans un prochain W3Café, en tout cas vous pourrez suivre le sujet ici même (oui, j’ai ralenti […]

WaSP Café ce vendredi

J’ai le plaisir de participer demain (vendredi 5 septembre) au WaSP Café qui se tient dans les locaux de l’IESA, à Paris. Avec Mathieu Pillard et Anthony Ricaud, nous dirigerons une présentation et des discussions sur la problématique des performances Web. Vous êtes tous les bienvenus, à condition de vous être inscrits (mais il semble que […]

Normalisez vos liens

Je viens de croiser une liste de recommandations Microsoft pour la performance des sites web. On y retrouve plusieurs choses connues et une recommandation sur la cohérence des liens. La page MSDN donne l’exemple d’un même lien avec deux casses différentes. Certains serveurs ignoreront la casse ou corrigeront le lien mais cela restera deux ressources […]

Concaténation de chaînes de caractères en javascript

Dans la plupart des langages, les chaînes de caractères ne sont pas modifiables. Ajouter un caractère à une chaîne existante c’est créer un nouvel objet avec la chaîne résultante. Parfois comme dans ruby ce n’est pas visible pour l’utilisateur mais c’est bien ce qui est fait en interne. pour éviter que de multiples concaténations ne […]

Styles avec et sans Javascript

Charger le javascript le plus tard possible, ou au moins de manière asynchrone, implique que le visiteur risque de voir la page avant l’exécution du dit javascript. Si le javascript enrichit ou modifie la page, le visiteur aura la désagréable surprise de voir la page se modifier sous ses yeux. Dans un des premiers billets je […]

Javascript en ligne

Je fais suite au précédent billet sur la présentation de Steve Souders aux conférences Velocity 2008. Tout à la fin il nous donne une seconde information sur le javascript inline, et ceci est une nouveauté pour moi. La situation de base : Firefox bloque tous les nouveaux téléchargements quand il récupère une feuille de style. […]

Javascript non bloquant

Je vous l’avais dit, une balise <script> bloque le rendu et les nouveaux téléchargements dans le navigateur le temps que le javascript soit complètement téléchargé et exécuté. Une des solutions c’est de reléguer cette balise à la fin du document. Il y a des fois où ce n’est pas idéal et c’est Steve Souders qui […]

Où vous situez-vous ?

Et vous, où en êtes-vous ? Rob Larsen a récupéré une liste de 200 sites américains et a fait fonctionner yslow sur chacun d’eux en janvier dernier. Les résultats c’est 5 A, 6 B, 14 C and 31 D et le reste en F. Attention à ne pas en tirer des conclusions trop hative sur l’importance ou non de s’intéresser aux performances. […]

Dégradez les PNG, faites des compromis

  Je continue avec l’excellente présentation de Stoyan Stefanov et je prend la suite de la discussion en commentaire d’il y a quinze jours. Passez en 256 couleurs Un PNG24 c’est 16 millions de couleurs. En pratique les PNG on souvent moins de 1000 couleurs. Si vous avez besoin des 16 millions ce que vous […]

Interpréteur JSON natif pour webkit

Je vous en parlais il y a presque deux mois, JSON c’est lent à interpréter si on le fait bien. C’est même globalement plus lent que XML parce que le code est en javascript, côté utilisateur, alors que XML est géré nativement par les navigateurs. La solution c’est l’arrivée de moteurs JSON natifs dans les […]

Analyse d’une requête HTTP – serveur et réseau

On parle de temps, de performance, mais finalement que mesure t-on ? La question n’est pas inutile puisque pour une même requête il y a bien trois étape visibles du point de vue du visiteur, cinq du point de vue du navigateur et autant pour le serveur. Alors, que mesure t-on ?

Ne pas filtrer les PNGs

Utiliser les filtres CSS d’Internet Explorer n’est pas une bonne idée. Déjà ils sont inutiles la plupart du temps, quand vous pouvez vous contenter d’un PNG8 avec une transparence binaire (c’est à dire la plupart du temps si vous avez suivi le début de la phrase), mais en plus ils sont lents. Quand vous faites […]

Optimisation d’images – 7 erreurs

Stoyan Stefanov, de l’équipe Performance de Yahoo! a donné une présentation fin juin sur l’optimisation des images. J’ai déjà parlé de plusieurs choses, il en rajoute d’autres, avec des chiffres percutants et des explications concices.

Optimiser les performances d’un site web

je vous en avais parlé, maintenant c’est fait. Camille Roux et Nicolas Chevallier ont ont réalisé une présentation sur l’optimisation des performances d’un site web aux Intellicore Tech Talks. Vous avez donc maintenant la vidéo et les slides disponibles en ligne. Commentaires et comptes rendus bienvenus.

Les outils : Yslow

Aujourd’hui je fais réviser les bases avec Yslow. Il s’agit d’un outil développé par Yahoo! pour vérifier de façon automatisée l’application des règles de performances web internes. Il offre une vue rapide du poids et du temps de rendu de la page, une notation après vérification une à une de 13 des règles de performance […]

Intellicore Tech Talks sur les performances web

Camille Roux me fait part qu’il co-animera avec Nicolas Chevallier une présentation sur l’optimisation des performances d’un site web dans le cadre des Intellicore Tech Talks. Cette présentation se tiendra le mardi 8 Juillet à 13h à Sophia-Antipolis.

Attention aux compresseurs javascript

En avril je vous parlais du packer de Dean Edwards qui permet de miniser le code javascript avant envoi. J’émettais un doute sur l’option base62. Avec cette option le code javascript est codé avant envoi. Une fois ce javascript reçu, le navigateur va le décoder, puis utiliser eval() pour l’exécuter. C’est tout sauf transparent pour […]

Des sprites jusqu’à plus soif

Ceux qui ont utilisé les jeux vidéo il y a 10 ou 15 ans connaissent forcément les sprites. Pour économiser les ressources on regroupe toutes les icônes et les images dans un ou plusieurs fichiers. Le résultat c’est une sorte de tableau d’images, le jeu utilise alors simplement une partie de cette image à chaque […]

Lessive et performance

La communication des éditeurs de navigateur ressemble plus en plus à celle des vendeurs de lessive, mais au moins on commence à voir l’importance des performances. Le navigateur le plus rapide au monde ! On apprend ainsi que Firefox 3 est le navigateur le plus rapide au monde ! En France c’est bien sûr Tristan […]

Et pour le mobile ?

Les mobiles ont longtemps été une cible très spécifique à base de WAP. C’est maintenant révolu et on a de réels navigateurs complets avec javascript et CSS. Que peut-on faire de spécifique pour le Web mobile ? C’est Jason Grigsby de cloudfour qui vient de donner une présentation « Going fast on the mobile web« .  Les […]

Privé ou public ?

La directive Cache-Control est une vrai mine d’or pour la gestion du cache, au risque même de faire un peu fourre-tout. Aujourd’hui je m’intéresse surtout aux notions de document public et de document privé. Visibilité et autorisation de cache Pour faire court, cette directive contient quatre paramètres de visibilité : public, private, no-cache et no-store.

Portée des variables Javascript

Après CSS, faisons un petit passage par Javascript. C’est Yoan qui m’a fait passé un lien intéressant d’Ariel Flesler.  La portée des variables javascript La portée des variables Javascript trompe souvent le développeur débutant. Les variables variables fonctionnent par bloc de code. Pour faire court un bloc c’est ce qui est délimité par des accolades […]

Gains de performance des sélecteurs CSS

Je parlais il y a quelques jours de performance des sélecteurs CSS. Il y a eu quelques réactions et j’ai échoué dans mes explications : les différences de performance dont on parle ici sont probablement négligeables la plupart du temps. Hors commentaires, certains m’ont rappelé que la documentation de Mozilla concerne d’ailleurs au départ les […]

Limitations du cache Safari

Pour l’iphone Safari a de sérieuses limitations sur le cache. Yahoo! avait déjà débusqué les limites de la version iphone : les fichiers ne doivent pas dépasser 25 ko une fois décompressés et le total doit être strictement inférieur à 500 ko. Ces limitations semblent raisonnables pour un téléphone mais ce téléphone navigue souvent sur […]

Performance des sélecteurs CSS

Nous avons peu d’informations officielles de la part des navigateurs sur les performances de leurs moteurs. Le Mozilla Developer Center nous propose tout de même une courte page sur comment écrire des feuilles de style efficaces. Dans ce billet j’appellerai critère une partie de sélecteur qui contient un identifiant, une classe, un nom de balise […]

Un mode « fast » ?

C’est peut être ce qui résoudrait quelques problèmes de performances : une option « fast » en javascript. Cela permettrait de déclarer qu’on n’utilise pas de document.write et ne plus bloquer le rendu du navigateur. On pourrait aussi déclarer ne pas toucher aux prototypes des objets de base pour bénéficier de meilleures optimisations de l’interpréteur. Si les moteurs […]

Les outils : le Cuzillon

Tester les performances nécessite du temps, beaucoup de temps. Il y a de nombreux outils qui permettent de tracer les téléchargements, les requêtes, les temps d’attente, etc. Ce qui manque c’est la page à tester. À chaque itération il faut changer le code html, le css, le javascript, les images. J’ai de mon côté un […]

JSON ?

JSON ! c’est le cri de tous les développeurs web à la mode dès qu’ils entendent parler d’échanges de données. Ce format est sensé être plus performant, plus simple, plus standard, plus performant, plus web 2.0 quoi. Plusieurs points mériteraient un billet à part entière, et je suis en désaccord sur chacun d’eux, mais je […]

Pages d’erreur

Rappelez-vous : cool URIs don’t change (les URIs sympa ne changent pas), et mieux, autant que possible elle ne disparaissent pas non plus. Reste que beaucoup d’éditeurs ne tiennent pas compte de cette recommandation, et que les développeurs ne peuvent s’abstenir de faire des erreurs quand ils font des liens.  Ces pages d’erreurs donnent une piètre […]

CSS et @import

Il y a peu on a vu fleurir des liens vers des propositions au groupe de travail CSS. Et en particulier une proposition de variables CSS. Ces variables peuvent être changées dynamiquement en javascript. Le rendu est alors refait avec la nouvelle valeur, partout où la variable était utilisée. La question des performances Si vous […]

Compression avant transfert

Après avoir parlé de minimisation, il est temps de parler de compression, la règle 4 des recommandations de l’équipe performance Yahoo!. Trop gros Une part importantes des téléchargements sont réalisés sur de simples fichiers textes : HTML, javascript, CSS, XML et JSON. Mis côte à côte ils peuvent représenter un poids non négligeable. C’est particulièrement vrai […]

Pipelining : enchaîner les requêtes HTTP

Le pipelining HTTP c’est faire gérer au serveur une file de requêtes. Le navigateur envoie plusieurs requêtes à la suite les unes des autres sans attendre la réponse du serveur. Le serveur renvoie alors les réponses dès qu’il les a, potentiellement en parallèle aux requêtes du navigateur. Non seulement on utilise le principe de la connexion […]

Keep-alive et connexions persistantes

La latence réseau a un impact très important sur les performances. Si les ressources sont zippées, que vos images sont correctement compressées, et que les fichiers textes sont minimisés, la latence peut devenir presque plus pénalisante que les téléchargements eux même.

Limitation du nombre de requêtes

Nos navigateurs sont performants, ils savent gérer plusieurs téléchargements en parallèle. Ca nous permet de palier les serveurs lents, et d’optimiser le réseau. Le temps qu’on se connecte sur un serveur, qu’on fasse une requête DNS, le réseau reste occupé avec d’autres téléchargements. Sans limite ? On ne peut pas non plus tout télécharger en […]

Javascript à sa place

Chaque fois que je parle de reléguer les codes javascript en fin de page, je vois une moue sur le visage de mon interlocuteur. Mettre le javascript dans le <body> du document, et encore plus à la fin de celui-ci, et souvent préjugé comme une pratique « sale ». Laissez moi vous convaincre du contraire.

Impact de la latence réseau

Après avoir parlé hier des stratégies d’optimisation, parlons rapidement de ce qu’il y a à gagner. Je me concentre sur la stratégie la plus fréquente : tenter de regrouper nos ressources dans des gros fichiers globaux. Pour l’exemple, j’ai arbitrairement utilisé le blog de Frédéric de Villamil. La page semble assez rapide à charger. Concrêtement, […]

Stratégies d’optimisation du cache

Deux règles principales pour la performance des sites web sont de réduire le nombre de requêtes HTTP et de limiter la taille des données qu’on télécharge. Malheureusement ces deux règles entre parfois en conflit. Si je fais un gros fichier unique pour toutes mes CSS, je vais inclure des règles qui seront inutiles pour la […]