Discussion :

[gotcha5832]

Etant toujours en train d'essayer d'améliorer les perf de mon site je pense créer des alias de domaine en sous-domaine pour les images.


Ainsi au lieu de télécharger
5 images depuis http://example.com
puis
5 images depuis http://example.com
puis
5 images depuis http://example.com
....

Il téléchargera
5 images depuis http://example.com
et
5 images depuis http://image1.example.com
et
5 images depuis http://image2.example.com
et
5 images depuis http://image3.example.com
puis
....

Ce qui devrais pas mal accélerez le téléchargement ayant ~100 d'images sur certaine page

mais cela va augmenter le nombre de résolution DNS

Alors à votre avis qu'est ce qui serais préférable?

Compte-tenu du nombre d'image (~100) ca fais 20 salve de 5 image
Vs
5 salves de 5 images sur 5 domaines + 4 résolution DNS??

Mais d'ailleurs il y a t il une résolution de DNS sur un sous domaine?

[jpvincent]

salut

Oui il y a bien une requête DNS supplémentaire par sous-domaine, mais vu le nombre d'images que tu veux afficher, tu devrais tout de même y gagner au global.

La technique est bonne, surtout pour les anciens navigateurs (IE6-7), mais il faut que tu sois certain que tes visiteurs aient une grosse bande passante, sinon c'est l'effet inverse que tu vas obtenir : sur mobile ou dans certains pays (et même pour 5% des français en fait), il n'y a pas de débit d'ADSL. En en faisant télécharger plus en même temps, les gens vont donc voir moins d'image du premier coup.

Il faut aussi que tu sois certain de toujours distribuer la même image sur le même sous-domaine (un hash du nom ou de l'id par exemple ?) sinon le navigateur n'utilisera pas le cache.

Enfin, je ne sais pas à quoi ressemble ton design ou le chemin de navigation typique sur ton site, mais il est peu probable que l'utilisateur ait besoin de 100 images du premier coup : est ce que tu peux envisager de n'afficher que les images visibles, et les suivantes seulement lorsque l'utilisateur scrolle ? tu vas sauver beaucoup de bande passante, pour ton hébergeur comme pour ton utilisateur

[gotcha5832]

Je te remercie pour tes infos.

Mais pas evident que chaque image soit toujours appelé sur le meme sous-domaine.

Effectivement je réfléchissait à la soluce du jquery.lay... pour retarder le chargement.


p.s. je t'envoie un mp

[jpvincent]

J'ai fait un test sur webpagetest.org, et il y a 2-3 trucs qui me sautent aux yeux en regardant les screenshots et le waterfall :
http://www.webpagetest.org/video/com...al=500&end=doc

Pendant 2s l'utilisateur ne voit rien, ce qui peut se réduire :
- ton serveur met un peu moins d'une seconde à générer la page, vu le site je dirais qu'il te faut :

• du cache côté serveur sur les modules qui génèrent les parties statiques (si tu gères pas les stocks, tout sauf le panier et le login en fait)
• faire des flush() en PHP pour envoyer le head de la page ASAP, puis pour chaque bloc logique

- l'autre seconde perdue se fait côté client :

• apparemment tu utilises la version bloquante de google analytics. Tu devrais soit copier ga.js dans ton JS à toi, soit utiliser la version asynchrone http://code.google.com/intl/fr-FR/ap...sageGuide.html
• le widget facebook bloque le rendu (bloquage + grosse utilisation processeur), je ne sais pas si il n'existe pas une version asynchrone, ou si tu ne pourrais pas l'inclure en tout dernier
• la font prend une bonne demie seconde à elle toute seule mais logiquement avec le cache ça ne devrait pas gêner les gens qui explorent le site. Par contre si tu as beaucoup de gens qui arrivent directement de Google, tu peux en perdre pas mal pour un effet de déco qui n'est pas forcément top (je trouve difficilement lisible le petit texte)
• si tu peux faire l'appel de ton JS en asynchrone, tu gagnerais encore une demie seconde

Bref, déjà avec ça tu peux passer ton premier affichage en dessous de la demie seconde et donc avoir plus de pages vues et probablement de ventes

Pour le téléchargement des images :

• oui je te conseille clairement d'utiliser un plugin jQuery ou un autre script déjà tout fait.
• as tu besoin des cookies pour afficher tes thumbs ? si non tu devrais mettre tes images sur un autre domaine sans cookie, ça devrait éviter 100Ko d'upload par page

[gotcha5832]

Je te remercie pour ton feed back.


J'ai fait un test sur webpagetest.org, et il y a 2-3 trucs qui me sautent aux yeux en regardant les screenshots et le waterfall :
http://www.webpagetest.org/video/com...al=500&end=doc

Pendant 2s l'utilisateur ne voit rien, ce qui peut se réduire :
- ton serveur met un peu moins d'une seconde à générer la page, vu le site je dirais qu'il te faut :

* du cache côté serveur sur les modules qui génèrent les parties statiques (si tu gères pas les stocks, tout sauf le panier et le login en fait)

il y a justement le pb stock, sachant que je suis avec une très grande partir de pièce unique.

* faire des flush() en PHP pour envoyer le head de la page ASAP, puis pour chaque bloc logique

connais pas faut que je potase le sujet..

- l'autre seconde perdue se fait côté client :

* apparemment tu utilises la version bloquante de google analytics. Tu devrais soit copier ga.js dans ton JS à toi, soit utiliser la version asynchrone http://code.google.com/intl/fr-FR/ap...sageGuide.html

il me semblais d'être en asynchronous

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
	<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-xxxxxxx-1']);
			_gaq.push(['_trackPageview']);
			(function() {
				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				ga.setAttribute('async', 'true');
				//(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

			})();
		</script>

* le widget facebook bloque le rendu (bloquage + grosse utilisation processeur), je ne sais pas si il n'existe pas une version asynchrone, ou si tu ne pourrais pas l'inclure en tout dernier

Je viens de l'installer et il est chiant il ne me semble pas avoir de version asynchrone exepté avec un numéro developpeur API que j'ai pas.

* la font prend une bonne demie seconde à elle toute seule mais logiquement avec le cache ça ne devrait pas gêner les gens qui explorent le site. Par contre si tu as beaucoup de gens qui arrivent directement de Google, tu peux en perdre pas mal pour un effet de déco qui n'est pas forcément top (je trouve difficilement lisible le petit texte)

c'est sure que ca ralentit mais après c'est un choix

* si tu peux faire l'appel de ton JS en asynchrone, tu gagnerais encore une demie seconde

Je vois pas comment le passer en asynchrone?
tu peut détailler?

Bref, déjà avec ça tu peux passer ton premier affichage en dessous de la demie seconde et donc avoir plus de pages vues et probablement de ventes

Pour le téléchargement des images :
* oui je te conseille clairement d'utiliser un plugin jQuery ou un autre script déjà tout fait.

faut que je vois cela, j'ai jiute regarder cela suite à ta vidéo.
Mais ca me parais lourd à gérer.
Il ne faut pas déclarer toute les images en js dans le header?

* as tu besoin des cookies pour afficher tes thumbs ? si non tu devrais mettre tes images sur un autre domaine sans cookie, ça devrait éviter 100Ko d'upload par page

clairement pas besoin de cookie.
faut que je regarde cela.
ca peut marcher sur un sous-domaine?


Et que pense tu de l'hébergement en lui-même

Sachant que je suis en mutu, je me demande si ca serais pas la meilleur manière de l'accélerer?

Désolé si j'abuse sur les question mais tu semble bien maitriser le sujet.

Mille merci

[jpvincent]

il y a justement le pb stock, sachant que je suis avec une très grande partir de pièce unique.

bon déjà rien qu'avec du cache pour les parties statiques et du flush, tu devrais avoir de bons résultats.

connais pas faut que je potase le sujet..

en théorie c'est simple comme un appel de fonction : http://fr.php.net/flush
mais comme j'imagine que ta boutique tourne sur un framework PHP particulier, ça peut être plus compliqué.

il me semblais d'être en asynchronous

effectivement, ça devrait être bon, je ne sais pas pourquoi sur le graphique ça a l'air bloquant.

Je viens de l'installer et il est chiant il ne me semble pas avoir de version asynchrone exepté avec un numéro developpeur API que j'ai pas.

Il faut s'équiper

Je vois pas comment le passer en asynchrone?
tu peut détailler?

j'aime bien me citer
[ame="http://www.slideshare.net/jpvincent/inclure-du-javascript-de-manire-performante"]Inclure du Javascript de manière performante@@AMEPARAM@@ssplayer2.swf?doc=slidesinclusionjs-101018044717-phpapp01&stripped_title=inclure-du-javascript-de-manire-performante@@AMEPARAM@@slidesinclusionjs-101018044717-phpapp01@@AMEPARAM@@inclure-du-javascript-de-manire-performante[/ame]

faut que je vois cela, j'ai jiute regarder cela suite à ta vidéo.
Mais ca me parais lourd à gérer.
Il ne faut pas déclarer toute les images en js dans le header?

Ca dépend des librairies, techniquement il est possible de chercher toutes les images en javascript et de les afficher progressivement, donc certaines doivent le faire. Sinon vu que tu connais à l'avance les images, la liste ne doit pas être bien difficile à générer

clairement pas besoin de cookie.
faut que je regarde cela.
ca peut marcher sur un sous-domaine?

Oui, il faut restreindre le cookie pour le www.domain.com uniquement, et le navigateur arrettera d'envoyer des cookies inutiles pour tous les sous-domaines

Et que pense tu de l'hébergement en lui-même

A vue de nez tu n'es pas du tout ralenti, tous tes problèmes sont pour moitié au front, moitié résolvables en PHP