Les livres de Steve Souders sont-ils toujours d'actualité ?

[Thomas Bassetto]

Bonsoir,

Est-ce que "High Performance Web Sites" et "Even Faster Web Sites"
sont toujours d'actualité en 2013 ? Les navigateurs et les bonnes
pratiques me semblent avoir beaucoup évolués depuis 2007 et 2009.

Aussi, je me demandais si quelqu'un avait déjà eu l'occasion de jeter
un oeil au prochain livre d'Ilya Grigorik:
http://chimera.labs.oreilly.com/books/1230000000545/

--
Thomas

[jpvincent]

Globalement la majorité des techniques survit à un monde où IE8 doit être encore supporté

Mais depuis la fin d'IE7, avec la domination des navigateurs toujours à jour et optimisés, et avec les contraintes de réseau mobile, il y a des trucs à rajouter et d'autre à supprimer

Je n'ai pas lu ces livres, aussi je me réfère au chapitrage.

http://www.stevesouders.com/efws/

Splitting the Initial Payload

=> d'autant plus vrai aujourd'hui que les sites sont obèses

Loading Scripts Without Blocking

Coupling Asynchronous Scripts

Positioning Inline Scripts

=> JS et la manipulation DOM devient plus importants que jamais, surtout pour IE8

by Nicholas C. Zakas

Optimizing Images*

=> of course

Sharding Dominant Domains

=> plus dangereux qu'efficace avec la sextuple ouverture de connexion par domaine, la quinzaine de domaines par sites et les bandes passantes qui n'ont pas vraiment bougé

Flushing the Document Early

=> tjrs vrai

Simplifying CSS Selectors

=> j'y ai jamais cru, ce ne sont pas les navigateurs modernes, même mobiles qui vont changer mon opinion. Ce qui compte c'est la complexité du DOM (profondeur et nombre d'éléments)

Pour High Performance Web Sites (http://stevesouders.com/hpws/rules.php)

Rule 1 - Make Fewer HTTP Requests

=> toujours vrai, surtout sur mobile. Inutile si serveur et navigateur ont SPDY / HTTP2

Rule 2 - Use a Content Delivery Network

=> toujours aussi contestable sur la performance d'une page simple.

Rule 3 - Add an Expires Header

=> vérité éternelle, le cache doit être géré finement par les développeurs

Rule 4 - Gzip Components

=> vérité éternelle

Rule 5 - Put Stylesheets at the Top

=> wesh

Rule 6 - Put Scripts at the Bottom

=> perso je préfère l'asynchrone par modules, type AMD, mais il y a 

Rule 7 - Avoid CSS Expressions

=> obsolète

Rule 8 - Make JavaScript and CSS External

=> globalement vrai, mais l'inline reste le plus efficace dans certains cas

Rule 9 - Reduce DNS Lookups

=> encore plus vrai aujourd'hui

Rule 10 - Minify JavaScript

=> true

Rule 11 - Avoid Redirects

=> true, surtout sur mobile

Rule 12 - Remove Duplicate Scripts

=> true

Rule 13 - Configure ETags

=> pareil, la gestion du cache doit être irréprochable

Rule 14 - Make AJAX Cacheable

=> gestion du cache

Il manquerait les nouvelles menaces :

- SPOF dues aux serveurs tiers (widges G+, facebook, twitter non asynchrones, pubs et trackers)

- sur-utilisation des fonts qui sont aussi bloquantes que JS / CSS

- mauvaise implémentation de RWD

Et de nouveaux conseils :

- gérer finement son interface utilisateur pour gérer les temps d'attente, avec des transitions, des petits loading, etc...

- utiliser le super cache offline sur les mobiles si on a le niveau

et je dois en oublier

[Stephane RIOS]

Quelques commentaires rapides dans le texte.
Et plus généralement, le mobile fait qu'en grande partie ces règles restent vraies même si les navigateurs mobiles apportent des fonctionnalités qu'on n'avait pas il y 5/6 ans (localStorage et compagnie).
La concaténation est une des règles qui a fait le plus débat chez nous parce que les nouveaux navigateurs gèrent très bien une multitude de fichiers en parallèle. Mais quand on voit des sites avec des dizaines de CSS et de JS, on s'est dit qu'il y avait encore de la marge (surtout pour IE).

Pas lu le livre d'Ilya encore mais il est beaucoup axé sur le réseau comme son nom l'indique, il apporte une dimension supplémentaire et up-to-date aux règles actuelles.


Le 22/03/13 10:23, jpvincent a écrit :

Globalement la majorité des techniques survit à un monde où IE8 doit être encore supporté

Mais depuis la fin d'IE7, avec la domination des navigateurs toujours à jour et optimisés, et avec les contraintes de réseau mobile, il y a des trucs à rajouter et d'autre à supprimer

Je n'ai pas lu ces livres, aussi je me réfère au chapitrage.

http://www.stevesouders.com/efws/

Splitting the Initial Payload

=> d'autant plus vrai aujourd'hui que les sites sont obèses

Loading Scripts Without Blocking

Coupling Asynchronous Scripts

Positioning Inline Scripts

=> JS et la manipulation DOM devient plus importants que jamais, surtout pour IE8

by Nicholas C. Zakas

Optimizing Images*

=> of course

Encore plus pour le mobile

Sharding Dominant Domains

=> plus dangereux qu'efficace avec la sextuple ouverture de connexion par domaine, la quinzaine de domaines par sites et les bandes passantes qui n'ont pas vraiment bougé

Surtout dans le head. Les temps de résolution DNS sont des fois importants. Le prefetching DNS améliore un poil les choses mais pas supporté par IE8 il me semble.
Le problème est que si c'est sur le même domaine (pour éviter les résolutions DNS), on perd le principe du domaine séparé (cookie less domain). Et si le CDN n'est utilisé que pour les sous-domaines statiques, idem, on perd l'intérêt.
L'inlining directement dans le head me semble des fois la meilleure des solutions, particulièrement pour les CSS (s'ils ont une taille raisonnable)

Flushing the Document Early

=> tjrs vrai

Simplifying CSS Selectors

=> j'y ai jamais cru, ce ne sont pas les navigateurs modernes, même mobiles qui vont changer mon opinion. Ce qui compte c'est la complexité du DOM (profondeur et nombre d'éléments)

ça c'est quand on doit gagner 10ms sur une page qui se charge déjà en moins d'une seconde ;-)

Pour High Performance Web Sites (http://stevesouders.com/hpws/rules.php)

Rule 1 - Make Fewer HTTP Requests

=> toujours vrai, surtout sur mobile. Inutile si serveur et navigateur ont SPDY / HTTP2

A ce propos, je suis revenu du spriting CSS ... Je pense qu'inliner les images est beaucoup plus facile à mettre en oeuvre et beaucoup moins pénible à maintenir. En plus, maintenant que IE6/7 disparaissent, on peut en profiter pleinement (même si le support IE8 est pas super complet).

Rule 2 - Use a Content Delivery Network

=> toujours aussi contestable sur la performance d'une page simple.

La question se pose surtout en terme d'audience du site.
Un site dont l'origine est en Europe et qui est consulté en Chine a intérêt à mettre un CDN !
Pour une audience franco-française, bof bien que les CDNs régionaux comme celui de SFR puissent apporter quelque chose (on est en train de le tester).

Rule 3 - Add an Expires Header

=> vérité éternelle, le cache doit être géré finement par les développeurs

Rule 4 - Gzip Components

=> vérité éternelle

Rule 5 - Put Stylesheets at the Top

=> wesh

Rule 6 - Put Scripts at the Bottom

=> perso je préfère l'asynchrone par modules, type AMD, mais il y a 

Rule 7 - Avoid CSS Expressions

=> obsolète

Rule 8 - Make JavaScript and CSS External

=> globalement vrai, mais l'inline reste le plus efficace dans certains cas

surtout dans le head

Rule 9 - Reduce DNS Lookups

=> encore plus vrai aujourd'hui

Quand on voit des pages avec des dizaines de tags qui font plusieurs dizaines d'appels à des ressources sur des domaines différents, on voit bien l'impact des résolutions DNS ! Sur mobile, c'est encore plus l'enfer.
Avec du JS async, si ces tags arrivent après le onload et ne gênent pas le chargement, no soucy.

Rule 10 - Minify JavaScript

=> true

Rule 11 - Avoid Redirects

=> true, surtout sur mobile

Rule 12 - Remove Duplicate Scripts

=> true

Rule 13 - Configure ETags

=> pareil, la gestion du cache doit être irréprochable

Rule 14 - Make AJAX Cacheable

=> gestion du cache

Il manquerait les nouvelles menaces :

- SPOF dues aux serveurs tiers (widges G+, facebook, twitter non asynchrones, pubs et trackers)

- sur-utilisation des fonts qui sont aussi bloquantes que JS / CSS

Bien penser à les servir pour un subset donné (latin par ex)

- mauvaise implémentation de RWD

Et de nouveaux conseils :

- gérer finement son interface utilisateur pour gérer les temps d'attente, avec des transitions, des petits loading, etc...

- utiliser le super cache offline sur les mobiles si on a le niveau

et je dois en oublier

Le vendredi 22 mars 2013 00:49:58 UTC+1, Thomas a écrit :

Bonsoir,

Est-ce que "High Performance Web Sites" et "Even Faster Web Sites"
sont toujours d'actualité en 2013 ? Les navigateurs et les bonnes
pratiques me semblent avoir beaucoup évolués depuis 2007 et 2009.

Aussi, je me demandais si quelqu'un avait déjà eu l'occasion de jeter
un oeil au prochain livre d'Ilya Grigorik:
http://chimera.labs.oreilly.com/books/1230000000545/

--
Thomas

--
--
Liste de diffusion sur les performances web : http://groups.google.com/group/performance-web
Plus d'informations : http://performance.survol.fr/
Se déinsinscrire : performance-w...@googlegroups.com
---
Vous recevez ce message, car vous êtes abonné au groupe Google Groupes performance-web.
Pour vous désabonner de ce groupe et ne plus recevoir d'e-mails le concernant, envoyez un e-mail à l'adresse performance-w...@googlegroups.com.
Pour plus d'options, visitez le site https://groups.google.com/groups/opt_out .
 
 

--
Stéphane RIOS - +33 6 30 26 44 80 - @fasterize - skype:stephane_rios
CEO fasterize.com
Make It Fast, Keep It Fast

[Julien Wajsberg]

2013/3/22 Stephane RIOS <s...@fasterize.com>

Flushing the Document Early

=> tjrs vrai

Simplifying CSS Selectors

=> j'y ai jamais cru, ce ne sont pas les navigateurs modernes, même mobiles qui vont changer mon opinion. Ce qui compte c'est la complexité du DOM (profondeur et nombre d'éléments)

ça c'est quand on doit gagner 10ms sur une page qui se charge déjà en moins d'une seconde ;-)

attention tout de même: les smartphones bas de gamme n'ont pas les perfs de ceux que vous possédez. Et beaucoup de gens ont des smartphones bas de gamme.

 

Bon, ça reste négligeable dans la plupart des cas mais un abus de CSS pourris doit quand même avoir un impact non négligeable. Et notamment quand il y a un gros arbre DOM, là-dessus je suis évidemment d'accord.

--

Julien

[Thomas Bassetto]

Merci beaucoup pour vos retours :)
--
Thomas


2013/3/22 Stephane RIOS <s...@fasterize.com>:

[Eric Daspet]

Je vais jouer aussi.

De manière générale :

* Les règles ne feront pas (trop) de mal donc tu peux les suivre et
rester en zone de sûreté
* Mais ne seront pas toujours utiles, voires sont discutables
* Certaines ne sont pas faites pour être appliquées telles quelles
(pas neuf, mais parfois on manquait un peu de recul à l'époque)
* Le ROI des différentes techniques (et donc l'importance à leur
donner ou leur priorité) a lui totalement changé

Celles qu'on peut remettre en cause :

* sharding sur plusieurs domaines : la recommandation passée de 4
domaines est désormais exagérée, et garder un seul domaine n'est plus
une abération (mais si tu as beaucoup d'images de contenu ça a
toujours du sens des les séparer)

* Scripts at bottom : préférer les chargements asynchrones qui sont
désormais beaucoup plus complets

* L'asynchrone pour les JS (toujours vrai mais les techniques ont
changé, et les navigateurs aussi, pour pas mal de pages "ne rien faire
et laisser les balises classiques en haut" est parfois la meilleure
optimisation)


Par contre de nombreuses techniques étaient très présentées comme des
absolues, et méritent plus de recul.

--
Éric Daspet
http://eric.daspet.name/

[Thomas Bassetto]

Merci pour le complément. J'ai vu entre temps qu'il avait aussi sortit
http://www.phpied.com/web-performance-daybook-vol-2/, qui semble être
une compilation d'articles du Calendar Web Perf < 2012.
--
Thomas


2013/3/23 Eric Daspet <eric....@survol.fr>:

[Stephane RIOS]

Pour ceux qui ne l'auraient pas encore vu, une prez d'Ilya Grigorik sur les perfs des sites mobiles

https://docs.google.com/presentation/d/1qbqqcfjz3YwocRZu2led3CzhjHjcTvvQVSYET0QYyL4/mobilepresent?pli=1#slide=id.p19



Le 24/03/13 21:31, Thomas Bassetto a écrit :