Archives par mot-clef : performances

Je réagis à un article que @_kud a relayé sur Twitter. L’article « Time to remove jQuery » a été écrit par Rogchap fin aôut. Dans cet article, Rogchap explique son souhait de quitter jQuery après l’avoir utilisé, beaucoup, presque à outrance, comme beaucoup d’entre nous. Maintenant il utilisé des micro-librairies pour remplacer jQuery dans les usages que requièrent ses projets. Je souhaitais réagir à son article plus loin que par un simple commentaire. Aussi parce que pendant longtemps comme vous le savez, j’ai tenu sur ce blog, une chronique jQuery et de nombreux articles autour de jQuery. Cet article me sert d’amorce au mien. Sur une sorte de ras le bol de cette mode de défoncer jQuery à la première occasion venue sur des arguments parfois quasi foireux. Parfois justifiés aussi. Un peu d’histoire jQuery a été créé par John Resig en … Continuer la lecture

Salut à tous ! Aujourd’hui, l’idée, c’est de vous aider à choisir vos plugins pour jQuery et faire le tri dans ce gigantesque fourre-tout. Critère 1 : Communauté Comme pour tous les systèmes de plugins, si le plugin n’est pas sur GitHub/BitBucket, c’est déjà mal barré. Si en plus il n’a que peu d’étoiles/forks, laissez tomber, ça veut dire que personne ne l’utilise. C’est qu’il y a sûrement une raison. Critère 2 : Peu voire pas de CSS Le style, ça se manipule avec le CSS, pas avec le JS. Énormément de plugins font juste des modifs de CSS (genre rendre votre site responsive, si si). Sortez vous les doigts des fesses et faites le avec la bonne chose, c’est à dire directement en CSS. En plus de bousillez inutilement vos performances, ces plugins font souvent très mal le travail. Critère 3 … Continuer la lecture

Sitespeed est un outil de mesure de la vitesse et des performances de votre site. La différence avec WebPageTest se situe dans l’idée que Sitespeed est beaucoup plus simple à installer en local et n’est pas prévu (de base) pour pouvoir être à la disposition de tous sur l’internet mondial. Vous pouvez avoir instance privée sur votre poste sans soucis. Autre particularité, WebPageTest va vous donner en sortie une page pas réellement exploitable automatiquement et selon un temps de réponse parfaitement aléatoire. Alors que Sitespeed lui pourra au choix sortir du HTML ou XML compatible JUnit. Pratique pour exploiter sous Jenkins ou autre outil d’intégration continue.

Je l’ai déjà évoqué à de multiples reprises sur ce blog, mais je vais le refaire. La mise en cache est une pratique clé pour les performances. L’idée est simple : mettre dans une variable locale une autre variable contenue dans une autre. Pas besoin que l’élément mis en cache soit très bas dans l’arborescence de son objet. Même au premier niveau vous aurez un gain si l’objet parent tout en haut est global. Exemple : var App = function () { controllers : [ one : {}, two : { some : "value" } ] }; if(undefined !== App.controllers[0].some) { App.controllers[0].some = "thing"; } Ici le script va d’abord vérifier si monObjet est local. Non. Il va donc remonter d’un score et non, toujours pas. Encore un scope, on arrive en global, et là on y est. Cette recherche … Continuer la lecture

J’abordais il y a peu le sujet de l’outil WebPageTest. J’espère que vous avez bien joué avec. Ceci dit, sur Paris, et même tout simplement en France, le nombre de serveurs de tests laisse à désirer (bah ouais : 1). Ce qui ne permet pas de faire des tests réellement complets et intéressants. WebPageTest met à dispo un soft en open-source sur Github à faire tourner sur un poste Windows dédié en DMZ (tests IE oblige). Toutes les explications sont ici : https://sites.google.com/a/webpagetest.org/docs/other-resources/hosting-a-test-location Merci au seul sponsor actuel français d’ailleurs : Akamai.

On m’a toujours dit que $("#test").hide().show(); // est moins rapide que $("#test").css('display', 'none').show(); Mais, ça m’embêtait un peu parce que hide n’est pas réellement un alias de display:none. Sauf que moi, je suis aussi un peu fainéant. J’aime bien hide parce que ça va plus vite écrire. Et surtout, ça donne pas un peu moins l’idée qu’on peut jouer directement avec les CSS dans du code JS. Après tout, à part pour quelques raisons pratiques quasi indéfendables, manipuler les styles via le JS plutôt que le CSS n’est pas une bonne idée. Autant ne pas y faire explicitement allusion. Du coup, j’ai fait un JS Perf. Je suis satisfait de voir que je vais pouvoir continuer de faire mon fainéant et utiliser hide(). Les résultats ici : http://jsperf.com/jquery-hide-or-display-none

Aujourd’hui je vous propose de visualiser seconde par seconde comment votre site se charge. En simulant par exemple une connexion 3G d’un mobile dans Paris. C’est à dire avec les problématiques de bande passante, surtout. Ce petit miracle est dû grâce à Web Page Test. Ce site va charger votre page et vous afficher sur une courbe façon temps réel ce qui est chargé. Et par des captures à chaque seconde ce à quoi ressemble votre site sur l’entité utilisée. Pratique pour comprendre là où ça pêche sur les temps de chargement. Le tout accompagné d’une ligne de temps, à la Firebug ou Dev Tools, synchronisée aux captures pour bien visualiser les choses bloquantes (telles que les polices). Sympa non ?

Hello ! Après 3 semaines de calme, revoilà la chronique jQuery. Toujours au ralentie pour une bonne raison : c’est l’été. L’activité est donc réduite au minimum aussi bien de mon côté que du côté de… bah vous tous en fait. Vu que c’est ce que font les gens qui alimentent cette chronique. Fini de divaguer, les actualités sont : Sortie de jQuery 1.10.2 et 2.0.3 ! Comme toujours pour les versions mineures, ce sont des versions de maintenance. L’annonce donne l’ensemble des détails. On y compte notamment des correctifs pour IE 7, 10 et Opera 12. Sortie de l’alpha de jQuery Mobile 1.4.0 ! Jasper de Groot a annoncé cette version il y a peu. Consacrée aux performances, mais il y a aussi des modifications de taille. Les anciens PNG pour les icônes passent an arrière plan, en fallback, … Continuer la lecture

Salut à tous ! Aujourd’hui, j’ai une question pour vous ! Qu’est-ce que vous utilisez pour réduire la taille de vos images dans un processus qui peut-être géré sous console ? Comme un processus de build par exemple. Donc dehors les The Gimp et Photoshop, etc. Je suis tenté par trois outils qui me font de l’oeil : TinyPNG, Kraken.io et JPEGmini. Mon coeur balance du coup… Est-ce que je devrais utiliser Kraken pour être multi-format, utiliser TinyPNG et JPEGmini pour gérer les deux formats principaux ou convertir toutes mes images en un format puis optimiser avec TinyPNG ou JPEGmini. Vous utilisez quoi vous ? Vous en pensez quoi ? Je ne me suis jamais penché sur la question …

Salut à tous ! On est un jour férié ? Tant pis pour vous 😉 Mon ami François Germain a pondu un plugin permettant de récupérer une donnée : valeur d’un champ, valeur d’un attribut (y compris les data-attributs). Et ceci, directement depuis le sélecteur. Je n’aime pas trop l’idée parce que ça ne tient pas compte des questions de performance ni de l’idéologie de jQuery. Ceci dit, pourquoi pas. Souvent on vous dit de ne pas utiliser jQuery quand vous n’en avez pas besoin. Rien ne vous interdit cependant de commencer à développer avec puis de retirer ensuite si vous pensez que ça n’était pas nécessaire. Pour ça, il existe désormais aussi un plugin qui s’appelle jQuery Functions Finder. Entre autres raisons, ça vous permet aussi de savoir quelles fonctions vous utilisez dans le core. Et je termine en … Continuer la lecture