[Page Speed] optimisation des images des scripts des css

[fanfl]

Bonjour,

je suis en phase d'amélioration de mon site car j'ai vu sur GWT que j'avais des prob de perf.
Avec Page Speed (note de 85/100), j'ai identifié un certain nombre de points d'amélioration facile.
Et ces sites m'aideront :
http://www.deldie.net/blog/optimiser-temps-de-chargement-de-son-site
http://newtipsandtricks.com/using-firebug-and-google-page-speed-to-opt ... ur-website

J'ai quelques questions sur les :
images
Page Speed me préconise de préciser leurs largeurs et hauteurs. Cela veut-il dire que je dois faire :

Code: Tout sélectionner

<img src="majpeg.jpg" [b]width="100px" height="100px"[/b] alt="blabla" />

Ma question me semble idiote mais il me semblait qu'il fallait définir ce genre d'attribut plutôt dans le CSS. Simplement en CSS, c'est injouable puisque chaque image est différente en dimension.

De plus, à part générer ces attributs dynamiquement dans le php...
Bref, je me demande si ce n'est pas beaucoup de travail pour pas grand chose.

script et css
Jusqu'à maintenant, j'ai quelques fichiers CSS/JS différent pour des raisons de rangement. J'ai par exemple des CSS génériques (valable quelque soit le site) et une autre typiquement dédié au site. Idem pour les JS.
P S me conseille de les fusionner et de les compresser. La compression je comprends parfaitement, mais la fusion ? Est-ce vraiment la peine de sacrifier son "rangement" pour une optimisation de ce genre ?

J'ai également mon CSS principal créer à la volée et nommé css.css.php. Il ne semble pas caché. Me conseillez-vous de le renommer en css.css et de le générer avant de le publier ?

mise en cache
Les sites ci-dessus et http://code.google.com/intl/fr/speed/page-speed/docs/caching.html#Leve ... serCaching me proposent d'activer GZIP mais surtout de modifier les paramètres de mise en cache.
J'avoue que j'hésite énormément. Je peux pour mon CSS le gérer pour utiliser la technique du fingerprint (car il change régulièrement) mais pour le reste...
Si je cache un JS ou autre, je suis contraint d'appliquer cette technique à chaque modif, ça me semble très lourd.

Voila, j'en ai fini avec mes questions, désolé pour ce post fleuve mais j'espère que ça en intéressera plus d'un(e)

Cordialement
Je peux

[SpeedAirMan]

Ma question me semble idiote mais il me semblait qu'il fallait définir ce genre d'attribut plutôt dans le CSS. Simplement en CSS, c'est injouable puisque chaque image est différente en dimension.

Il faut en effet spécifier la largeur et la hauteur de chaque image dans le code HTML.
Le fichier HTML est l'élément qui est chargé en premier. Comme précisé dans l'article : "Il est également utile de spécifier la longueur et la largeur de chaque image pour que le navigateur réserve la place nécessaire à chaque image et n’ait pas à déplacer le contenu après coup."
En fait (et en +), si tu ne spécifie pas les dimensions, le navigateur va devoir les calculer lui même, ce qui nécessite des ressources processeur.

P S me conseille de les fusionner et de les compresser. La compression je comprends parfaitement, mais la fusion ? Est-ce vraiment la peine de sacrifier son "rangement" pour une optimisation de ce genre ?

"Sacrifier ton rangement"... hmm...
Dis toi que tes visiteurs pâtissent de ton "rangement", à chaque chargement (enfin, pas exactement puisqu'il y'a la mise en cache, donc disons à chaque visite).
D'une manière générale (ou : "le plus souvent" - ce n'est pas systématiquement le cas), 1 seul fichier à charger est + rapide que plusieurs fichiers à charger (à tailles totales égales).
Tu peux très bien organiser tes fichiers différemment, ou utiliser des scripts qui vont se charger de générer le fichier final (qui contiendra l'ensemble de tes fichiers css et qui les compressera - idem pour JavaScript), mais, effectivement, si tu cherches à améliorer le chargement de tes pages, il vaut mieux un seul fichier css et un seul fichier js.

Mise en cache[...]

J'suis pas sûr d'avoir tout compris (et la flemme de faire une recherche à cette heure ci, je l'avoue)...
Cependant je pense à une astuce qui pourra peut être t'aider : à chaque modif' de ton fichier css ou de ton fichier js, tu peux modifier l'adresse de celui ci, et donc faire en sorte que tes visiteurs (qui l'ont déjà en cache) rechargent le fichier.
Ex: <link rel="stylesheet" href="http://example.com/style.css?v=11012011" type="text/css" media="screen" />
Dans cet exemple, la partie "?v=11012011" sera à changer à chaque fois que tu feras une modif' sur ton fichier css.

[fanfl]

Merci beaucoup SpeedAirMan pour ta réponse complète et détaillée.

Je peux parfaitement faire ce que tu as dit dans la partie "rangement", c'est juste une question de temps.

Pour le cache, oui, ce que tu propose est d'une certaine manière la technique du fingerprint présentée dans la rubrique d'aide Google que j'ai mis en lien.

Merci pour ton temps, à moi de jouer

Bonne journée

[anemone-clown]

Bonjour,

pour les regroupements de fichiers, c'est en fait très important, surtout si tu as un serveur dynamique (99,9% des cas) car, à chaque lecture de fichier, il y a un entête avec cookie qui est envoyé, soit environ 1,5 kio à chaque fichier; de plus, ce sont des accès disques qui ralentissent automatiquement.

Si tu regroupes tous tes fichiers de même nature (css ensembles et js ensembles), tu diminues d'autant le nombre d'échanges entre le serveur et le client : tu accélères les processus de chargement de page.

Admettons que tu ais 10 fichiers JS (cas fréquent avec JQuery et quelques options), à chaque fichier, il y a : une demande du client, une réponse entête du serveur, un chargement du fichier, un accusé de bonne réception du client, et un cookie sur les serveurs dynamiques (par opposition d'un serveur statique). Si tu regroupes tes 10 fichiers en 1 seul, que de plus, tu exploites un logiciel pour "minifier" (minify) et ainsi diminuer le poids de ton fichier unique, tu économises beaucoup de ressources.

Sur mon WWW, le PageSpeed doit être de l'ordre de 92-93 sur la page d'accueil (ça dépend des jours d'ailleurs...) et mieux si on passe en "content only". La plupart des ralentissements ne sont pas dû au code, mais aux logiciels externes, en particulier openX pour les pubs et ... Google (7 erreurs sur 10)!!!

J'ai également optimisé un osCommerce et, pour ces deux sites, le rythme de fréquentation de GoogleBot mais aussi de BingBot a augmenté. Ce ne constitue pas une règle, mais c'est probablement un bienfait.

[SpeedAirMan]

Je reviens sur une partie de ton post :

Est-ce vraiment la peine de sacrifier son "rangement" pour une optimisation de ce genre ?

J'ai l'impression que ta question, finalement, revient à demander si "ça vaut le coup" ?

Pour répondre : dis-toi qu'une grande quantité (majorité ?) de sites se passent très bien de ces optimisations.

Cependant il y'a plusieurs avantages à optimiser son site pour le chargement :

• Confort utilisateur : tes visiteurs attendront moins, et apprécieront + la navigation sur ton/tes site(s). "Accessoirement", ça permet d'améliorer la conversion, le nombre de pages vues etc. (d'une manière générale, l'expérience utilisateur)
• Ressources serveur : si tu es sur un hébergement mutualisé, tu pourras y rester + longtemps avant de devoir passer à un dédié

Il y'a également l'aspect SEO/référencement, car Google a annoncé assez récemment qu'il prendrait désormais en compte le temps de chargement des pages (mais à mon avis, ce critère reste encore assez... marginal et ne doit pas peser bien lourd dans la balance).

En bref, tout dépend des ambitions que tu as et de la qualité de l'expérience utilisateur que tu souhaites offrir à tes visiteurs.

[SpeedAirMan]

Si tu regroupes tous tes fichiers de même nature (css ensembles et js ensembles), tu diminues d'autant le nombre d'échanges entre le serveur et le client : tu accélères les processus de chargement de page.

Admettons que tu ais 10 fichiers JS

A noter que Google a proposé un projet / s'est lancé dans le développement d'une solution permettant de "grouper" tous les éléments d'un site (css, js, html et même peut être images, je ne me souviens plus) en 1 seul fichier afin d'accélérer le chargement des sites (je n'ai plus le nom de la solution ni de liens).
Le soucis c'est que les navigateurs ne sont pas prêts.

[fanfl]

Alors un immense merci pour ces conseils.
C'est vraiment extra

J'ai mis tout en place :
- regroupement des JS/CSS dans un js et un css, généré dynamiquement et minifié avec YUCompressor
- activation de la compression GZ dans mon .htaccess

Je suis passé de 82 à 87 sur ma homepage !

Maintenant, page speed me conseille de répartir mes ressources sur d'autres DNS. J'hésite à créer un alias image.monsite.com qui pointe vers mon répertoire image. Qu'en pensez-vous ?

Sur les scripts externes, je fais le mm constat que toi anemone-clown.
Google Ads, Google Analytics, Facebook, et l'ensemble AddThis me pourrissent ma home !
Je vais supprimer AddThis de cet endroit, ça sera déjà ça de pris !

Il faut aussi que j'active le cache. Mais j'y vais à reculons. J'ai peur de devoir changer une images png ou jpg pour une raison X ou Y (ça m'arrive). Et là, avec un gros cache, je suis coincé.
Le problème ne se pose pas pour mon JS et CSS car je peux facilement gérer un "fingerprint" dans le nom du fichier qui fera que le nouveau sera téléchargé à chaque fois.

Merci encore
Cordialement

[anemone-clown]

Je vais supprimer AddThis de cet endroit, ça sera déjà ça de pris !

Perso, j'ai viré Addthis définitivement de partout (et tous mes sites) : trop lent, beaucoup trop lent.

[SpeedAirMan]

Surtout, AddThis, ça sert à quoi ?
Il est possible de proposer les mêmes fonctions en interne, non ?

[Julia41]

Parmis les choses qui ralentissent le plus les sites c'est tout ce qui est script "externe" (addthis, tout ce qui est "bouton facebook/twitter" share, google adsense/analytics).
Pour les Share de facebook, plutôt que d'utiliser les trucs tout fait facebook, recodez-le vous même, pour addthis, même principe (même si leur bouton d'origine est plutôt bien fait).
Pour tes images, qui ont des tailles changeante "automatiquement" tu peux utiliser la fonction php "getimagesize".
Par contre je te conseille de la mettre en cache car elle est assez "longue" (comparé à rien bien entendu).
Pour tes CSS "compressé", tu en fais un qui est "cp-css.cs" qui est celui compressé, toi tu taffs sur le css.css, pareil pour les JS.
Là où tu peux gagner pas mal aussi c'est en compressant tes images (sans pertes), ça peut vite faire gagner pas mal.
L'une des énormes améliorations faisable c'est les sprites CSS (bon par contre ça peut être très chiant à mettre en place).
Là dessus sur un site sur lequel j'ai passé on est passé d'une centaine de requêtes HTTP pour afficher la page d'accueil à une dizaine. Facebook l'utilise très très bien pour les "discussions instantanées".

[fanfl]

Parmis les choses qui ralentissent le plus les sites c'est tout ce qui est script "externe" (addthis, tout ce qui est "bouton facebook/twitter" share, google adsense/analytics).......

Bonjour,
merci pour la réponse.

Je vais mettre mes boutons addthis en interne dès que possible. Pris par le temps j'ai opté pour cette solution mais c'est clairement naze.
Pour facebook, j'ai mis le carroussel de thumb de mes amis facebook. C'est sympa mais non performant ==> ca va finir comme Addthis.

La compression JS et CSS, c'est bon, j'ai fait.
Par contre les sprite CSS ? je ne connais pas. Je vais chercher mais si tu as un lien bien fait, je suis naturellement preneur.
EDIT : pas mis longtemps à trouver.
http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html
Par contre, je ne suis pas trop concerné car peu d'icône du genre.

A propose de getimagesize, je ne comprends pas ton :

"Par contre je te conseille de la mettre en cache car elle est assez "longue" (comparé à rien bien entendu)."

Je resize mes images lors de l'import dans mon administration. Au final elles sont stockées au bon format sur le disque.
Pas de resize en live.

Ce qui m'inquiète c'est que google webmaster tool me dit toujours que mon site est lent. Avec un temps de plus de 6 sec sur la homepage ce qui est pour moi impossible. Surtout avec les optimisations faites. Je vais encore attendre et voir ce qu'il raconte dans quelques jours, quand il aura digéré mes améliorations.

Pour la mise en cache, je ne vais pas l'activer encore. Je vais bcp de modifs, notamment sur les images. Alors si je me retrouve coincé par le cache, ça va être lourd.
Je ne crois pas mais je trouve dommage qu'il n'existe pas une entête HTTP qui dise au navigateur de rafraîchir son cache même si les ressources ne sont pas expirées. Ca permettrait de gérer plus facilement les changements. Mais bon, c'est une autre histoire )

Merci encore
Cordialement

[Julia41]

Je ne crois pas mais je trouve dommage qu'il n'existe pas une entête HTTP qui dise au navigateur de rafraîchir son cache même si les ressources ne sont pas expirées. Ca permettrait de gérer plus facilement les changements. Mais bon, c'est une autre histoire

Je pense que tu parles de Ctrl + R ?

Je resize mes images lors de l'import dans mon administration. Au final elles sont stockées au bon format sur le disque.
Pas de resize en live.

Je ne te parle pas de resize, mais bien de l'affichage du height/width. Par contre cette fonction (getimagesize) demande à PHP de scanner ton image (donc si elle est lourde ça bouffe un peu de la RAM pour récupérer 2 valeurs (en plus des entiers)).
Pour ton import dans ton pannel d'admin, si tu stocks en DB l'URL de tes images, tu peux regarder pour stocker leurs tailles, ça pourrait être pas mal.

Pour facebook, j'ai mis le carroussel de thumb de mes amis facebook. C'est sympa mais non performant ==> ca va finir comme Addthis.

et

Ce qui m'inquiète c'est que google webmaster tool me dit toujours que mon site est lent. Avec un temps de plus de 6 sec sur la homepage ce qui est pour moi impossible. Surtout avec les optimisations faites.

Normal, perso sur mon PC, charger le carousel facebook me prends au moins 2s.
Ce carousel fait appel à une dizaine de javascript hébergés chez facebook (et quelques CSS).
Ca peut se scripter (pas forcément aussi bien) facilement avec la graph API de facebook, donc après une ptite mise en cache html et zou. Après la question est "est-ce que ça apporte réellement quelque chose ?"

Bon courage en tout cas

Pour me la péter (c'est mon www)

En moyenne, les pages de votre site se chargent en 0,6 secondes (dernière mise à jour : 10 janv. 2011). Plus rapide que 97 % des sites

[anemone-clown]

@fanfl : pour les images gérées en CSS, voici un exemple sur mon WWW : -http://www.aqua-portail.com/static/l3.png (en plus, c'est mis sur un site/serveur en static = pas de cookie de transaction). Comme tu peux le constater, c'est assez hétéroclite : des images pour les réseaux sociaux, un bout d'image pour l'inscription, des boutons gauche droite, une loupe, etc...

En fait toutes ces images regroupées en une seule sont facilement exploitables en css avec de simples calculs de positions.

Dans l'image en lien, il y a 12 images exploitées via CCS... un gain énorme.

A noter : malgré l'exploitation d'un site façon CMS (basé sur Xoops au départ), je parviens à un page-speed de 96 en page interne... comme quoi, on peut facilement arriver à quelques résultats, y compris sur un site très étendu.

[fanfl]

Merci à toutes les deux pour ces conseils pertinents

Pour le sprite, je n'ai pas beaucoup d'icônes, donc ça attendra mais sera fait

Pour le refresh des pages : oui CTRL+R mais encore faut-il que le gars sache qu'il faille faire un hard refresh pour avoir la dernière version.

Bonnes idées de mettre les dimensions en base. Effectivement j'utilise getimagesize en live pour récupérer en alimenter mes width/height des tags A. Pas top c'est clair.

Pour facebook, je vais voir. Je ne pense pas conserver ce carrousel. L'intérêt est minime. (mon avis)

0,6 sec : Chapeau !

Bon dimanche

[Julia41]

Pour le refresh des pages : oui CTRL+R mais encore faut-il que le gars sache qu'il faille faire un hard refresh pour avoir la dernière version.

Dans ce cas là tu dois "versionner" tes CSS:
fichier.css?v=100
fichier.css?v=120

Ca on est d'accord, c'est "contraire" à pagespeed, mais ça sert à ça
Tu peux aussi frauder avec un rewrit :
/css/100/fichier.css
/css/120/fichier.css
Sinon, tout simplement le renommer