Mod Pagespeed

15 réponses

Auteur	Message
allogarage \| Modérateur Inscrit le : 14/10/2008	# Le 04/11/2010 à 08:49 L'équipe Google Speed vient de sortir un nouveau module pour apache qui permet d'automatiser l'optimisation du rendu des pages web : http://code.google.com/intl/fr/speed/page-speed/do... Pour ceux que ca intéresse, voici ce que fait principalement ce module (chaque filtre est désactivable, et l'on peut créer ses propres filtres) : - mesure du temps de chargement via un code js : on peut ainsi connaître les temps de chargement réels sur les navigateurs des visiteurs (inutile si on utilise Jiffy). - concaténation des fichiers CSS et ajout d'un entête d'expiration - ajout d'entête d'expiration pour les fichiers spécifiés (images, CSS, JS) pour améliorer la mise en cache. - minification du code javascript (pour l'instant l'algorithme utilisé est proche de JSMin, mais on peut imaginer que l'équipe Google redéveloppe le moteur de YUI compressor par la suite). - compression des images PNG et JPG à la volée, et ajoute les attributs height et width à tous les tags img (permet d'accélérer le rendu de la page). Autres petites améliorations: - supprimer les espaces multiples dans le code source, les quotes des attributs ainsi que les commentaires HTML - supprimer les attributs par défaut dans les tags HTML - copie des petits fichiers javascript directement dans le code source de la page (évite des requêtes supplémentaires). - copie des petites images directement dans le code source de la page (évite des requêtes supplémentaires - inline images). Je suis impressionné par la qualité du module et les améliorations apportées, il y a un énorme gain de temps pour les visiteurs, ce qui peut améliorer à la fois la navigation et le référencement. Par contre il ne faut pas croire que ces optimisations sont gratuites, elles prennent un certain temps côté serveur (plusieurs passes sont nécessaires pour analyser/parser/modifier les fichiers/requêtes). A mon avis cette solution est idéale pour les novices qui veulent accélérer leur site rapidement, ainsi que les nouveaux sites. Pour les autres qui avaient déjà commencer à optimiser, ce n'est pas nécessaire. Selon l'article Go Daddy pourrait activer le module pour les sites qu'il héberge, donc pourquoi pas demain les autres hébergeurs français, OVH en tête ? Guide comparatif des garages automobiles \| Guide comparatif des garages moto \| Annuaire auto moto
Bool \| Olivier Modérateur Inscrit le : 09/05/2005	# Le 04/11/2010 à 09:07 C'est vrai qu'avec un bon système de cache derrière (varnish), les résultats peuvent être très sympa. Maintenant j'ose espérer que le résultat reste bien en dessous de ce que ferait un "expert" en la matière. D'ailleurs la société ZeroLoad et quelques partenaires organisent un concours à ce sujet : http://webperf-contest.com/ Pour ce qui est de la ré-écriture d'un truc type YUI compressor, c'est pas chose facile quand même, même si je suppose que Chromium/V8 a déjà un excellent parseur JS qui serait réutilisable. En tous cas mon code maison fait de son mieux, mais est loin d'arriver aux résultats de YUI. daevel : infogérance et conseil \|\| moi
allogarage \| Nicolas Modérateur Inscrit le : 14/10/2008	# Le 04/11/2010 à 09:30 Pour les résultats, je pense qu'il manque 20% par rapport à une page optimisée par un expert, pas plus. Sinon pourquoi ne pas avoir déjà intégré JSMin? Pour YUI je l'utilise au moment du déploiement. Merci pour le concours, je ne l'avais pas vu passé Je vais tester ca Guide comparatif des garages automobiles \| Guide comparatif des garages moto \| Annuaire auto moto
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 04/11/2010 à 11:02 allogarage a dit : - copie des petites images directement dans le code source de la page (évite des requêtes supplémentaires - inline images). A ce propos, j'ai fais récemment le test pour des images de très petite dimension, ce qui faisait beaucoup moins de hit, et le texte généré est très court. Par contre, avec l'outil de dev de chrome, il me met une ligne de téléchargement des fichiers que j'ai mis inline y compris lorsque ceux-ci sont déjà chargés (les images étant dans le fichier CSS). Du coup j'ai fais marche arrière, sans compter que les benchs que j'ai trouvé sont plutôt très dubitatif sur la rapidité de cette méthode. En gros ils incitent à utiliser cette méthode en cas de soucis de hit (mais avec le sprite ... on peut facilement résoudre ce problème il me semble). J'avais utilisé base64 (je précise), comme GG news d'après plusieurs blogs. Est-ce que je me suis planté quelque part ?
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 04/11/2010 à 11:07 Bool a dit : D'ailleurs la société ZeroLoad et quelques partenaires organisent un concours à ce sujet : http://webperf-contest.com/ J'ai vu ça oui, j'ai envoyé une 10aine de questions par email, mais à priori ils ne répondent pas. Le règlement me parait un peu vague par rapport à la page de la fnac pour savoir ce qu'on peut faire ou non. Ceci étant, ça doit être très instructif de voir ce que les autres vont faire. Peut-etre de nouvelles techniques à découvrir en tout cas. J'hésite à y participer (il y a quand même pas mal de taf, tout redecoupé, refaire le JS sans jQuery de toute la page, idem pour le CSS).
mirage \| Vincent Modérateur Inscrit le : 04/05/2005	# Le 04/11/2010 à 11:45 tonguide a dit : Bool a dit : D'ailleurs la société ZeroLoad et quelques partenaires organisent un concours à ce sujet : http://webperf-contest.com/ J'ai vu ça oui, j'ai envoyé une 10aine de questions par email, mais à priori ils ne répondent pas. Le règlement me parait un peu vague par rapport à la page de la fnac pour savoir ce qu'on peut faire ou non. Ceci étant, ça doit être très instructif de voir ce que les autres vont faire. Peut-etre de nouvelles techniques à découvrir en tout cas. J'hésite à y participer (il y a quand même pas mal de taf, tout redecoupé, refaire le JS sans jQuery de toute la page, idem pour le CSS). Rien n'empêche de participer en groupe en tout cas NB : Un des partenaires est mon employeur mais je n'ai pas plus d'infos (on ne fait pas parti du jury, on fait juste du sponsoring)
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 04/11/2010 à 12:03 Vi j'ai lu mais comme ils disent, on le coupe en 2 l'ipad ? Enfin l'intéressant pour nous qui sommes contraint d'être polyvalent, c'est justement de tout faire
Bool \| Olivier Modérateur Inscrit le : 09/05/2005	# Le 04/11/2010 à 13:45 et l'organisateur est sur WWC daevel : infogérance et conseil \|\| moi
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 04/11/2010 à 13:55 C'est dommage ça, il y a bcp bcp de beau monde sur WWC, mais ils ne parlent pour ainsi dire pas. Peut-être à cause du côté historique de l'affiliation sur WWC qui n'intéresse pas tout le monde.
toutgagner \| Olivier Modérateur Inscrit le : 09/05/2005	# Le 04/11/2010 à 19:42 A propos de concours de dev... là y'a des beaux lots : http://www.samsung.com/fr/smarttvchallenge/ Si vous avez la flemme de lire, résumé ici : http://toutgagner.com/tous-les-concours/Samsung.ht... Jeux-concours La Bible du voyageur malin Voyages discount New job : Attaché parlementaire
Geo 113 \| Geoffrey Modérateur Inscrit le : 04/05/2005	# Le 05/11/2010 à 00:45 tonguide a dit : C'est dommage ça, il y a bcp bcp de beau monde sur WWC, mais ils ne parlent pour ainsi dire pas. Peut-être à cause du côté historique de l'affiliation sur WWC qui n'intéresse pas tout le monde. il y a déjà ca, et le fait que les nouveaux se font généralement aboyer dessus Cosmix Rendez imprévisible l'Economie; Mentez aux sondages
vvoyer \| Vincent Membre Inscrit le : 28/06/2010	# Le 05/11/2010 à 10:25 Bonjour, pour ma part si je ne participe pas souvent au forum (jamais?) c'est que je n'en ai vraiment pas l'habitude. Je ne saurai même pas sur quel sujet intervenir!
allogarage \| Nicolas Modérateur Inscrit le : 14/10/2008	# Le 05/11/2010 à 15:07 vvoyer a dit : Bonjour, pour ma part si je ne participe pas souvent au forum (jamais?) c'est que je n'en ai vraiment pas l'habitude. Je ne saurai même pas sur quel sujet intervenir! J'imagine que vu votre expertise en matière d'optimisation frontend, vous avez surement beaucoup de choses à partager! Guide comparatif des garages automobiles \| Guide comparatif des garages moto \| Annuaire auto moto
simpleentrepreneur \| Stéphane Membre Inscrit le : 30/10/2010	# Le 05/11/2010 à 15:09 allogarage a dit : Pour YUI je l'utilise au moment du déploiement. Tu génères les fichiers compressés en utilisant YUI au travers d'un outil comme Ant ? Ou procèdes-tu différemment ? Gary Coupon : Moteur de recherche de promotions (codes de réduction, livraisons gratuites, offres spéciales, ...) http://www.garycoupon.com
allogarage \| Nicolas Modérateur Inscrit le : 14/10/2008	# Le 05/11/2010 à 15:17 simpleentrepreneur a dit : allogarage a dit : Pour YUI je l'utilise au moment du déploiement. Tu génères les fichiers compressés en utilisant YUI au travers d'un outil comme Ant ? Ou procèdes-tu différemment ? Salut Thomas! Je ne savais pas que tu étais membre de WWC! Pour répondre à ta question c'est exactement ca, c'est un script ant qui concatène JS et CSS, les compresse et les renomme (pour la mise en cache). L'outil se charge de générer aussi les sprites CSS ( http://csssprites.org/ ). Guide comparatif des garages automobiles \| Guide comparatif des garages moto \| Annuaire auto moto
tonguide \| Jeremy Modérateur Inscrit le : 09/05/2005	# Le 19/12/2010 à 20:31 Pour information, le concours est terminé, vous avez le classement ici : http://webperf-contest.com/leaderboard-fr.html Et quelques idées sympas

Auteur

Message

Inscrit le : 14/10/2008

# Le 04/11/2010 à 08:49

L'équipe Google Speed vient de sortir un nouveau module pour apache qui permet d'automatiser l'optimisation du rendu des pages web :
http://code.google.com/intl/fr/speed/page-speed/do...

Pour ceux que ca intéresse, voici ce que fait principalement ce module (chaque filtre est désactivable, et l'on peut créer ses propres filtres) :
- mesure du temps de chargement via un code js : on peut ainsi connaître les temps de chargement réels sur les navigateurs des visiteurs (inutile si on utilise Jiffy).
- concaténation des fichiers CSS et ajout d'un entête d'expiration
- ajout d'entête d'expiration pour les fichiers spécifiés (images, CSS, JS) pour améliorer la mise en cache.
- minification du code javascript (pour l'instant l'algorithme utilisé est proche de JSMin, mais on peut imaginer que l'équipe Google redéveloppe le moteur de YUI compressor par la suite).
- compression des images PNG et JPG à la volée, et ajoute les attributs height et width à tous les tags img (permet d'accélérer le rendu de la page).

Autres petites améliorations:
- supprimer les espaces multiples dans le code source, les quotes des attributs ainsi que les commentaires HTML
- supprimer les attributs par défaut dans les tags HTML
- copie des petits fichiers javascript directement dans le code source de la page (évite des requêtes supplémentaires).
- copie des petites images directement dans le code source de la page (évite des requêtes supplémentaires - inline images).

Je suis impressionné par la qualité du module et les améliorations apportées, il y a un énorme gain de temps pour les visiteurs, ce qui peut améliorer à la fois la navigation et le référencement. Par contre il ne faut pas croire que ces optimisations sont gratuites, elles prennent un certain temps côté serveur (plusieurs passes sont nécessaires pour analyser/parser/modifier les fichiers/requêtes). A mon avis cette solution est idéale pour les novices qui veulent accélérer leur site rapidement, ainsi que les nouveaux sites. Pour les autres qui avaient déjà commencer à optimiser, ce n'est pas nécessaire. Selon l'article Go Daddy pourrait activer le module pour les sites qu'il héberge, donc pourquoi pas demain les autres hébergeurs français, OVH en tête ?

Guide comparatif des garages automobiles | Guide comparatif des garages moto | Annuaire auto moto

Bool | Olivier
Modérateur

Inscrit le : 09/05/2005

# Le 04/11/2010 à 09:07

C'est vrai qu'avec un bon système de cache derrière (varnish), les résultats peuvent être très sympa.
Maintenant j'ose espérer que le résultat reste bien en dessous de ce que ferait un "expert" en la matière.

D'ailleurs la société ZeroLoad et quelques partenaires organisent un concours à ce sujet : http://webperf-contest.com/

Pour ce qui est de la ré-écriture d'un truc type YUI compressor, c'est pas chose facile quand même, même si je suppose que Chromium/V8 a déjà un excellent parseur JS qui serait réutilisable. En tous cas mon code maison fait de son mieux, mais est loin d'arriver aux résultats de YUI.

daevel : infogérance et conseil || moi

allogarage | Nicolas
Modérateur

Inscrit le : 14/10/2008

# Le 04/11/2010 à 09:30

Pour les résultats, je pense qu'il manque 20% par rapport à une page optimisée par un expert, pas plus.
Sinon pourquoi ne pas avoir déjà intégré JSMin? Pour YUI je l'utilise au moment du déploiement.

Merci pour le concours, je ne l'avais pas vu passé Je vais tester ca

Guide comparatif des garages automobiles | Guide comparatif des garages moto | Annuaire auto moto

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 04/11/2010 à 11:02

allogarage a dit :
- copie des petites images directement dans le code source de la page (évite des requêtes supplémentaires - inline images).

A ce propos, j'ai fais récemment le test pour des images de très petite dimension, ce qui faisait beaucoup moins de hit, et le texte généré est très court.
Par contre, avec l'outil de dev de chrome, il me met une ligne de téléchargement des fichiers que j'ai mis inline y compris lorsque ceux-ci sont déjà chargés (les images étant dans le fichier CSS). Du coup j'ai fais marche arrière, sans compter que les benchs que j'ai trouvé sont plutôt très dubitatif sur la rapidité de cette méthode. En gros ils incitent à utiliser cette méthode en cas de soucis de hit (mais avec le sprite ... on peut facilement résoudre ce problème il me semble).

J'avais utilisé base64 (je précise), comme GG news d'après plusieurs blogs. Est-ce que je me suis planté quelque part ?

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 04/11/2010 à 11:07

Bool a dit :
D'ailleurs la société ZeroLoad et quelques partenaires organisent un concours à ce sujet : http://webperf-contest.com/

J'ai vu ça oui, j'ai envoyé une 10aine de questions par email, mais à priori ils ne répondent pas. Le règlement me parait un peu vague par rapport à la page de la fnac pour savoir ce qu'on peut faire ou non.

Ceci étant, ça doit être très instructif de voir ce que les autres vont faire. Peut-etre de nouvelles techniques à découvrir en tout cas. J'hésite à y participer (il y a quand même pas mal de taf, tout redecoupé, refaire le JS sans jQuery de toute la page, idem pour le CSS).

mirage | Vincent
Modérateur

Inscrit le : 04/05/2005

# Le 04/11/2010 à 11:45

tonguide a dit :

Bool a dit :
D'ailleurs la société ZeroLoad et quelques partenaires organisent un concours à ce sujet : http://webperf-contest.com/

Rien n'empêche de participer en groupe en tout cas

NB : Un des partenaires est mon employeur mais je n'ai pas plus d'infos (on ne fait pas parti du jury, on fait juste du sponsoring)

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 04/11/2010 à 12:03

Vi j'ai lu mais comme ils disent, on le coupe en 2 l'ipad ?
Enfin l'intéressant pour nous qui sommes contraint d'être polyvalent, c'est justement de tout faire

Bool | Olivier
Modérateur

Inscrit le : 09/05/2005

# Le 04/11/2010 à 13:45

et l'organisateur est sur WWC

daevel : infogérance et conseil || moi

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 04/11/2010 à 13:55

C'est dommage ça, il y a bcp bcp de beau monde sur WWC, mais ils ne parlent pour ainsi dire pas.
Peut-être à cause du côté historique de l'affiliation sur WWC qui n'intéresse pas tout le monde.

toutgagner | Olivier
Modérateur

Inscrit le : 09/05/2005

# Le 04/11/2010 à 19:42

A propos de concours de dev... là y'a des beaux lots :
http://www.samsung.com/fr/smarttvchallenge/

Si vous avez la flemme de lire, résumé ici :
http://toutgagner.com/tous-les-concours/Samsung.ht...

Jeux-concours
La Bible du voyageur malin
Voyages discount
New job : Attaché parlementaire

Geo 113 | Geoffrey
Modérateur

Inscrit le : 04/05/2005

# Le 05/11/2010 à 00:45

tonguide a dit :
C'est dommage ça, il y a bcp bcp de beau monde sur WWC, mais ils ne parlent pour ainsi dire pas.
Peut-être à cause du côté historique de l'affiliation sur WWC qui n'intéresse pas tout le monde.

il y a déjà ca, et le fait que les nouveaux se font généralement aboyer dessus

Cosmix
Rendez imprévisible l'Economie; Mentez aux sondages

vvoyer | Vincent
Membre

Inscrit le : 28/06/2010

# Le 05/11/2010 à 10:25

Bonjour, pour ma part si je ne participe pas souvent au forum (jamais?) c'est que je n'en ai vraiment pas l'habitude.

Je ne saurai même pas sur quel sujet intervenir!

allogarage | Nicolas
Modérateur

Inscrit le : 14/10/2008

# Le 05/11/2010 à 15:07

vvoyer a dit :
Bonjour, pour ma part si je ne participe pas souvent au forum (jamais?) c'est que je n'en ai vraiment pas l'habitude.

Je ne saurai même pas sur quel sujet intervenir!

J'imagine que vu votre expertise en matière d'optimisation frontend, vous avez surement beaucoup de choses à partager!

Guide comparatif des garages automobiles | Guide comparatif des garages moto | Annuaire auto moto

simpleentrepreneur | Stéphane
Membre

Inscrit le : 30/10/2010

# Le 05/11/2010 à 15:09

allogarage a dit :
Pour YUI je l'utilise au moment du déploiement.

Tu génères les fichiers compressés en utilisant YUI au travers d'un outil comme Ant ? Ou procèdes-tu différemment ?

Gary Coupon : Moteur de recherche de promotions (codes de réduction, livraisons gratuites, offres spéciales, ...)
http://www.garycoupon.com

allogarage | Nicolas
Modérateur

Inscrit le : 14/10/2008

# Le 05/11/2010 à 15:17

simpleentrepreneur a dit :

allogarage a dit :
Pour YUI je l'utilise au moment du déploiement.

Tu génères les fichiers compressés en utilisant YUI au travers d'un outil comme Ant ? Ou procèdes-tu différemment ?

Salut Thomas!
Je ne savais pas que tu étais membre de WWC!
Pour répondre à ta question c'est exactement ca, c'est un script ant qui concatène JS et CSS, les compresse et les renomme (pour la mise en cache). L'outil se charge de générer aussi les sprites CSS ( http://csssprites.org/

Guide comparatif des garages automobiles | Guide comparatif des garages moto | Annuaire auto moto

tonguide | Jeremy
Modérateur

Inscrit le : 09/05/2005

# Le 19/12/2010 à 20:31

Pour information, le concours est terminé, vous avez le classement ici : http://webperf-contest.com/leaderboard-fr.html
Et quelques idées sympas

Répondre

Vous ne pouvez pas participer au forum, car votre inscription n'a pas été validée. Pour vous faire valider en tant que Membre, cliquez ici.