Importance du poids de la page & vitesse de chargement

benjiman · 26 Août 2010

Bonjour à vous tous,

Comme nous le savons, Google (et certainement d'autres moteurs de recherche) utilise la vitesse de chargement comme un facteur important de classement.

Mais comment est calculée cette vitesse de chargement ?
Est-ce seulement basé sur le temps de chargement de l'HTML pur et des autres fichiers textes ou sur le temps de chargement de tous les élements de la page, y compris les images renseignées dans les fichiers CSS ?

A ce propos, est-ce que rajouter des images dans le CSS sans pour autant les afficher ralentira tout de même le chargement de la page ?
J'en prends pour exemple un CSS qui renseigne 20 classes différentes pour 20 thèmes différents. Au lieu de créer un fichier pour chaque theme, un seul fichier CSS serait chargé (gain de puissance pour le serveur) et contiendrait les 20 thèmes...

Google va t--il prendre en compte ces 20 thèmes comme "chargement de la page" ?
Les utilisateurs devront-ils eux aussi "précharger" ces images ? (ou cela se fera une fois les images à l'écran)

En vous remerciant par avance de votre aide, qui sera certainement très utile pour tous les membres de WRI

raljx · 26 Août 2010

Pour les CSS ou les JS ou toutes les fonctions en général il vaut mieux (quand la structure du site le permet) ne charger que ce qui est necessaire pour la page affichée...

Quelques liens utiles :
http://tools.pingdom.com/
http://www.websiteoptimization.com/services/analyze/
http://developer.yahoo.com/yslow/
http://code.google.com/intl/fr-FR/speed/page-speed/

merde j'ai une madrite aigue :mrgreen:

jeanluc · 26 Août 2010

benjiman a dit:
Comme nous le savons, Google (et certainement d'autres moteurs de recherche) utilise la vitesse de chargement comme un facteur important de classement.

Ce serait plutôt un facteur mineur intervenant dans le classement.

Mais on est évidemment d'accord qu'une page qui se charge plus rapidement est préférable.

Jean-Luc

Leonick · 26 Août 2010

benjiman a dit:
Bonjour à vous tous,

Comme nous le savons, Google (et certainement d'autres moteurs de recherche) utilise la vitesse de chargement comme un facteur important de classement.

comme qui le sait ? pas moi !
Si c'était vrai, les sites en flash et donc youtube et dailymotion ne devraient plus apparaitre dans la 1° page des serp sur certaines requêtes

Bigb06 · 27 Août 2010

Il y a le temps de chargement du fichier html seul à prendre en compte, ainsi que le temps ou l'évènement onload est lancé. Tout ce qui se passe après n'est que de l'enrichissement de page et n'est pas important pour l'utilisateur, et pour les moteurs.

benjiman · 27 Août 2010

Bonjour !

Merci à vous tous pour ces réponses.

Je ne connaissais pas ces liens. Merci pour ces magnifiques outils.

Contrairement à ce que l'on peut penser ... Youtube charge très rapidement. En plus d'utiliser du Css Sprites, Youtube est parfaitement optimisé.
D'ailleurs, les outils préconisés au dessus le montre.
Page Speed : Page Speed Score: 84/100
Y Slow : Grade B
PingDom : Total objects : 25 (579.2 KB)

Cela montre bien qu'un site important (dans le sens "lourd") peut également être rapide à charger.

@bigb06 : on est donc d'accord que placer plusieurs images dans le CSS ne tuera pas la rapidité de la page d'après Google ?

D'ailleurs, savez-vous si l'utilisateur "chargent" toutes les images du CSS, même celles non-affichées ?

raljx · 27 Août 2010

s'il y a beaucoup d'images tu peux utiliser la technique du sprite c'est a dire 1 image contenant des diverses images et, dans ton css tu definis les coordonnées X,Y de chaque images intégrées à ton image de base ...

Djibou_Te@M · 27 Août 2010

Petit conseil supplémentaire et sympa à utiliser, l'add on pour firefox "Yslow".
Il te permet de voir tous les éléments chargés, les conseils d'optimisations de tous les éléments.
https://addons.mozilla.org/en-US/firefox/addon/5369/

Il existe aussi pour Chrome :
http://www.uptodown.com/en/search/yslow-chrome

Si cela peut t'aider :mrgreen:

Il peut voir en direct ce qui se passe sur la page demandée

JanoLapin · 27 Août 2010

raljx a dit:
s'il y a beaucoup d'images tu peux utiliser la technique du sprite c'est a dire 1 image contenant des diverses images et, dans ton css tu definis les coordonnées X,Y de chaque images intégrées à ton image de base ...

l'ennui que je voie à cette technique est qu'une modification de taille d'un des éléments te forçe à revoir la totalité... A moins qu'il n'y ait une technique de sioux à appliquer ?

benjiman · 27 Août 2010

J'utilise personnellement le CSS Sprites.
Le poids de la page est passé de 400 Ko avec la version sans Sprites, à 140 Ko avec Sprites.

néanmoins, je me pose toujours des questions face au référencement par cette technique... plus de "alt" important ici ...

En gérant bien Photoshop (ou un autre logiciel), le Css Sprites est très facile d'utilisation.

Leonick · 27 Août 2010

Bigb06 a dit:
Tout ce qui se passe après n'est que de l'enrichissement de page et n'est pas important pour l'utilisateur

ben bien sûr : quand j'attends 30 secondes que les divers éléments d'un flash d'un site se charge, ça ne me gène absolument pas (voir le nombre de post où les wrinautes ont dit "trop lent ton site, je n'ai pas attendu"). Pareil pour les vidéos.

raljx · 27 Août 2010

benjiman a dit:
J'utilise personnellement le CSS Sprites.
Le poids de la page est passé de 400 Ko avec la version sans Sprites, à 140 Ko avec Sprites.

néanmoins, je me pose toujours des questions face au référencement par cette technique... plus de "alt" important ici ...

En gérant bien Photoshop (ou un autre logiciel), le Css Sprites est très facile d'utilisation.

Les alts ne sont pas réellement utiles lorsque tu affiches des icones (fleches, puces, ...) les photos ou images importantes sont rarement integrées au css ou, dans ce cas, doivent etre chargées individuellement.

Terranovatrek · 20 Janvier 2011

Quelqu'un connaît-il le logiciel HTML Optimizer ? Cette appli compresse le code html en enlevant notamment tous les espaces, les lignes de commentaires (#) dans les scripts, les retours à la ligne, etc, ... et il réduit la taille des jpg et des png.
Je l'ai utilisé, c'est efficace. Il réduit le poids des pages d'environ 30% et l'affichage est donc bien plus rapide. Jusque là super.

Problème, c'est que mes pages disparaissent de Google Analytics et c'est instantané ! J'ai donc tendance à penser que c'est le code GA du bas de page qui n'est plus lu. Mes visites sont depuis des années entre 90 et 110/jour dans GA. Dès que je lance les pages "optimisées" les visites descendent à 15/jour et on ne retrouve plus dans les Pages Vues que quelques pages en anglais qui sont toujours sous un format Golive et que je n'ai pas mises à jour depuis longtemps et donc pas comprises dans mon lot "optimisé".

Google bannit-il ce genre d'optimisation ?
Google ne pourrait-il plus lire mon texte comprimé ? Pour info les metas ne sont pas comprimées et bien lisibles, séparées par ligne. Mais tout le monde sait que c'est le contenu qui est important.
Ou simplement, et heureusement, ce ne serait que le code GA de reconnaissance qui serait altéré ? Mais je n'y vois moi personnellement aucune altération.
Comment trouver la solution et sortir du doute ?

J'ai cherché sur internet des commentaires sur ce logiciel et sur ce problème et je n'ai rien trouvé. Au contraire beaucoup d'utilisateurs lui mette 5 ou 4 étoiles. j'aurai tendance à le faire aussi d'illeurs, s'il n'y avait ce gros problème.

Leonick · 20 Janvier 2011

compresser le html n'a pas d'intérêt, à mon avis, du fait qu'en général, on paramètre le serveur apache pour zipper son contenu.
As-tu vérifié que dans ton html compressé tu trouvais bien les appels aux scripts ga ?

ttlan · 20 Janvier 2011

Bonsoir,

Ce ne serait pas le script GA lui-même qui est considéré comme un commentaire par cet outil d'optimisation qui le virerait (ou, en tout cas, une partie du script GA, pour les navigateurs dont JavaScript est désactivé).

En plus vous utilisez feu "Golive le Regretté". Golive fait parfaitement le nettoyage du code source avant l'upload (option à paramétrer).

Terranovatrek · 25 Janvier 2011

Leonick a dit:
compresser le html n'a pas d'intérêt, à mon avis, du fait qu'en général, on paramètre le serveur apache pour zipper son contenu.
As-tu vérifié que dans ton html compressé tu trouvais bien les appels aux scripts ga ?

Oui, l'appel au script ga est tjs bien là et à la bonne place (juste avant la </body>). Suivant le soft je gagne 30% en poids. J'économise en moyenne entre 15 000 et 30 000 bytes/pages et plus de 8 millions sur l'entièreté du site. Je crois quand même l'html compressé fait gagné de la vitesse dans l'affichage. L'effet visuel est assez flagrant en tous cas pour moi qui connait mon site avant et après.

Leonick · 25 Janvier 2011

d'après ce que j'ai compris, ce logiciel compresse des pages html statiques. Et franchement, des html statiques on n'en utilise quasi plus, sitôt passé la dizaine de pages d'un site qui ne bougera pas ensuite.
Et gagner 15 à 30 Ko, ça veut dire que tes pages sont trop lourdes : déjà, vire toutes les meta, sauf la description
externalise tes js
fais ta mise en page en css et pas avec des <table> et tu verras ton script diminuer à vue d'œil

Terranovatrek · 25 Janvier 2011

ttlan a dit:
Bonsoir,

Ce ne serait pas le script GA lui-même qui est considéré comme un commentaire par cet outil d'optimisation qui le virerait (ou, en tout cas, une partie du script GA, pour les navigateurs dont JavaScript est désactivé).

En plus vous utilisez feu "Golive le Regretté". Golive fait parfaitement le nettoyage du code source avant l'upload (option à paramétrer).

En fait mes vieilles pages Golive fonctionne bien elles (mais elles ne sont pas "optimisées"). Oui, je regrette aussi "feu Golive"

j'ai fini par trouver le problème en "essai-erreur". Ce soft propose dans ses prefs d'optimiser (compresser) différentes choses : l'html en retirant les espaces et les tabs, les jpgs, les png, les commentaires, les codes JavaScript, VBScript, CSS, etc,... Je n'avais évidemment pas coché "optimisé les scripts", mais malgré ça il semble que le code ga soit assez sensible et qu'il était affecté. Donc effectivement comme vous dites très justement, cet outil y touche d'une manière ou d'une autre.

En résumé, après différents essais, la solution à été de dupliquer mon dossier, retirer le code ga de toutes les pages, passer le tout dans html optimizer en veillant à ne retirer que les espaces, retours à ligne et tabs uniquement non nécessaires de manière à garder la structure des tableaux notamment, remettre le code ga et tout renvoyer. Pfuuh ! Mais Analytics refonctionne.
Bref Google accepte ce type de compression (c'est ce qui m'inquiétait le plus) et continue à lire le contenu malgré qu'il soit devenu illisible par un humain.

Merci à vous pour votre réactivité et vos conseils

Terranovatrek · 25 Janvier 2011

Leonick a dit:
d'après ce que j'ai compris, ce logiciel compresse des pages html statiques. Et franchement, des html statiques on n'en utilise quasi plus, sitôt passé la dizaine de pages d'un site qui ne bougera pas ensuite.
Et gagner 15 à 30 Ko, ça veut dire que tes pages sont trop lourdes : déjà, vire toutes les meta, sauf la description
externalise tes js
fais ta mise en page en css et pas avec des <table> et tu verras ton script diminuer à vue d'œil

Oui, tu as tout à fait raison. J'ai fait toute ma mise en page en table, sous-table et sous-sous table de table. C'est lourd et je devrais refaire tout en css, mais waouh le boulot et le temps surtout. Je dirige ma propre boîte et je ne suis pas webmaster. J'ai appris sur le tas et je ne paux m'occuper, malheureusement, de ma page quand je n'ai plus rien d'autre à faire.

Une dernière question : pour les metas, t'es sûr que je peux tout virer, sauf description et title évidemment. Il faut au moins que je garde aussi ""robots" content="index, follow" />", non ?
Et la "pragma" content="NO-CACHE">, la "Cache-Control" content="no-cache"> ?
La "REVISIT-AFTER" content="15 days"> et la "LANGUAGE" content="Français, French, Frances">, ça m' angoisse un peu de les supprimer aussi. Je suis basé en équateur et ma clientèle est française à 90% (suis hébergé chez Amen, mais il m'ont mis sur un serveur en Italie apparemment. Insisté que mon site est pour les français est primordial pour moi).

Leonick · 25 Janvier 2011

Terranovatrek a dit:
C'est lourd et je devrais refaire tout en css, mais waouh le boulot et le temps surtout.

utilise un CMS pour refaire ton site

Terranovatrek a dit:
Une dernière question : pour les metas, t'es sûr que je peux tout virer, sauf description et title évidemment.

j'ai trop taillé : il faut garder

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="language" content="fr-FR" />

Terranovatrek a dit:
Il faut au moins que je garde aussi ""robots" content="index, follow" />", non ?

par défaut c'est ce qu'il a comme action. On n'utilise cette option que pour restreindre l'accès des robots

Terranovatrek a dit:
Et la "pragma" content="NO-CACHE">, la "Cache-Control" content="no-cache"> ?

si tes pages ne changent pas, non. Ca permettra aux visiteurs d'éviter de recharger la page et accélérera le surf de l'internaute

Terranovatrek a dit:
La "REVISIT-AFTER" content="15 days">

là tu lui dis "ne revient pas me voir avant 15 jours" :wink:

Terranovatrek · 25 Janvier 2011

Leonick a dit:
Terranovatrek a dit:

C'est lourd et je devrais refaire tout en css, mais waouh le boulot et le temps surtout.

Cliquez pour agrandir...

utilise un CMS pour refaire ton site

Mmmm! J'ai investi dans DW. J'ai passé des années à amélioré le référencement de mes pages, tu peux taper à peu près n'importe quoi en rapport avec le tourisme suivi de equateur et j'apparais en 1er page de Google souvent avec 2 pages et parfois en 1ere position. Essaye montagne equateur, trekking equateur, randonnee equateur, plongee equateur, croisiere galapagos, qui sont mes produits phares et malgré un ranking bas j'apparais même avant des "gros" comme Terre d'av, Allibert, Tirawa, le Routard, trek magazine, etc, même avec agence de voyage Quito je suis en 1ere page.
C'est pas bien d'être présomptueux, mais oui tans pis je suis fier de moi ... Mais du coup, j'hésite beaucoup à faire de grosses modifications en profondeur, tu comprend et Google est tellement sensible et c'est tellement d'arriver là-haut que j'angoisse dès que je touche à qq chose.
J'essayerai en me mettant sérieusement à la CSS. J'ai encore un peu de temps entre minuit et 2 h du mat

<meta name="language" content="fr-FR" />

Terranovatrek a dit:
Il faut au moins que je garde aussi ""robots" content="index, follow" />", non ?

par défaut c'est ce qu'il a comme action. On n'utilise cette option que pour restreindre l'accès des robots
Ah Ok. J'avais lu en effet ça qq part, mais j'ai du le zapper. Merci.

Terranovatrek a dit:
Et la "pragma" content="NO-CACHE">, la "Cache-Control" content="no-cache"> ?

si tes pages ne changent pas, non. Ca permettra aux visiteurs d'éviter de recharger la page et accélérera le surf de l'internaute
Bon, je les changent quand même de temps en temps. J'essaye que ce ne soit pas trop statique quand même.

Terranovatrek a dit:
La "REVISIT-AFTER" content="15 days">

là tu lui dis "ne revient pas me voir avant 15 jours" :wink:[/quote]
Ah zut ! En tous cas un grand merci pour ton aide Leonick

Leonick · 25 Janvier 2011

Terranovatrek a dit:
Bon, je les changent quand même de temps en temps. J'essaye que ce ne soit pas trop statique quand même.

donc dans ce cas là, le CMS est tout indiqué. En plus, ça te permet de pouvoir faire tes modifications depuis n'importe où

e-kiwi · 25 Janvier 2011

>> Ce serait plutôt un facteur mineur intervenant dans le classement.

c'est pour mon site un facteur capital ! une baisse de performances serveurs et adieu 80% de Google news.
mais c'est un cas particulier peut-être

Leonick · 25 Janvier 2011

@ e-kiwi : tu a quoté quoi ou qui ?