Conseils de Page Speed et Yslow non compris

Bonjour,

Tout d'abord, je n'ai pas su placer ce sujet dans un forum précis...
J'ai consulté Google Page Speed et Yslow, et il y a quelques indications que je n'ai pas compris.
J'utilise Page Speed et GTmetrix ( http://gtmetrix.com ) qui me donne pour Yslow aussi.

Ce que je ne comprends pas :

1) Dans GTmetrix, il me dit pour Page Speed : "Parallelize downloads across hostnames"...
Description du problème : This page makes 45 parallelizable requests to (mon site). Increase download parallelization by distributing these requests across multiple hostnames:
Puis il me donne la liste des 45 éléments (principalement des PNG, ma favicon, 2 js externes et une css.

2) Use efficient CSS selectors. Exemple dans toute la liste qu'il me donne :

Very inefficient rules (good to fix on any page):
#menu-top li ul li a Tag key with 4 descendant selectors

Ça veut dire que je peux simplifier ce li ul li a ?

3) Use a Content Delivery Network (CDN)
Description : There are 52 static components that are not on CDN.

Il me redonne une liste des png, js et css...

4) Use cookie-free domains
There are 43 components that are not cookie-free
>> Serve static content from a different domain to avoid unnecessary cookie traffic

Avec une liste semblable toujours...

5) Make fewer HTTP requests
This page has 7 external Javascript scripts. Try combining them into one.
This page has 3 external stylesheets. Try combining them into one
>> Reduce HTTP requests through combined files and CSS sprites

J'ai déjà suivi les trucs de base, mon problème c'est pas vraiment d'avoir la meilleure note possible, mais surtout d'apprendre ce que veulent dire ces indications, que j'en sache un peu plus sur la façon dont un site web est chargé, et comment on gère tout ça =)

Merci à vous =)

Salut,

Ce qui t'est dit c'est simplement de réduire les requêtes côté server pour améliorer le temps de chargement des pages. Multiplier les images de background, les scripts, les feuilles de style, etc... nuit à la performance générale.

Pour les sprites: http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html

Mmmh, je lis en début de page

a écrit :
Le temps des onmouseover [...] est définitivement révolu

Ça veut dire que tu me dis de remplacer mon rollover en JQuery par ce système de sprites CSS combiné à un transition (pour avoir l'effet qui dure 1s) pour alléger la page ?

Merci de tes réponses =)

Je te dis simplement ce que yslow t'indique après il faut relativiser les outils, yslow te donne des chiffres, tu n'es pas obligé de les prendre au pied de la lettre en revanche l'article Alsa est plutôt bien fait mais si tu regardes le niveau de difficulté, il faut s'y connaître un minimum.

Quand je dis relativiser, je veux dire qu'il faut évaluer le rapport entre le temps que tu vas passer à optimiser et le gain réel pour toi.

Ah non mais ça c'est sûr ^^ je fais le juste milieu entre la bonne expérience utilisateur et le temps que je vais passer dessus et tout.

Mais sur ce tuto et ce que tu m'as dit, j'ai bien compris ? Les sprites, c'est quoi en gros, une technique CSS qui remplace le onmouseover ?

Si c'est ça, tu me disais : "au lieu d'utiliser ton js par exemple, qui permet un rollover sur une durée de 400ms et qui envoie des requêtes, utilise CSS3 avec cette technique des sprites" ?
Modifié par LightBen (01 Jan 2012 - 17:56)

Les sprites servent à se passer de javascript pour utiliser html et css à la place, typiquement c'est pour des effets de hover sans le clignotement un peu pénible.

Cela dit je ne fais que t'expliquer la technique, moi-même je ne l'utilise pas parce que c'est pas très souple si jamais il te prend l'envie de changer une seule image, faut tout refaire

Si tu veux vraiment pousser dans cette voie l'article donne le lien vers le sprite generator, cela peut te faire gagner du temps.

Pour l'instant je laisse comme ça, car 1) flemme et 2) IE... même sur IE9 le CSS3 transition passe pas...

Mais est-ce que dans l'absolu quelque chose comme ça serait possible :

Situation actuelle : JS.

Situation souhaitée :
1) un sprite sur chaque image de la page d'accueil (donc 6 au lieu de 12).
2) le sprite se charge de modifier le margin-top instantanément
3) un effet de transition sur opacity comme ça au final :
Le background du rollover prend instantanément la place de l'image originale MAIS son apparition se fait petit à petit (400ms par exemple), et donc au final, même résultat qu'avant en JS, mais en CSS3 =)

Edit : On s'est écarté du sujet, mais... un transition sur l'opacity d'une image, ça marche ou pas ?
Modifié par LightBen (01 Jan 2012 - 18:34)

Ouf, il y a beaucoup à dire... Mais pour faire relativement simple et rapide:

LightBen a écrit :


1) "Parallelize downloads across hostnames"...

Les navigateurs ont une limite de requêtes qu'ils peuvent envoyer sur la même adresse. Par exemple, si ton navigateur a une limite (fictive) de 30 requêtes simultanées sur une adresse et qu'il doit télécharger 45 fichiers pour afficher ton site, alors il téléchargera les 30 premières ressources et attendra leur arrivée pour lancer les 15 dernière ressources. Cela sera plus long que s'il peut télécharger les 45 ressources du même coups car elles proviennent de diverses URL.

Une URL différente peut simplement être un sous domaine, par exemple : static.tonsite.com

LightBen a écrit :


2) Use efficient CSS selectors. Exemple dans toute la liste qu'il me donne :

Idéalement il faut utiliser au plus 2 sections par sélecteur (genre: ".menu a" ou "ul li"), préférez les classes ou les id par dessus un sélecteur seul (même si on écrit "#menu a" car le navigateur lit les sélecteur à l'envers. Il cherchera tous les "a" et filtrera ensuite ceux contenus dans "#menu")

Mais, c'est d'une importance assez faible en terme de performance. Ne te casse pas trop la tête.

LightBen a écrit :


3) Use a Content Delivery Network (CDN)

Un CDN est un "Content Delivery Network", mais c'est un service avancé pour des sites assez gros - et c'est générallement payant. Tu peux rechercher sur le sujet si ça t'intéresse, mais dans 90% des cas tu peux ne pas t'en faire avec ça.

LightBen a écrit :

4) Use cookie-free domains

Avec chaque requête, la navigateur envoie les cookies liés au domaine recevant la requête. Si tu sers tous tes fichiers statiques (css, js, images, fonts, etc) à partir d'un domaine différent n'utilisant pas de cookie, tu sauveras légèrement sur la taille des requêtes au serveur. Ceci va de pair avec le point 1 et se règle de la même manière.

LightBen a écrit :

5) Make fewer HTTP requests

En gros ça veut dire de n'envoyer qu'un seul fichier .js et un seul fichier .css. Ça fait moins de requêtes au serveur donc un site qui load plus rapidement.

On en parlait un peu sur le blog de Raphaël Goetter:
http://blog.goetter.fr/post/15024485059/requetes-parallelisation-et-mobiles

Waw ben merci Vaxilart pour ta réponse =D

Donc en gros, j'ai pas trop à m'en faire pour tout, et je verrai pour des sites éventuellement plus gros disposant de plus de ressources, sous domaines etc

PS : je kiffe ton site Vaxilart par contre en bas tu as mis "emploie" au lieu de "emploi" (je ne suis pas en recherche...)

Et quand je vois les polices de ton site et de celle du blog de Raphaël Goetter, il y a un article sur les tendances de police ? Que je m'y fasse un peu... j'entends des polémiques parfois (Comic sans MS), je rencontre les problèmes d'affichage (donc Verdana, Arial etc), je découvre les polices de plus en plus utilisées actuellement (Century Gothic par exemple)... Si vous avez un lien, j'suis preneur.

PS2 : votre débat est kiffant... (j'aime le verbe kiffer ça va ). Vivement que j'en apprenne encore plus pour pouvoir y participer =)

Merci à toi !

Niveau police... Je n'y connais pas grand chose; autant dire que je ne suis malheureusement pas graphiste dans l'âme.

Cela dit, il y avait une conférence intéressante à ce sujet lors de Paris web 2010:

http://www.dailymotion.com/video/xfpaqk_la-typographie-comme-outil-de-design-david-rault_tech